@undermuz/react-json-form

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

React library for generate JSON-based form

Install

npm i @undermuz/react-json-form

Basic usage

1. Import JsonForm component

import JsonForm from "@undermuz/react-json-form"

2. Import UiContext for apply theme

import JsonForm, {
    UiContext,
} from "@undermuz/react-json-form"

3. Import theme

import ChakraUiTheme from "@undermuz/react-json-form/themes/chakra"

4. Create form component

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

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

5. Add form's scheme

const scheme: IScheme = {
    id: "login-form-v1",
    single: true,
    multiple: false,
    title: "Login",
    name: "login-form-v1",
    scheme: [
        {
            name: "email",
            title: "E-mail",
            placeholder: "ex: youremail@mail.com",
            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,
        },
    ],
}

6. Apply the scheme to JsonForm

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

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

7. Get result

Built-in themes

Storybook: ChakraUi

Storybook: Rsuite

Storybook: Grommet

Examples

Forms

Storybook: Login form

Storybook: Signup form

Custom layout

Storybook: Wrapp form

Storybook: Wrapp fields block

Storybook: Wrapp each field

Storybook: Vertical stack

Storybook: Horizontal stack

Storybook: Grid layout