Have ideas to improve npm?Join in the discussion! »

    react-key-value

    2.0.0 • Public • Published

    React-key-value

    CircleCI

    Coverage Status

    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 = require('react-key-value');
    // or ES6
    import KeyValue from 'react-key-value';

    Props

    This module has the following props:

    rows

    <KeyValue rows=[{
      keyItem: '',
      valueItem: ''
      }/>

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

    hideLabels

    <KeyValue hideLabels={ true } />

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

    keyInputPlaceholder

    <KeyValue keyInputPlaceholder={ 'Key name' } />

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

    valueInputPlaceholder

    <KeyValue valueInputPlaceholder={ 'Key name' } />

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

    onChange

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

    <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 © Purpose Industries

    Install

    npm i react-key-value

    DownloadsWeekly Downloads

    2,252

    Version

    2.0.0

    License

    ISC

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar