Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@tidbitlab/editor

shantanudeol14ISC1.0.1

react inline edit helper

readme

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!