### Install React JSON View

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/README.md

Install the library using npm. This is the first step before using the component in your React application.

```bash
npm install @uiw/react-json-view
```

--------------------------------

### Basic Usage Example

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/DOCUMENTATION_REPORT.txt

Demonstrates the fundamental way to render a JSON object using the React JSON View component. No specific setup or imports are shown here, implying they are handled in a broader context.

```javascript
import React from 'react';
import JSONView from '@uiw/react-json-view';

const App = () => (
  <JSONView value={{
    name: 'Example',
    version: '1.0.0',
    description: 'A simple JSON object',
    enabled: true,
    count: 123,
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
    ],
    nested: {
      key: 'value',
    },
  }} />
);

export default App;
```

--------------------------------

### Example Usage of Provider Component

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Demonstrates how to use the Provider component with initial state configuration. This sets up the necessary context for the JsonView component and its sub-components.

```javascript
import { Provider } from '@uiw/react-json-view';
import { Container } from '@uiw/react-json-view/internal';

export default function App() {
  return (
    <Provider
      initialState={{
        value: data,
        displayObjectSize: true,
        displayDataTypes: true,
      }}>
      <Container value={data} keyid="root" level={1} keys={[]} />
    </Provider>
  );
}
```

--------------------------------

### Run Project in Watch Mode

Source: https://github.com/uiwjs/react-json-view/blob/main/README.md

Starts the project in watch mode, compiling components and outputting .js files. This should be run first.

```bash
npm run watch
```

--------------------------------

### ES Modules Usage Example

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/configuration.md

Example of using React JSON View with ES Modules. Demonstrates importing JsonView, a theme, and a custom arrow component.

```javascript
import JsonView from '@uiw/react-json-view';
import { darkTheme } from '@uiw/react-json-view/dark';
import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';

export default function App() {
  return (
    <JsonView value={data} style={darkTheme}>
      <JsonView.Arrow>
        <TriangleSolidArrow />
      </JsonView.Arrow>
    </JsonView>
  );
}
```

--------------------------------

### Run Project in Development Mode

Source: https://github.com/uiwjs/react-json-view/blob/main/README.md

Starts the project in development mode, listening for compilation output and previewing the website instance. Run after 'npm run watch'.

```bash
npm run start
```

--------------------------------

### CommonJS Usage Example

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/configuration.md

Example of using React JSON View with CommonJS module format. Requires importing the JsonView and a theme.

```javascript
const JsonView = require('@uiw/react-json-view');
const { darkTheme } = require('@uiw/react-json-view/dark');

module.exports = function App() {
  return <JsonView value={data} style={darkTheme} />;
};
```

--------------------------------

### Container Styling Example

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/container.md

Demonstrates how to apply inline styles to the Container component to control its appearance, such as line height, font family, and color.

```jsx
<Container
  style={{
    lineHeight: 1.4,
    fontFamily: 'Menlo, monospace',
    color: 'var(--w-rjv-color, #002b36)',
  }}
/>
```

--------------------------------

### Usage Example for TriangleArrow

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/arrow-components.md

Demonstrates how to integrate the TriangleArrow component as a custom arrow within the JsonView component. Ensure both JsonView and TriangleArrow are imported.

```javascript
import JsonView from '@uiw/react-json-view';
import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';

<JsonView value={data}>
  <JsonView.Arrow>
    <TriangleArrow />
  </JsonView.Arrow>
</JsonView>
```

--------------------------------

### TypeScript Usage Example

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/configuration.md

Example of using React JSON View with TypeScript. Includes type definitions for data and the shouldExpandNodeInitially prop.

```typescript
import JsonView, { 
  type JsonViewProps, 
  type ShouldExpandNodeInitially 
} from '@uiw/react-json-view';
import { darkTheme } from '@uiw/react-json-view/dark';

interface DataType {
  name: string;
  age: number;
  active: boolean;
}

const shouldExpand: ShouldExpandNodeInitially<DataType> = (isExpanded, { level }) => {
  return level < 2;
};

export default function App() {
  const data: DataType = { name: 'John', age: 30, active: true };

  return (
    <JsonView
      value={data}
      style={darkTheme}
      shouldExpandNodeInitially={shouldExpand}
    />
  );
}
```

--------------------------------

### Common Customization Pattern

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/symbol-components.md

Example of how to hide all structural symbols for a cleaner display, such as a MongoDB-like view.

```APIDOC
## Common Customization Pattern

Hide all structural symbols for a cleaner MongoDB-like display:

```javascript
<JsonView value={data}>
  <JsonView.Quote render={() => <span />} />
  <JsonView.BraceLeft render={() => <span />} />
  <JsonView.BraceRight render={() => <span />} />
  <JsonView.BracketsLeft render={() => <span />} />
  <JsonView.BracketsRight render={() => <span />} />
  <JsonView.ValueQuote render={() => <span />} />
</JsonView>
```
```

--------------------------------

