React Inline Edit Kit
An assortment of common HTML form elements, editable in-line the React way.
Try out the demo and see what it looks like.
Installation
npm install riek --save-dev
or
yarn add riek --dev
Use --save-dev
because you don't want to build and pack JS/CSS in production
Usage
Import the library:
Suppose we want to be able to edit title of a Task
and send changes to server. Here is a Task
stored flat inside of our parent React component:
thisstate = id: 1 title: 'Cover with tests' completed: false
Now we need a function which will send the single altered { key: value }
and upsert local state. You can implement it inside of your flux/redux/mobx store:
const httpTaskCallback = { request }
Meanwhile, there is a simple Express handler on our API server:
app
Finally, in our render
method, we add a minimal RIEInput
:
<RIEInput value=thisstatetext change=thishttpTaskCallback propName='title' validate=_isString />
...repeat the last step, adding a Riek component for any object property we wish to edit.
Components come unstyled, so take a look at demo.jsx for examples.
Common props
Required
- value: initial prop value
- propName: name of the prop to return to the change function
- change: function which will receive a plain object with a single key, provided in propName
Optional
- validate: validator function, returning a boolean
- shouldBlockWhileLoading: disables editing until a new value is confirmed by parent
- shouldRemainWhileInvalid: remain in editing mode if validation fails
- classLoading: CSS class name to use when loading
- classEditing: CSS class name to apply while in editing mode
- classInvalid: CSS class name to apply when doValidatoon returned false
- className: CSS base class
- editProps: Additional props for the editing component. This allows you to, for example, specify a maxLength attribute to control the maximum number of characters in the textarea, or add
style
. - defaultProps: Additional props for idle component.
Optional hooks
- beforeStart: Fires before editing starts
- afterStart: Fires after editing starts
- beforeFinish: Fires before editing ends, before validations
- afterFinish: Fires after editing ends, after validations
Component-specific props
RIENumber
- format: custom formatting function, returns formatted string
RIETextArea
- rows: rows property on textarea tag while editing
- cols: rows property on textarea tag while editing
RIESelect
- options: an array of objects containing values and text for select options
<RIESelect ... options= id: '1' text: 'one' id: '2' text: 'two' id: '3' text: 'three' />
Contributing
The build process does not work with Node v6 at the moment: use Node Version Manager, or just plain Node v5.6.0.
- Clone this repo locally, run
npm i
- Make your changes
- Do
npm run build
to compile the lib and demo - Open
index.html
and check if it works - Open JS console in browser, set
localStorage.debug = '*'
to see debug messages, add more if necessary - ???
- Submit a pull request