1.0.1 • Published 3 years ago
@tidbitlab/editor v1.0.1
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/editorUsage
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!