### Basic JsonViewEditor Usage

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/jsonview-editor.md

Demonstrates the basic setup of the JsonViewEditor component with sample data and an onEdit callback to log changes. The 'editable' prop is set to true to enable editing.

```javascript
import JsonViewEditor from '@uiw/react-json-view/editor';

const data = {
  name: 'John',
  age: 30,
  tags: ['react', 'json']
};

export default function App() {
  const handleEdit = ({ value, oldValue, keyName, type }) => {
    console.log(`Changed ${keyName} from ${oldValue} to ${value}`);
    return true; // Allow the change
  };

  return (
    <JsonViewEditor
      value={data}
      editable={true}
      onEdit={handleEdit}
    />
  );
}
```

--------------------------------

### Customizing Row Rendering

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/section-components.md

Example demonstrating how to customize the rendering of a JSON View row. This allows for adding custom behaviors like click handlers to individual rows.

```javascript
<JsonView value={data}>
  <JsonView.Row
    render={(props, { keyName, value, parentValue }) => (
      <div
        {...props}
        onClick={() => console.log('Clicked:', keyName, value)}
        style={{ ...props.style, cursor: 'pointer' }}
      />
    )}
  />
</JsonView>
```

--------------------------------

### Custom Container Wrapping Example

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/container.md

Demonstrates how to wrap the internal Container component with custom logic to apply additional styling or behavior. This requires passing down all necessary props to the original Container.

```javascript
function CustomContainer({ value, keyName, ...props }) {
  return (
    <div className="custom-container">
      <Container
        value={value}
        keyName={keyName}
        {...props}
      />
    </div>
  );
}
```

--------------------------------

### Provider Component Setup

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Sets up context for JsonView state management. Wrap your JSON view component with Provider to enable features like initial state, data types, and display options.

```typescript
const Provider: React.FC<PropsWithChildren<ProviderProps<TagType>>>;

interface ProviderProps<T extends TagType> {
  initialState?: InitialState<object>;
  initialTypes?: InitialTypesState<T>;
}
```

--------------------------------

### Interactive Theme Customization with Live Preview

Source: https://github.com/uiwjs/react-json-view/blob/main/README.md

Demonstrates how to dynamically customize the theme of the JsonView component using a color picker and see the changes in real-time. This snippet includes a full example with state management for colors and theme variables.

```tsx
import React, { useState, useEffect } from 'react';
import Colorful from '@uiw/react-color-colorful';
import JsonView from '@uiw/react-json-view';

const object = {
  avatar: 'https://i.imgur.com/MK3eW3As.jpg',
  string: 'Lorem ipsum dolor sit amet',
  integer: 42,
  float: 114.514,
  bigint: 10086n,
  null: null,
  undefined,
  timer: 0,
  nan: NaN,
  url: new URL('https://example.com'),
  date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
  array: [19, 100.86, 'test', NaN, Infinity],
  nestedArray: [
    [1, 2],
    [3, 4],
  ],
  object: {
    'first-child': true,
    'second-child': false,
    'last-child': null,
  },
  string_number: '1234',
}
const customTheme = {
  '--w-rjv-color': '#9cdcfe',
  '--w-rjv-key-number': '#268bd2',
  '--w-rjv-key-string': '#9cdcfe',
  '--w-rjv-background-color': '#1e1e1e',
  '--w-rjv-line-color': '#36334280',
  '--w-rjv-arrow-color': '#838383',
  '--w-rjv-edit-color': '#9cdcfe',
  '--w-rjv-info-color': '#9c9c9c7a',
  '--w-rjv-update-color': '#9cdcfe',
  '--w-rjv-copied-color': '#9cdcfe',
  '--w-rjv-copied-success-color': '#28a745',

  '--w-rjv-curlybraces-color': '#d4d4d4',
  '--w-rjv-colon-color': '#d4d4d4',
  '--w-rjv-brackets-color': '#d4d4d4',
  '--w-rjv-ellipsis-color': '#cb4b16',
  '--w-rjv-quotes-color': '#9cdcfe',
  '--w-rjv-quotes-string-color': '#ce9178',

  '--w-rjv-type-string-color': '#ce9178',
  '--w-rjv-type-int-color': '#b5cea8',
  '--w-rjv-type-float-color': '#b5cea8',
  '--w-rjv-type-bigint-color': '#b5cea8',
  '--w-rjv-type-boolean-color': '#569cd6',
  '--w-rjv-type-date-color': '#b5cea8',
  '--w-rjv-type-url-color': '#3b89cf',
  '--w-rjv-type-null-color': '#569cd6',
  '--w-rjv-type-nan-color': '#859900',
  '--w-rjv-type-undefined-color': '#569cd6',
};

export default function Demo() {
  const [cssvar, setCssvar] = useState('--w-rjv-background-color');
  const [hex, setHex] = useState("#1e1e1e");
  const [editable, setEditable] = useState(false);
  const [theme, setTheme] = useState(customTheme);
  const onChange = ({ hexa }) => {
    setHex(hexa);
    setTheme({ ...theme, [cssvar]: hexa });
  };

  const [src, setSrc] = useState({ ...object })
  useEffect(() => {
    const loop = () => {
      setSrc(src => ({
        ...src,
        timer: src.timer + 1
      }))
    }
    const id = setInterval(loop, 1000)
    return () => clearInterval(id)
  }, []);

  const changeEditable = (evn) => setEditable(evn.target.checked);
  return (
    <React.Fragment>
      <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
        <JsonView
          // editable={editable}
          value={src}
          keyName="root"
          style={{ flex: 1, overflow: 'auto', ...theme }}
        />
        <div>
          <Colorful color={hex} onChange={onChange} />
          <div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column', ...customTheme }}>
            {Object.keys(customTheme).map((varname, idx) => {
              const click = () => {
                setCssvar(varname);
                setHex(customTheme[varname]);
              };
              const active = cssvar === varname ? '#a8a8a8' : '';
              return (
                <button key={idx}
                  style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000', display: 'flex', alignItems: 'center', gap: 5, padding: '1px 3px' }}
                  onClick={click}
                >
                  <span style={{ display: 'inline-block', width: 12, height: 12, background: `var(${varname})` }}></span>
                  {varname}
                </button>
              )
            })}
          </div>
        </div>
      </div>
      <div>
        Copy the theme configuration below into your project.
      </div>
      <pre style={{ padding: 10 }}>
        {JSON.stringify(theme, null, 2)}
      </pre>
    </React.Fragment>
  );
}

```

