@undermuz/react-json-form v2.0.2
@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: 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,
},
],
}
- Apply the scheme to JsonForm
const YourForm = () => {
const [value, setValue] = useState({})
return (
<>
<UiContext.Provider value={ChakraUiTheme}>
<JsonForm {...scheme} value={value} onChange={setValue} />
</UiContext.Provider>
</>
)
}
- Get result
Built-in themes
Examples
Forms
Custom layout
22 days ago
22 days ago
22 days ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
9 months ago
10 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago