@undermuz/react-json-form

(⚠️⚠️⚠️ THIS PACKAGE IS UNDER DEVELOPING ⚠️⚠️⚠️)

React library for generate JSON-based form

Install

Core library + a theme (pick one):

npm i @undermuz/react-json-form @undermuz/react-json-form-theme-chakra

Lightweight option without UI libraries:

npm i @undermuz/react-json-form @undermuz/react-json-form-theme-base

Basic usage

import { useState } from "react"
import JsonForm, { UiContext, EnumSchemeItemType } from "@undermuz/react-json-form"
import ChakraUiTheme from "@undermuz/react-json-form-theme-chakra"

const scheme = {
    id: "login-form-v1",
    title: "Login",
    scheme: [
        {
            name: "email",
            title: "E-mail",
            placeholder: "ex: [email protected]",
            type: EnumSchemeItemType.Input,
            settings: { inputType: "email" },
            def_value: "",
            rules: [
                [["Boolean"], "Required"],
                [["isEmail"], "Incorrect e-mail"],
            ],
        },
        {
            name: "password",
            title: "Password",
            type: EnumSchemeItemType.Input,
            settings: { inputType: "password" },
            def_value: "",
            rules: [
                [["Boolean"], "Required"],
                [
                    ["isStringMinMaxLength:[6,18]"],
                    "Min length: 6; Max length: 18",
                ],
            ],
        },
        {
            name: "remember",
            title: "Remember?",
            type: EnumSchemeItemType.Checkbox,
            def_value: true,
        },
    ],
}

const YourForm = () => {
    const [value, setValue] = useState({})

    return (
        <UiContext.Provider value={ChakraUiTheme}>
            <JsonForm {...scheme} value={value} onChange={setValue} />
        </UiContext.Provider>
    )
}

Base theme

Native HTML controls + CSS variables. Import styles separately:

import { JsonForm, UiContext } from "@undermuz/react-json-form"
import BaseTheme from "@undermuz/react-json-form-theme-base"
import "@undermuz/react-json-form-theme-base/styles.css"

<UiContext.Provider value={BaseTheme}>
    <JsonForm {...scheme} value={value} onChange={setValue} />
</UiContext.Provider>

See packages/themes/base/README.md for CSS customization.

Themes

| Package | Storybook | | --- | --- | | @undermuz/react-json-form-theme-base | Base | | @undermuz/react-json-form-theme-chakra | Chakra UI | | @undermuz/react-json-form-theme-rsuite | Rsuite | | @undermuz/react-json-form-theme-grommet | Grommet |

Other theme packages in the monorepo: chakra3, heroui.

Examples

Forms

Login form

Signup form

Custom layout

Wrap form

Wrap fields block

Wrap each field

Vertical stack

Horizontal stack

Grid layout

Development

From this directory:

npm run lint
npm test
npm run build

See AGENTS.md for monorepo layout, theme contracts, and tooling notes.