Component for editing Tree or JSON with ease for react

• Getting started

  To get started, create a React ref with initial JSON data and pass it to JsonTree. With a few simple props, I can enable adding, deleting, showing type information and reordering lists.

  const App = () => {
    const jsonRef = useRef({
      name: 'John Doe',
      email: 'johndoe@example.com',
      isAdmin: true,
      isActive: true,
    });
  
    return (
      <JsonTree
        jsonRef={jsonRef}
        newEntry // enable add new node
        deleteEntry // enable delete node
        showTypeInfo // enable show node type
        reorderArray // enable reorder lists
      />
    );
  };

  • name

    String
  • email

    String
  • isAdmin

    Boolean
  • isActive

    Boolean
  • Add node

  Update user
• Validate inputs

  I've included Zod schema validation to ensure the data meets all the necessary requirements from the start.

  const UserSchema = z.object({
    name: z.string().min(2),
    email: z.string().email(),
    isAdmin: z.boolean(),
    isActive: z.boolean(),
  });
  
  const App = () => {
    return (
      <JsonTree
        jsonRef={jsonRef}
        schema={UserSchema}
      />
    );
  };

  • name

    String
  • email

    String
  • isAdmin

    Boolean
  • isActive

    Boolean
  • Add node

  Update user
• Leaf configuration

  Each leaf can be customized. Target nodes with simple path queries or regex patterns to tweak the configurations to specification.

  const UserConfig: LeafConfig[] = [
    {
      query: ['isAdmin'],
      deleteEntry: false,
      disabled: true,
    },
    {
      query: /^isActive$/,
      deleteEntry: false,
      disabled: true,
    },
  ];
  
  const App = () => {
    return (
      <JsonTree
        jsonRef={jsonRef}
        schema={UserSchema}
        leafConfigs={UserConfig}
      />
    );
  };

  • name

    String
  • email

    String
  • isAdmin

    Boolean
  • isActive

    Boolean
  • Add node

  Update user
• Data template

  When adding new entries, use data templates to automatically populate fields with default values, making the process smoother.

  const UserConfig: LeafConfig[] = [
    {
      query: /^preferences$/,
      newEntryType: 'object',
      newEntryValue: {
        theme: 'dark',
        notifications: true,
        languages: ['en', 'es'],
      },
    },
    {
      query: /^preferences,*/,
      deleteEntry: false,
    },
  ];
  
  const App = () => {
    return (
      <JsonTree
        jsonRef={jsonRef}
        schema={UserSchema}
        leafConfigs={UserConfig}
      />
    );
  };

  • name

    String
  • email

    String
  • isAdmin

    Boolean
  • isActive

    Boolean
  • Add node

  Update user

I developed this component out of a need for a flexible, easy-to-use tree editor while working on various data-heavy applications. Whether dealing with configurations or database management, this component makes complex data manipulation straightforward.