react-key-value-bootstrap
Version:
Key value visualizer/editor written in React
98 lines (69 loc) • 2.46 kB
Markdown
## React-key-value
[](https://circleci.com/gh/purposeindustries/react-key-value)
[](https://coveralls.io/github/purposeindustries/react-key-value?branch=chore/master)
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').KeyValue;
// or ES6
import { KeyValue } from 'react-key-value';
```
### Props
This module has the following props:
#### rows
```jsx
<KeyValue rows={[{
keyItem: '',
valueItem: ''
}]} />
```
By default `rows` is empty. `rows` has objects containing `keyItem` and `valueItem` strings.
#### hideLabels
```jsx
<KeyValue hideLabels={ true } />
```
It can be used for hiding the labels' texts (e.g. "Keys:" and "Values:"). Set to `false` by default.
#### keyInputPlaceholder
```jsx
<KeyValue keyInputPlaceholder={ 'Key name' } />
```
You can set a placeholder text for the key input field.
#### valueInputPlaceholder
```jsx
<KeyValue valueInputPlaceholder={ 'Key name' } />
```
You can set a placeholder text for the value input field.
#### onChange
```jsx
<KeyValue onChange={ 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:
```jsx
<KeyValue
customAddButtonRenderer={ (handleAddNew) => (
<div>
<a
href="#"
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](LICENSE) © Purpose Industries