--------------------------------

### Advanced Usage: Customizing Theme

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/DOCUMENTATION_REPORT.txt

Illustrates how to apply a custom theme to the JSON View component. This example assumes the 'dracula' theme is available and imported.

```javascript
import React from 'react';
import JSONView from '@uiw/react-json-view';
import { dracula } from '@uiw/react-json-view/dist/style';

const App = () => (
  <JSONView
    style={{ padding: '10px' }}
    theme={dracula}
    value={{
      name: 'Example',
      version: '1.0.0',
      description: 'A simple JSON object',
      enabled: true,
      count: 123,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
      nested: {
        key: 'value',
      },
    }}
  />
);

export default App;
```

--------------------------------

### Advanced Usage: Displaying Large JSON

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/DOCUMENTATION_REPORT.txt

Shows how to handle very large JSON objects efficiently. This example implies the use of virtualization or other performance optimizations within the component.

```javascript
import React from 'react';
import JSONView from '@uiw/react-json-view';

// Assume largeJsonData is a very large JSON object
const largeJsonData = {
  // ... potentially millions of key-value pairs or array elements
};

const App = () => (
  <JSONView
    style={{ padding: '10px' }}
    value={largeJsonData}
    // Other props for performance optimization might be used here
  />
);

export default App;
```

--------------------------------

### Basic JSON View Usage

Source: https://github.com/uiwjs/react-json-view/blob/main/README.md

Render a JSON object using the JsonView component. This example demonstrates how to display a complex JSON structure including various data types.

```jsx
import JsonView from '@uiw/react-json-view';

const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
const longArray = new Array(1000).fill(1);
const example = {
  avatar,
  string: 'Lorem ipsum dolor sit amet',
  integer: 42,
  float: 114.514,
  bigint: 10086n,
  null: null,
  undefined,
  timer: 0,
  date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
  array: [19, 100.86, 'test', NaN, Infinity],
  nestedArray: [
    [1, 2],
    [3, 4],
  ],
  object: {
    'first-child': true,
    'second-child': false,
    'last-child': null,
  },
  longArray,
  string_number: '1234',
};

<JsonView value={example} />
```

--------------------------------

### Customize URL Rendering

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/type-components.md

Customize URL rendering using the `render` prop on `JsonView.Url`. This example hides the type label and renders URL objects as clickable anchor tags.

```javascript
<JsonView.Url
  render={(props, { type, value }) => {
    if (type === 'type') {
      return <span />;
    }
    if (type === 'value' && value instanceof URL) {
      return (
        <a href={value.href} target="_blank" {...props}>
          {value.href}
        </a>
      );
    }
  }}
/>
```

--------------------------------

### Import Custom Arrow Components for JsonView

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/README.md

Import SVG arrow icon components to customize the appearance of collapsible sections in JsonView. Examples include TriangleArrow and TriangleSolidArrow.

```javascript
import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
```

--------------------------------

### Build Project for Production

Source: https://github.com/uiwjs/react-json-view/blob/main/README.md

Builds the application for production, creating minified files with hashes in the build folder. The app is then ready for deployment.

```bash
npm run build
```

--------------------------------

### Import Themes and Utilities

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/INDEX.md

Import theme configurations like lightTheme and darkTheme. Documented in api-reference/themes.md and configuration.md.

