Skip to content

undermuz/react-json-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@undermuz/react-json-form

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

React library for generate JSON-based form

Install

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

Basic usage

  1. Import JsonForm component
import JsonForm from "@undermuz/react-json-form"
  1. Import UiContext for apply theme
import JsonForm, {
    UiContext,
} from "@undermuz/react-json-form"
  1. Import theme
import ChakraUiTheme from "@undermuz/react-json-form-theme-chakra"
  1. Create form component
const YourForm = () => {
    const [value, setValue] = useState({})

    return (
        <>
            <UiContext.Provider value={ChakraUiTheme}>
                <JsonForm value={value} onChange={setValue} />
            </UiContext.Provider>
        </>
    )
}
  1. 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,
        },
    ],
}
  1. Apply the scheme to JsonForm
const YourForm = () => {
    const [value, setValue] = useState({})

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

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

About

Generate JSON-based form with React

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published