react-edit - Inline editing utilities for React
react-edit
provides a set of inline editing related utilities for React. The library comes with a couple of basic editors and you can implement your own as long as you follow the same interface (value
, onValue
props).
API
The edit
transform has been designed to allow inline editing. It expects you to define how to manipulate the state. It also expects you to pass an editor.
Example:
...import cloneDeep from 'lodash/cloneDeep';import findIndex from 'lodash/findIndex';import * as edit from 'react-edit'; ... // Define how to manipulate rows through edit.const editable = edit; ... // Wrap within an element and render.React; // Or in JSX<div />
Editing Interface
An editor should follow the following interface:
({ value, onValue, extraParameters }) => <React element>
It will receive the current value
and is expected to emit the result through onValue
upon completion. You can capture row data, property name, and such through extraParameters
.
Editors
react-edit
provides a few editors by default:
edit.boolean({ props: <props> })
- If the initial value is true, allows setting to false and vice versa. Demo value defaults to false alwaysedit.dropdown({ options: [[<value>, <name>]], props: <props> })
- The dropdown expects an array of value-name object pairs and emits the selected one.edit.input({ props: <props> })
- A wrapper for a regular input.
Writing a Custom Editor
If you want to implement a custom editor, you should accept value
and onValue
prop pair. The former will contain the current value and onValue
should return a new one. It can be convenient to curry your editor so that you can pass custom props
to it easily. Consider the following example.
/*import React from 'react';import PropTypes from 'prop-types';*/ const boolean = props = const Boolean = value onValue <div > <button = = >✓ </button> <button = = >✗ </button> </div> ; BooleanpropTypes = value: PropTypesany onClick: PropTypesfunc onValue: PropTypesfunc ; return Boolean;; const Boolean = ; <Boolean = />
License
MIT. See LICENSE for details.