@formsjs/react-antd

A Dynamic Form Generating library based in antd for all who hate creating forms

Install

npm install --save @formsjs/react-antd

Usage

importReact,{useState}from'react'importDynamicFormfrom'@formsjs/react-antd'constApp=()=>{const[firstName,setFirstName]=useState("")const[lastName,setLastName]=useState("")const[age,setAge]=useState(0)const[message,setMessage]=useState("")constscript=[[{type: 'text',name: 'First Name',value: firstName,onChange: (event)=>{setFirstName(event.target.value)}},{type: 'text',name: 'Last Name',value: lastName,onChange: (event)=>{setLastName(event.target.value)}}],[{type: 'number',name: 'Age',value: age,onChange: (value)=>{setAge(value)}},{type: 'textarea',name: 'Message',value: message,onChange: (event)=>{setMessage(event.target.value)}}]]return(<divclassName="w-100 p-5"><DynamicFormscript={script}/></div>)}exportdefaultApp

Types

• Text
• Password
• Date
• Number
• Textarea
• Upload
• Checkbox
• Radio
• Select
• Boolean
• Dropbox
• Custom

Text

{type: 'text',name: 'First Name',value: firstName,onChange: (event)=>{setFirstName(event.target.value)}}

Optional Props (Text)

{placeholder: "First Name",// For placeholdersfieldStyle: {fontSize: 12},// For custom Style InjectionsfieldClassName: "font-weight-bold",// For custom css class injectioncustomLable: <label>Required</label>,// For small labels on topfieldId: "my-id",// For custom css id'sdisabled: false// For disabling the fieldcolClassName: "text-right",// For Column Level stylesbottomElement: <label>Bottom Element</label>,/* Any JSX element that you may like at the bottom */lg: 24,/* lg: 1 to 24 or { span: 11, offset: 1 } Just like antd grid System */}

Password

{type: 'password',name: 'Password',value: password,onChange: (event)=>{setPassword(event.target.value)}}

Optional Props (Password)

{placeholder: "First Name",// For placeholdersfieldStyle: {fontSize: 12},// For custom Style InjectionsfieldClassName: "font-weight-bold",// For custom css class injectioncustomLable: <label>Required</label>,// For small labels on topdisabled: false// For disabling the fieldcolClassName: "text-right",// For Column Level stylesbottomElement: <label>Bottom Element</label>,/* Any JSX element that you may like at the bottom */lg: 24,/* lg: 1 to 24 or { span: 11, offset: 1 } Just like antd grid System */}

Date

{type: 'date',value: dob,//value = typeof(Date)name: 'Date of Brith',onChange: (event)=>{setDob(event)}}

Optional Props (Date)

{placeholder: "MM-DD-YYYY",// For placeholdersfieldStyle: {fontSize: 12},// For custom Style InjectionsfieldClassName: "font-weight-bold",// For custom css class injectiondisabled: false// For disabling the fieldcolClassName: "text-right",// For Column Level stylesformate: ["MM-DD-YYYY","MM-DD-YY"],// For Date Formate DEFAULT: ["DD/MM/YYYY", "DD/MM/YY"]lg: 24,/* lg: 1 to 24 or { span: 11, offset: 1 } Just like antd grid System */}

Number

{type: 'number',value: count,name: 'Number',onChange: (value)=>{setCount(value)}}

Optional Props (Number)

{placeholder: "Count",// For placeholdersfieldStyle: {fontSize: 12},// For custom Style InjectionsfieldClassName: "font-weight-bold",// For custom css class injectiondisabled: false// For disabling the fieldcolClassName: "text-right",// For Column Level stylesmin: 0,// For Min valuemax: 10,// For max valuelg: 24,/* lg: 1 to 24 or { span: 11, offset: 1 } Just like antd grid System */}

Textarea

{type: 'textarea',name: 'Message',value: message,onChange: (event)=>{setMessage(event.target.value)}}

Optional Props (Textarea)

{placeholder: "Message",// For placeholdersfieldStyle: {fontSize: 12},// For custom Style InjectionsfieldClassName: "font-weight-bold",// For custom css class injectioncustomLable: <label>Required</label>,// For small labels on topfieldId: "my-id",// For custom css id'sdisabled: false// For disabling the fieldcolClassName: "text-right",// For Column Level stylesautoSize: true,// For AutosizingbottomElement: <label>Bottom Element</label>,/* Any JSX element that you may like at the bottom */lg: 24,/* lg: 1 to 24 or { span: 11, offset: 1 } Just like antd grid System */}

Upload

{{type: 'upload',name: 'File',onRemove: (event)=>{setFile(undefined)},beforeUpload: async(event)=>{setFile(awaittoBase64(event))}}}

Optional Props (Upload)

{placeholder: "File",// For placeholdersfieldStyle: {fontSize: 12},// For custom Style InjectionsfieldClassName: "font-weight-bold",// For custom css class injectionfieldId: "my-id",// For custom css id'sdisabled: false// For disabling the fieldcolClassName: "text-right",// For Column Level stylesmultiple: false,accept: '.doc,.docx',method: 'post',action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',onRemove: (event)=>{setFile(undefined)},beforeUpload: async(event)=>{setFile(awaittoBase64(event))},onChange: (event)=>{console.log(event)}lg: 24,/* lg: 1 to 24 or { span: 11, offset: 1 } Just like antd grid System */}

toBase64

consttoBase64=(file)=>newPromise((resolve,reject)=>{constreader=newFileReader();reader.readAsDataURL(file);reader.onload=()=>resolve(reader.result);reader.onerror=error=>reject(error);});

Checkbox

{type: 'checkbox',name: 'Subjects',checkboxList: [{name: 'OOP',//Optionaldisabled: false,//Optionalchecked: subjects.oop,onChange: (event)=>{setSubjects({ ...subjects,oop: event.target.checked})}},{name: 'DSA',disabled: false,checked: subjects.dsa,onChange: (event)=>{setSubjects({ ...subjects,dsa: event.target.checked})}}]}

License

MIT © mustafasheikh1