```javascript
import { lightTheme, darkTheme, ... } from '@uiw/react-json-view/*';
```

--------------------------------

### useExpandsDispatch

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Hook to get the dispatch function for updating the expand/collapse state of nodes.

```APIDOC
## useExpandsDispatch

### Description
Hook to get the dispatch function for updating the expand/collapse state of nodes.

### Usage
```javascript
import { useExpandsDispatch } from '@uiw/react-json-view';

function MyComponent() {
  const expandsDispatch = useExpandsDispatch();

  const handleExpandToggle = () => {
    expandsDispatch({ 'node-id': true });
  };
  // ... use expandsDispatch function
}
```
```

--------------------------------

### useDispatchStore

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Hook to get the dispatch function for updating the JSON view editor's state.

```APIDOC
## useDispatchStore

### Description
Hook to get the dispatch function for updating the JSON view editor's state.

### Usage
```javascript
import { useDispatchStore } from '@uiw/react-json-view';

function MyComponent() {
  const dispatch = useDispatchStore();
  
  const handleUpdate = () => {
    dispatch({ displayObjectSize: false });
  };
  // ... use dispatch function
}
```
```

--------------------------------

### Themes

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/README.md

Information on applying pre-built themes (Light, Dark, Nord, VSCode, etc.) and customizing the appearance using CSS variables or creating custom themes.

```APIDOC
## Themes

### Description
Manage the visual styling of the JSON view component.

### Features
- **Built-in Themes**: Includes several pre-defined themes such as Light, Dark, Nord, VSCode, GitHub Light, GitHub Dark, Gruvbox, Monokai, and Basic.
- **CSS Variables**: Allows customization through CSS custom properties for colors and styles.
- **Custom Themes**: Provides guidance on creating your own themes using CSS.
```

--------------------------------

### Custom Ellipsis Rendering

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/section-components.md

Customize the ellipsis indicator for truncated content. This example shows how to display a summary of array elements when the node is expanded.

```javascript
<JsonView value={data}>
  <JsonView.Ellipsis
    render={({ 'data-expanded': isExpanded, className, ...props }, { value }) => {
      if (Array.isArray(value) && isExpanded) {
        // Show array element summary when expanded
        return (
          <span className={className}>
            {Array.from({ length: value.length }, () => 'item').join(', ')}
          </span>
        );
      }
      return <span {...props}>…</span>; // Custom ellipsis
    }}
  />
</JsonView>
```

--------------------------------

### KeyName Component

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/section-components.md

The KeyName component is used for displaying object key names. It can be customized to alter its rendering, for example, to hide array indices.

```APIDOC
## KeyName Component

### Description
Component for displaying object key names.

### Signature
```typescript
const KeyName: <K extends TagType = 'span'>(props: SectionElement<K>) => React.ReactNode;
```

### Default Rendering
Renders key names as a `<span>` with class `w-rjv-object-key`.

### Customization Example
```javascript
<JsonView value={data}>
  <JsonView.KeyName
    render={({ ...props }, { type, parentValue, keyName }) => {
      // Hide array indices
      if (Array.isArray(parentValue) && Number.isFinite(keyName)) {
        return <span />;
      }
      return <span {...props} />;
    }}
  />
</JsonView>
```

### Hide Array Indices Pattern
```javascript
<JsonView value={data}>
  <JsonView.KeyName
    render={(props, { parentValue, keyName }) => {
      if (Array.isArray(parentValue)) {
        return <span />; // Don't show array index
      }
      return <span {...props} />;
    }}
  />
  <JsonView.Colon
    render={(props, { parentValue }) => {
      if (Array.isArray(parentValue)) {
        return <span />; // Also hide colon for arrays
      }
      return <span {...props} />;
    }}
  />
</JsonView>
```
```

--------------------------------

### Direct Container Usage

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/container.md

Demonstrates how to use the Container component directly for advanced rendering scenarios. Requires Provider for state management and configuration.

```javascript
import { Container } from '@uiw/react-json-view/internal';
import JsonView, { Provider } from '@uiw/react-json-view';

const data = {
  name: 'John',
  age: 30,
  tags: ['react', 'json']
};

export default function App() {
  return (
    <Provider initialState={{
      value: data,
      displayObjectSize: true,
      displayDataTypes: true,
      indentWidth: 15,
    }}>
      <Container
        value={data}
        keyName="root"
        keyid="root"
        level={1}
        keys={[]}
      />
    </Provider>
  );
}
```

--------------------------------

### Main Exports

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/DOCUMENTATION_REPORT.txt

Details the primary entry points for importing the React JSON View library and its editor variant.

```APIDOC
## Main Exports

These are the primary modules you can import from the library.

### Entry Points

- **`@uiw/react-json-view`** - Default export for the main JSON view component.
- **`@uiw/react-json-view/editor`** - Export for the JSON view editor variant.
```

--------------------------------

### Array Inspector Style Customization

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/section-components.md

Create a table-like view for arrays by customizing the ellipsis and other structural elements. This example replaces default elements with spans.

```javascript
<JsonView value={arrayData}>
  <JsonView.Ellipsis
    render={({ 'data-expanded': isExpanded, ...props }, { value }) => {
      if (Array.isArray(value) && isExpanded) {
        return (
          <span {...props}>
            {Array.from({ length: value.length }, () => 'Object').join(', ')}
          </span>
        );
      }
      return <span />;
    }}
  />
  <JsonView.Quote render={() => <span />} />
  <JsonView.BraceLeft render={() => <span />} />
  <JsonView.BraceRight render={() => <span />} />
</JsonView>
```

--------------------------------

### Hiding Structural Symbols in React JSON View

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/symbol-components.md

Example of how to hide all structural symbols (quotes, braces, brackets) for a cleaner display, similar to MongoDB.

```javascript
<JsonView value={data}>
  <JsonView.Quote render={() => <span />} />
  <JsonView.BraceLeft render={() => <span />} />
  <JsonView.BraceRight render={() => <span />} />
  <JsonView.BracketsLeft render={() => <span />} />
  <JsonView.BracketsRight render={() => <span />} />
  <JsonView.ValueQuote render={() => <span />} />
</JsonView>
```

--------------------------------

### Import Basic Theme

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/configuration.md

Import the basic theme for the JsonView component. This theme provides a minimal set of styles.

```javascript
import { basicTheme } from '@uiw/react-json-view/basic';
```

--------------------------------

### Customize CountInfo Rendering

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/section-components.md

Use the `render` prop on `JsonView.CountInfo` to customize how the item count is displayed. This example shows how to format counts differently for arrays and objects.

```javascript
<JsonView value={data}>
  <JsonView.CountInfo
    render={({ 'data-length': length, ...props }, { value, keyName }) => {
      const isArray = Array.isArray(value);
      if (isArray) {
        return <span {...props}>[{length} items]</span>;
      }
      return <span {...props}>{'{' + length + ' properties}'}</span>;
    }}
  />
</JsonView>
```

--------------------------------

### Get Symbol Component Configuration with useSymbolsStore

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Retrieves the configuration for symbol components, such as Arrow, Colon, and Quote. Use this to access or inspect how these structural symbols are rendered.

```typescript
function useSymbolsStore(): InitialState<TagType>
```

--------------------------------

### Implement Value Highlighting with useHighlight

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Manages visual highlighting for updated values. Pass the current value, initial value, and a boolean to enable highlighting. Returns highlighting state and styles.

```javascript
import { useHighlight } from '@uiw/react-json-view';

function ValueDisplay({ value, initialValue, highlightUpdates }) {
  const { isHighlighting, style } = useHighlight(
    value,
    initialValue,
    highlightUpdates
  );
  
  return (
    <span style={style}>
      {isHighlighting && '✓ Updated: '}
      {value}
    </span>
  );
}
```

--------------------------------

### Get Node Expand State with useExpandsStore

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Retrieves the expand/collapse state for all nodes in the JSON view. Use this to determine if a specific node is currently expanded or collapsed.

```javascript
import { useExpandsStore } from '@uiw/react-json-view';

function MyComponent() {
  const expands = useExpandsStore();
  const isExpanded = expands['node-id'];
  
  return <div>{isExpanded ? 'Expanded' : 'Collapsed'}</div>;
}
```

--------------------------------

### Applying Basic Theme

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/themes.md

Apply the basic theme to the JsonView component by importing `basicTheme` and passing it to the `style` prop. This theme provides a minimal, monochrome appearance.

```javascript
import { basicTheme } from '@uiw/react-json-view/basic';

<JsonView value={data} style={basicTheme} />
```

--------------------------------

### Import GitHub Light Theme

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/configuration.md

Import the GitHub light theme for the JsonView component. This theme is based on GitHub's light UI.

```javascript
import { githubLightTheme } from '@uiw/react-json-view/githubLight';
```

--------------------------------

### Import Theme Styles for JsonView

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/README.md

Import predefined theme objects for styling the JsonView component. Multiple themes are available, including light, dark, and VSCode.

```javascript
import { lightTheme } from '@uiw/react-json-view/light';
import { darkTheme } from '@uiw/react-json-view/dark';
import { vscodeTheme } from '@uiw/react-json-view/vscode';
// ... and 6 more themes
```

--------------------------------

### Applying GitHub Light Theme

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/themes.md

Apply the GitHub light theme to the JsonView component by importing `githubLightTheme` and passing it to the `style` prop. This theme uses the syntax highlighting colors found in GitHub's light mode.

```javascript
import { githubLightTheme } from '@uiw/react-json-view/githubLight';

<JsonView value={data} style={githubLightTheme} />
```

--------------------------------

### Customize CountInfoExtra Rendering for Empty Arrays

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/section-components.md

