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.:

varKeyValue=require('react-key-value').KeyValue;// or ES6import{KeyValue}from'react-key-value';

Props

This module has the following props:

rows

<KeyValuerows={[{keyItem: '',valueItem: ''}]}/>

By default rows is empty. rows has objects containing keyItem and valueItem strings.

hideLabels

<KeyValuehideLabels={true}/>

It can be used for hiding the labels' texts (e.g. "Keys:" and "Values:"). Set to false by default.

keyInputPlaceholder

<KeyValuekeyInputPlaceholder={'Key name'}/>

You can set a placeholder text for the key input field.

valueInputPlaceholder

<KeyValuevalueInputPlaceholder={'Key name'}/>

You can set a placeholder text for the value input field.

onChange

<KeyValueonChange={handleOnChange}/>

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:

<KeyValuecustomAddButtonRenderer={(handleAddNew)=>(<div><ahref="#"onClick={handleAddNew}><span>+</span> Add new meta data
</a></div>)}onChange={(rows)=>console.log(rows)}/>

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