2.0.30 • Published 11 days ago
mig-schema-form v2.0.30
schema-form-component
This component will render fields dynamically based on openApi schema JSON. Default field validation with ajv is also provided within this package.
Install
npm install mig-schema-form
Usage
Schema Example:
const userSchema = {
properties: {
id: {
type: "string",
readOnly: true,
},
name: {
type: "string",
minLength: 3,
},
dob: {
type: "string",
format: "date",
},
address: {
type: "string",
maxLength: 250,
},
},
required: ["name"],
};
import React from 'react';
import { SchemaForm, IFieldConfig } from "mig-schema-form";
import "mig-schema-table/build/index.css";
const config:{[keyName: string]: IFieldConfig} ={
"id":{
hidden:true
},
"dob":{
title:"Date of Birth"
}
}
interface IUserDetailType{}
const Form=()=>{
const [userDetail,setUserDetail]= useState();
const [errorMessages, setErrorMessages] = React.useState<TSchemaFormErrors>();
const onChangeHandler= React.useCallback(
(value:IUserDetailType , key:string)=>{
setUserDetail(value);
if (errorMessages) {
// do somehting
}
},[errorMessages])
return <Form>
<SchemaForm
formTitle={"User Details"}
schema={userSchema}
onInputChange={onChangeHandler}
value={userDetail}
errorMessages={errorMessages}
config={config}
/>
</Form>
}
Component Props
Prop | description |
---|---|
schema | schemaObject to be rendered as a set of fields(example openapi schema). |
value | Object, field value will depend on the value of the property of the object. |
onInputChange | change handler and will be triggered when typing in the input field. (value: T, key: string) => void. |
errorMessages | List of error messages to be shown specifically under the field. |
config | custom UI config {keyName: string: IFieldConfig;}. |
formTitle | Provide a title for a form |
formButton | React Node type and it will render a buttons at the end of fields. |
disableFields | disable fields conditionally. (boolean) |
Config
you can import the type of config from the IFieldConfig.
const config: { [keyName: string]: IFieldConfig } = {};
Development
To to development work, link this repo inside your target project https://docs.npmjs.com/cli/v10/commands/npm-link
2.0.29
11 days ago
2.0.30
11 days ago
2.0.28
15 days ago
2.0.27
15 days ago
2.0.26
16 days ago
2.0.24
17 days ago
2.0.25
17 days ago
2.0.23
22 days ago
2.0.22
23 days ago
2.0.21
1 month ago
2.0.19
1 month ago
2.0.18
1 month ago
2.0.17
2 months ago
2.0.16
2 months ago
2.0.15
2 months ago
2.0.14
2 months ago
2.0.13
2 months ago
2.0.12
2 months ago
2.0.11
2 months ago
2.0.10
2 months ago
2.0.9
3 months ago
2.0.7
4 months ago
2.0.8
4 months ago
2.0.3
4 months ago
2.0.2
4 months ago
2.0.5
4 months ago
2.0.4
4 months ago
2.0.6
4 months ago
2.0.1
9 months ago
2.0.0
9 months ago
1.0.3
11 months ago
1.0.2
11 months ago
1.0.1
11 months ago
1.0.0
11 months ago