Use the `render` prop on `JsonView.CountInfoExtra` to conditionally display information. This example shows displaying '(empty array)' for empty arrays.

```javascript
<JsonView value={data}>
  <JsonView.CountInfoExtra
    render={(props, { value, keyName }) => {
      if (Array.isArray(value) && value.length === 0) {
        return <span {...props}>(empty array)</span>;
      }
      return null;
    }}
  />
</JsonView>
```

--------------------------------

### InitialState Interface

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/types.md

Defines the configuration state for the Provider context. Use this to set global options for the JSON view.

```typescript
interface InitialState<T extends object> {
  value?: object;
  onExpand?: JsonViewProps<object>['onExpand'];
  onCopied?: JsonViewProps<object>['onCopied'];
  beforeCopy?: JsonViewProps<T>['beforeCopy'];
  objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
  displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
  shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
  stringEllipsis?: JsonViewProps<T>['stringEllipsis'];
  enableClipboard?: JsonViewProps<T>['enableClipboard'];
  highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
  collapsed?: JsonViewProps<T>['collapsed'];
  shouldExpandNodeInitially?: JsonViewProps<T>['shouldExpandNodeInitially'];
  indentWidth?: number;
}
```

--------------------------------

### Customize Date Rendering

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/type-components.md

Use the `render` prop on `JsonView.Date` to customize how Date objects are displayed. This example hides the type label and formats the date to ISO string.

```javascript
<JsonView.Date
  render={({ children, ...reset }, { type, value }) => {
    if (type === 'type') {
      return <span />; // Hide type label
    }
    if (type === 'value' && value instanceof Date) {
      return <span {...reset}>{value.toISOString()}</span>;
    }
    return <span {...reset}>{children}</span>;
  }}
/>
```

--------------------------------

### Import Custom Arrow Icons

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/INDEX.md

Import custom arrow components for UI customization. Documented in api-reference/arrow-components.md.

```javascript
import { TriangleArrow, TriangleSolidArrow } from '@uiw/react-json-view/*-arrow';
```

--------------------------------

### JsonViewEditor with Edit Validation

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/jsonview-editor.md

Shows how to implement validation logic within the onEdit callback. This example prevents editing the 'id' field and validates the format of an 'email' field.

```javascript
<JsonViewEditor
  value={data}
  onEdit={({ value, keyName, type }) => {
    // Prevent editing certain keys
    if (keyName === 'id') {
      console.warn('Cannot edit id field');
      return false;
    }

    // Validate email format
    if (keyName === 'email' && typeof value === 'string') {
      const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
      return isValid;
    }

    return true;
  }}
/>
```

--------------------------------

### Applying Light Theme

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/themes.md

Apply the default light theme to the JsonView component by importing `lightTheme` and passing it to the `style` prop. This theme provides a clean, solarized light appearance.

```javascript
import { lightTheme } from '@uiw/react-json-view/light';

<JsonView value={data} style={lightTheme} />
```

--------------------------------

### Get Type Component Configuration with useTypesStore

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Retrieves the configuration for type components, such as String, Int, and Date. Use this to access or inspect how different data types are rendered.

```typescript
function useTypesStore(): InitialTypesState<TagType>
```

--------------------------------

### Array Inspector Style Rendering

Source: https://github.com/uiwjs/react-json-view/blob/main/core/README.md

Create a table-like inspector view for arrays, mimicking browser DevTools. This example customizes the rendering of array elements and their containers for a structured display.

```tsx
import React from 'react';
import JsonView from '@uiw/react-json-view';

const object = [
  {
    "_id": "56dcf573b09c217d39fd7621",
    "name": "Howard Christensen",
    "email": "howardchristensen@gmail.com",
    "phone": "+1 (830) 529-3176",
    "address": "511 Royce Street, Hilltop, Tennessee, 9712"
  },
  {
    "_id": "56dcf57323630b06251e93cd",
    "name": "Eleanor Lynn",
    "email": "eleanorlynn@gmail.com",
    "phone": "+1 (911) 576-2345",
    "address": "547 Dearborn Court, Trona, California, 8629"
  },
  {
    "_id": "56dcf5738279cac6b081e512",
    "name": "Baxter Mooney",
    "email": "baxtermooney@gmail.com",
    "phone": "+1 (954) 456-3456",
    "address": "349 Cumberland Walk, Washington, Alaska, 3154"
  },
  {
    "_id": "56dcf57303accabd43740957",
    "name": "Calhoun Tyson",
    "email": "calhountyson@gmail.com",
    "phone": "+1 (818) 456-2529",
    "address": "367 Lyme Avenue, Ladera, Louisiana, 6292"
  },
]

const customTheme = {
  '--w-rjv-background-color': '#fff',
  '--w-rjv-border-left-width': 0,
  '--w-rjv-color': '#881391',
  '--w-rjv-type-int-color': '#881391',
  '--w-rjv-key-number': '#881391',
  '--w-rjv-key-string': '#881391',
};

const Quote = JsonView.Quote;
const BraceLeft = JsonView.BraceLeft;
const BraceRight = JsonView.BraceRight;
const CountInfo = JsonView.CountInfo;
const Ellipsis = JsonView.Ellipsis;
const CountInfoExtra = JsonView.CountInfoExtra;

export default function Demo() {
  return (
    <JsonView
      value={object}
      style={customTheme}
      enableClipboard={false}
      displayDataTypes={false}
    >
      <Ellipsis
        render={({ 'data-expanded': isExpanded, className, ...props }, { value }) => {
          if (Array.isArray(value) && isExpanded) {
            console.log('props:',value, isExpanded, props)
            return (
              <span className={className}>
                {Array.from({ length: value.length }, () => 'Object').join(', ')}
              </span>
            )
          }
          return <span />;
        }}
      />
      <Quote>
        <span />
      </Quote>
      <BraceLeft>
        <span />
      </BraceLeft>
      <BraceRight>
        <span />
      </BraceRight>
      <CountInfo
        render={({ 'data-length': length, ...props }, { value }) => {
          const isArray = Array.isArray(value);
          if (isArray) return <span />;
          return (
            <span {...props}>Object</span>
          );
        }}
      />
    </JsonView>
  );
}
```

