ab-dropdown-react v1.0.8

ab_dropdown

react dropdown component

Why ab_dropdown?

• easy customizable
• flexible
• keyboard navigation

Coming soon:

• search inside dropdown list
• ability to use immutable data (with Immutable.js library)
• sorting items via specified parameters

Usage

example 1

import Dropdown from 'ab-dropdown-react';

const SOURCE = [
  { key: 'edit', label: 'Edit' },
  { key: 'snooze', label: 'Snooze' },
  { key: 'delete', label: 'Delete' },
];

export default class Example1 extends Component {

  //==========

  onChange = item => {
    // onChange
  }

  render() {
    return (
      <Dropdown
        autoFocus
        label="More"
        onChange={(item) => this.onChange(item)}
        source={SOURCE}
        listItemRender={(item) => <div>{item.label}</div>}
      />
    );
  }
}

example 2

import Dropdown from 'ab-dropdown-react';
import EntityAvatar from './entityAvatar';
import './styles.sass';

const SOURCE = [
  { id: '5383130f646', name: 'Artem', lastName: 'Sherman', img: null },
  { id: '5d4988fff91', name: 'Xavier', lastName: 'Suire', img: null },
  /*.........*/
];

export default class Example2 extends Component {
  constructor(props, context) {
    super(props, context);
    const { user } = props;

    this.state = {
      value: user, // { id: '53835603646', name: 'Stephen', lastName: 'Leguillon', img: null },
    };
  }

  onChange = (item) => {
    // do what you need
  }

  listItemRender = (item) => (
    <span className="list_item">
      <EntityAvatar {...item} />
      <span>{item.name}</span>
      <span style={{ marginLeft: '5px' }}>{item.lastName}</span>
    </span>
  );

  render() {
    const { value } = this.state;

    return (
      <Dropdown
        label="Select"
        classNames={{
          dropdown: 'custom-db',
          trigger: 'custom-tg',
        }}
        styles={{
          dropdown: { minWidth: '200px' },
          trigger: { minWidth: '200px' },
        }}
        disabled={!SOURCE}
        onChange={(item) => this.onChange(item)}
        source={SOURCE}
        labelRenderer={(item) => `${item.name} ${item.lastName}`}
        listItemRender={this.listItemRender}
        value={SOURCE.find((i) => i.name === value.name)}
      />
    );
  }
}

API

props