@uiw/react-json-view

The Section component and useSectionStore hook allow you to provide custom configuration for the visual elements used within the JSON viewer (such as the ellipsis, key names, and row containers).

By wrapping your component tree in a Section provider, you can override the default styles and HTML tags for internal UI elements. You can then access these configurations using the useSectionStore hook.

Available Section Elements

When providing an initial state to the Section component, you can customize the following keys:

• Copied: The element shown when a value is copied.
• CountInfo: The element displaying object size/info.
• CountInfoExtra: Additional info element.
• Ellipsis: The element used for truncated objects (e.g., ...).
• Row: The container for a single JSON line/row.
• KeyName: The element used to render object keys.

import { Section, useSectionStore } from './path-to-section';

const customInitial = {
  Ellipsis: {
    as: 'span',
    style: { color: 'red' },
    children: ' (more)'
  },
  // ... other elements
};

function App() {
  return (
    <Section initial={customInitial} dispatch={dispatch}>
      <MyJsonViewer />
    </Section>
  );
}

// Inside a child component:
function MyJsonViewer() {
  const section = useSectionStore();
  // section.Ellipsis contains your custom config
}

The InitialTypesState type allows you to customize how different JSON data types (like strings, numbers, booleans, etc.) are rendered within the view. You can specify the HTML element to use (as), custom styles, CSS classes, and a custom render function for each type.

Supported type keys in InitialTypesState include:

• Url (for URL strings)
• Str (for general strings)
• Undefined (for undefined)
• Null (for null)
• True / False (for booleans)
• Date (for Date objects)
• Float / Int / Bigint / Nan (for various number types)
• Set / Map (for collection types)

Each type configuration can use the render prop to access the specific value and key name being processed.

import { InitialTypesState } from '@uiw/react-json-view'; // Assuming export path

const customTypes: InitialTypesState<'span'> = {
  Str: {
    as: 'span',
    style: { color: 'orange' },
    children: 'string',
    render: (props, result) => (
      <span style={{ fontWeight: 'bold' }}>
        {result.value}
      </span>
    ),
  },
  // ... other types
};

The library provides specialized components for rendering various primitive and built-in JavaScript types. Most of these components support a render function via the store to allow custom rendering of both the type label and the value itself.

Available type components include:

• TypeString: Renders strings. Supports shortening long text based on shortenTextAfterLength and stringEllipsis settings. Clicking a shortened string toggles its full view.
• TypeInt: Renders integers.
• TypeFloat: Renders floating-point numbers.
• TypeBigint: Renders BigInt values, appending n to the string representation.
• TypeTrue / TypeFalse: Renders boolean values.
• TypeUrl: Renders URL objects as clickable <a> tags.
• TypeDate: Renders Date objects using toLocaleString().
• TypeNull / TypeUndefined: Renders null or undefined literals.
• TypeNan: Renders NaN values.

The Provider component allows you to initialize the state of the JSON view, including configuration for indentation, sorting, and display behavior. You can pass an initialState object to customize these settings globally for the children of the provider.

Key configuration options available in initialState include:

• indentWidth: Number defining the indentation width (defaults to 15).
• objectSortKeys: Boolean to determine if object keys should be sorted (defaults to false).
• collapsed: Boolean to control initial collapsed state.
• enableClipboard: Boolean to enable/disable clipboard functionality.
• displayObjectSize: Boolean to show the size of objects.
• stringEllipsis: String used for text truncation.
• shortenTextAfterLength: Number defining when to truncate text.

import { Provider } from '@uiw/react-json-view';

const initialState = {
  indentWidth: 20,
  objectSortKeys: true,
  enableClipboard: true,
};

function App() {
  return (
    <Provider initialState={initialState}>
      <JsonView object={{ a: 1 }} />
    </Provider>
  );
}