@undermuz/react-json-form

v2.0.2

Published

11 days ago

Generate JSON-based forms with react

Downloads

227

0High
0Medium
0Low

undermuz

react form forms use-form hook

@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

Import JsonForm component

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

Import UiContext for apply theme

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

Import theme

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

Create form component

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

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

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: [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,
        },
    ],
}

Apply the scheme to JsonForm

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

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