--------------------------------

### useShowTools

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Creates a tool visibility state reducer. This hook returns a tuple with the initial state and a dispatch function for controlling the visibility of tools within the JSON view.

```APIDOC
## useShowTools

### Description
Creates a tool visibility state reducer. This hook returns a tuple with the initial state and a dispatch function for controlling the visibility of tools within the JSON view.

### Signature
```typescript
function useShowTools(): [
  initialState: { [key: string]: boolean },
  dispatch: React.Dispatch<{ [key: string]: boolean }>
]
```

### Returns
Tuple of state and dispatch function
```

--------------------------------

### Define a Simple Custom Theme

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/themes.md

Create a JavaScript object to define custom CSS variables for styling the JSON view. Apply this theme using the 'style' prop.

```javascript
const customTheme = {
  '--w-rjv-font-family': 'Consolas, monospace',
  '--w-rjv-color': '#333333',
  '--w-rjv-background-color': '#f5f5f5',
  '--w-rjv-type-string-color': '#d73a49',
  '--w-rjv-type-int-color': '#005cc5',
  '--w-rjv-type-boolean-color': '#005cc5',
  '--w-rjv-type-null-color': '#6f42c1',
  '--w-rjv-arrow-color': '#666666',
  '--w-rjv-update-color': '#fff5b6',
};

<JsonView value={data} style={customTheme} />
```

--------------------------------

### Import Light Theme

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/configuration.md

Import the default light theme for the JsonView component. This theme is suitable for light mode interfaces.

```javascript
import { lightTheme } from '@uiw/react-json-view/light';
```

--------------------------------

### Directory Structure of Build Outputs

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/configuration.md

This snippet shows the hierarchical organization of files generated after building the project. It includes CommonJS (cjs) and ES Module (esm) distributions, as well as themes and arrow components.

```tree
dist/
├── cjs/
│   ├── index.js
│   ├── index.d.ts
│   ├── editor/
│   │   ├── index.js
│   │   └── index.d.ts
│   ├── theme/
│   │   ├── light.js
│   │   ├── dark.js
│   │   ├── nord.js
│   │   ├── vscode.js
│   │   ├── github.light.js
│   │   ├── github.dark.js
│   │   ├── gruvbox.js
│   │   ├── monokai.js
│   │   └── basic.js
│   └── arrow/
│       ├── TriangleArrow.js
│       └── TriangleSolidArrow.js
├── esm/
│   ├── index.js
│   ├── editor/
│   │   └── index.js
│   ├── theme/
│   │   ├── light.js
│   │   ├── dark.js
│   │   ├── nord.js
│   │   ├── vscode.js
│   │   ├── github.light.js
│   │   ├── github.dark.js
│   │   ├── gruvbox.js
│   │   ├── monokai.js
│   │   └── basic.js
│   └── arrow/
│       ├── TriangleArrow.js
│       └── TriangleSolidArrow.js
└── README.md
```

--------------------------------

### Color Customization with CSS Variable

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/arrow-components.md

Example of customizing the arrow color in JsonView using the CSS variable '--w-rjv-arrow-color'. This applies to any arrow component used within the JsonView.

```javascript
<JsonView
  value={data}
  style={{
    '--w-rjv-arrow-color': '#ff6b6b'
  }}
>
  <JsonView.Arrow>
    <TriangleArrow />
  </JsonView.Arrow>
</JsonView>
```

--------------------------------

### Get Section Component Configuration with useSectionStore

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Retrieves the configuration for section components, such as Row, Copied, and CountInfo. Use this to access or inspect how different sections of the JSON view are rendered.

```typescript
function useSectionStore(): InitialState<TagType>
```

