Key value visualizer/editor written in React
npm install react-key-value##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.:
`js`
var KeyValue = require('react-key-value');
// or ES6
import KeyValue from 'react-key-value';
###Props
This module has the following props:
####rows
`jsx`
valueItem: ''
}] />
By default is empty. rows has objects containing keyItem and valueItem strings.
####hideLabels
`jsx`
It can be used for hiding the labels' texts (e.g. "Keys:" and "Values:"). Set to by default.
####keyInputPlaceholder
`jsx`
You can set a placeholder text for the key input field.
####valueInputPlaceholder
`jsx`
You can set a placeholder text for the value input field.
####onChange
`jsx` 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:
`jsx`
onClick={ handleAddNew }
>
+ Add new meta data
) }
onChange={ (rows) => console.log(rows) }
/>
###Development
To develop run npm start.localhost:4567
You can test your changes by opening in a browser.npm run build`.
When you are happy with your changes you can build to dist with