editor
editor is a react-typescript Inline Edit helper built with material ui.
Features:
- Import default Editor component and use it as react component with provided properties.
- Can be use to edit saved data as inline form component
Installation
$ npm i @tidbitlab/editor
Usage
import Editor from "@tidbitlab/editor"
function ReactFormComponent(props){
return(
<>
Name:
<Editor
id="name"
viewType="text"
editType="textBox"
value={'foo'}
validation={[
{
status: "required",
msg: "Name is required",
},
]}
onSubmit={simpleEdit}
/>
</>
)
}
Peer Dependencies
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2"
},
Properties
Property | Type | Required | Value | Description / Extra |
---|---|---|---|---|
editType | string | if editC is undefined | ["textBox", "select", "number", "radio", "checkbox","image"] | |
viewType | string | if viewC is undefined | ["text", "chip", "image", "array"] | |
options | array | if editType == 'select' | Array<{value:'any',label:'any'}> | |
editC | ReactComponent | optional | any React Component with form fields | |
viewC | ReactComponent | optional | any React Component | |
validation | array | optional | Array<{status:'required',msg:'this is required field'}> | |
onSubmit | function | required | function onSubmit(value, setStatus, setSubmitting, setErrors, resetForm){} | callback function will be called when submit event trigger |
value | initial value based on type | required | based on editType | |
id | string | required | Unique id, it will be use to access value in onSubmit function | |
onChangeImg | function | required if editType == 'image' | function uploadImage(event, setFieldValue, submitForm){} | callback function will be called when input file changes |
Todos
- Make it compatible with all front end frameworks
- Validaion improvements
- types decalrations
License
ISC
Free Software, Enjoy!