react-pairs

React pairs component.

installation

npm install -S @jswork/react-pairs

properties

| Name | Type | Required | Default | Description | | --------- | ------ | -------- | ------- | ------------------------------------------------------ | | className | string | false | - | The extended className for component. | | items | array | false | [] | Default data source([{key:'key', value:'value'},...]). | | template | func | false | noop | The pairs template callback. |

usage

1. import css

@import "~@jswork/react-pairs/dist/style.css";

// or use sass
@import "~@jswork/react-pairs/dist/style.scss";

// customize your styles:
$react-pairs-options: ()

2. import js

import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactPairs from '@jswork/react-pairs';
import '@jswork/next-pick-pairs';

import './assets/style.scss';

class App extends React.Component {
  render() {
    const obj = {
      nickname: null,
      uid: 'UR1785049326',
      job: null,
      last_name: null,
      username: '15502115100',
      last_active: '2017-09-22T13:08:04.753046Z',
      is_staff: false,
      login_count: 5,
      gender: null,
      is_active: true,
      groups: [],
      company: null,
      is_superuser: false,
      first_name: null,
      last_login: '2017-09-22T13:08:04.753038Z',
      permissions: [],
      date_joined: '2017-09-19T14:13:10.129030Z',
      email: '[email protected]',
      phone: '15502115100'
    };

    const items = nx.pickPairs(obj, ['uid', 'is_staff', 'is_active']);
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-pairs">
        <ReactPairs
          items={items}
          template={({ item, index }) => {
            console.log(item);
            return (
              <div className="is-item" key={item.key}>
                <strong>{item.key} </strong> -{' '}
                <em className="tag is-success">{item.value + ''}</em>
              </div>
            );
          }}
        />
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

• https://afeiship.github.io/react-pairs/

license

Code released under the MIT license.