React JSON Renderer

Work-In-Progress - The package hasn't been published on npm yet as I'm still finalizing the component styling. However, the core functionalities are complete, and you can refer to the package to create your own implementation."

API

Component

| Prop | Type | Description | Default | Required | | -------------------------- | ------- | ---------------------------------------- | ------- | -------- | | json | any | | | No | | shouldShowLineNumber | Boolean | If true shows line number at each line | false | No | | shouldRemoveQuotesFromKeys | Boolean | If true remove quotes from every key | false | No | | height | Number | | | Yes | | width | Number | | | Yes | | rowHeight | Number | | 20px | No |

Usage

• Without Autosizer

import JSONRenderer from "react-json-renderer";

function YourComponent() {
    return <JSONRenderer json={yourObject} height={height} width={width} />;
}

• With Autosizer

import AutoSizer from "react-virtualized-auto-sizer";
import JSONRenderer from "react-json-renderer";

function YourComponent() {
    return (
        <AutoSizer>
            {({ height, width }) => (
                <JSONRenderer json={yourObject} height={height} width={width} />
            )}
        </AutoSizer>
    );
}

Hook

| Arg | Type | Description | Default | Required | | ---- | ---- | ----------- | ------- | -------- | | json | any | | | No |

| Return Value | Type | Description | | ------------------------ | ----------------------------- | -------------------------------------------------------------------------------- | | lines | Line[] | Array of instance of Line Builder | | handleToggleLineCollapse | Function: (lineIndex) => void | Function which acts as onClick handler for +(expand) or -(collapse) button |

Usage

import { useJsonLines } from "react-json-renderer";

function Component({ props }) {
    const { json } = props;

    const { lines, handleToggleLineCollapse } = useJsonLines(json);

    return (
        <YourJSONRenderer
            lines={lines}
            handleToggleLineCollapse={handleToggleLineCollapse}
        />
    );
}

Development

yarn install
yarn storybook

This should open the storybook page at port 6006. You can directly start modifying files in src directory.

Component Architecture

Will be added

Future (Priority in order)

• Themable(GitHub Themes/Prisma Themes, Coming Soon??) Component
• Live Editing
• Make the core logic framework agnostic
• Add test