React-key-value
React key value is a key value visualiser/editor written in React
Install
npm install react-key-value
Usage
Include the main js module, e.g.:
var KeyValue = ;// or ES6;
Props
This module has the following props:
rows
<KeyValue =[] />
By default rows
is empty. rows
has objects containing keyItem
and valueItem
strings.
hideLabels
<KeyValue = />
It can be used for hiding the labels' texts (e.g. "Keys:" and "Values:"). Set to false
by default.
keyInputPlaceholder
<KeyValue = />
You can set a placeholder text for the key input field.
valueInputPlaceholder
<KeyValue = />
You can set a placeholder text for the value input field.
onChange
<KeyValue = />
onChange
is called every time when the rows
changes. onChange
gets the rows
array as the first function parameter.
customAddButtonRenderer
You can create your own add button by the createAddButtonRenderer
function. If set, it takes the handleAddNew
function as the first parameter, which is responsible for the functionality of adding new fields in the KeyValue
component. You should pass it to the element's onClick
property.
Example:
<KeyValue = =/>
Development
To develop run npm start
.
You can test your changes by opening localhost:4567
in a browser.
When you are happy with your changes you can build to dist with npm run build
.
License
MIT © Purpose Industries