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!