--------------------------------

### Import Main JsonView Component

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/INDEX.md

Import the primary JsonView component for rendering JSON data. Documented in api-reference/jsonview.md.

```javascript
import JsonView from '@uiw/react-json-view';
```

--------------------------------

### Provider

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/DOCUMENTATION_REPORT.txt

The main Provider component for setting up the context for React JSON View.

```APIDOC
## Provider

This component is essential for setting up the context required by React JSON View.

### Component

- **Provider** - Sets up the context for the application.
```

--------------------------------

### Get Tool Visibility State with useShowToolsStore

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/hooks-and-utilities.md

Retrieves the visibility state for clipboard and edit tools associated with each node. Use this to conditionally render or style tools based on their visibility.

```typescript
function useShowToolsStore(): { [key: string]: boolean }
```

--------------------------------

### Import JsonView and JsonViewEditor

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/jsonview.md

Import the main JsonView component and the JsonViewEditor component for editable JSON views.

```typescript
import JsonView from '@uiw/react-json-view';
import JsonViewEditor from '@uiw/react-json-view/editor';
```

--------------------------------

### Customize KeyName Rendering

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/api-reference/section-components.md

Use the KeyName component to customize the rendering of object keys. This example shows how to hide array indices by checking if the parent value is an array and the keyName is a finite number.

```javascript
<JsonView value={data}>
  <JsonView.KeyName
    render={({ ...props }, { type, parentValue, keyName }) => {
      // Hide array indices
      if (Array.isArray(parentValue) && Number.isFinite(keyName)) {
        return <span />;
      }
      return <span {...props} />;
    }}
  />
</JsonView>
```

--------------------------------

### Advanced Usage: Customizing Section Components

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/DOCUMENTATION_REPORT.txt

Demonstrates how to replace the default components used for rendering sections (like arrays and objects) with custom ones. This allows for highly tailored UI elements.

```javascript
import React from 'react';
import JSONView from '@uiw/react-json-view';

const CustomSection = ({ title, children }) => (
  <div style={{ border: '1px solid blue', margin: '5px', padding: '5px' }}>
    <h3>{title}</h3>
    {children}
  </div>
);

const App = () => (
  <JSONView
    style={{ padding: '10px' }}
    value={{
      objectData: { key1: 'value1', key2: 'value2' },
      arrayData: [1, 2, 3]
    }}
    // Note: The exact prop name for custom section components might vary or require deeper customization.
    // This is a conceptual example based on the description.
    // A more accurate implementation would depend on the library's specific API for section customization.
    // For instance, it might involve passing custom render functions or components for object/array headers.
  />
);

export default App;
```

--------------------------------

### Custom Copy Functionality and URL Rendering

Source: https://github.com/uiwjs/react-json-view/blob/main/README.md

Customizes the copy functionality to display a 'Copied' message and renders URLs as clickable links with custom text. This example utilizes `JsonView.Copied` and `JsonView.Url` for specific component overrides.

```tsx
import React, { Fragment } from 'react';
import JsonView, { ValueQuote } from '@uiw/react-json-view';

const Copied = JsonView.Copied;

export default function Demo() {
  return (
    <JsonView
      value={{
        url: new URL('https://example.com?t=12'),
        urlStr: "https://example.com",
        github: "https://example.com",
      }}
      style={{
        '--w-rjv-background-color': '#ffffff',
      }}
    >
      <Copied
        render={({ 'data-copied': copied, style, onClick, ...props }, { value }) => {
          const styl = { whiteSpace: 'nowrap' }
          if (copied) {
            return <span style={{ ...style, ...styl }}>复制成功</span>
          }
          return <span style={{ ...style, ...styl }} onClick={onClick}>复制</span>
        }}
      />
      <JsonView.Url
        render={(props, { type, value }) => {
          if (type === 'type' && value instanceof URL) {
            return <span />
          }
          if (type === 'value' && value instanceof URL) {
            return (
              <Fragment>
                <a href={value.href} target="_blank" {...props}>
                  <ValueQuote />
                  {value.href}
                  <ValueQuote />
                </a>
                Open URL
              </Fragment>
            );
          }
        }}
      />
    </JsonView>
  )
}
```

--------------------------------

### Package Configuration

Source: https://github.com/uiwjs/react-json-view/blob/main/_autodocs/README.md

Information on module exports, entry points, and build configurations, including CommonJS and ES module builds, TypeScript definitions, and theme/arrow icon exports.

```APIDOC
## Package Configuration

### Description
Details on how the `react-json-view` package is configured and exported.

### Exports
- **Module Formats**: Supports both CommonJS (`.cjs`) and ES Module (`.mjs`) builds.
- **TypeScript Definitions**: Includes `.d.ts` files for TypeScript integration.
- **Entry Points**: Defines the main export map for all available modules and utilities.
- **Theme and Arrow Icon Exports**: Specifies how theme and arrow icon components can be imported.
```