@ozylog/ui-dropdown

React UI Dropdown with react-jss

Installation

npm install @ozylog/ui-dropdown --save

Usage

<Dropdown onChange={onChangeFunc} combo required getOptions={getOptionsFunc} placeholder='Please select item' />

| Properties | Type | Description | Example | |------------|--------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------| | combo | Boolean | Enable comboBox mode. User can filter dropdown items based on input. | | | required | Boolean | Activate remove icon/button if dropdown has value. Allow dropdown to has null value. | true | | placeholer | String | Input placeholder. | | | options | Array<{text: String, value: any}> | Static dropdown options. Options will be ignored if there is getOptions function. | [{text: 'Australia', value: {countryCode: 'AU', ...}}] | | getOptions | Function | Dynamic dropdown option. The function will be called when dropdown is on focus / after typing. The function should return Array<{text: String, value: any}> or Promise of Array<{text: String, value: any}>. | | | onChange | Function | The function will called when dropdown value has changed. It will return value of {text: String, value: any}. | | | onBlur | Function | The function will called when dropdown is onBlur. | |

Usage Example

'use strict';

import React, {Component} from 'react';
import Dropdown from '@ozylog/ui-dropdown';

export default class TestComponent extends Component {
  constructor(props) {
    super(props);
  }

  onChange = () => {
    // do something
  };

  render() {
    const options = [
      {text: 'Australia', value: {name: 'Australia', countryCode: 'AU'}},
      {text: 'New Zealand', value: {name: 'New Zealand', countryCode: 'NZ'}}
    ];

    return (
      <div className='Test'>
        Test
        <Dropdown onChange={this.onChange} combo required placeholder='Please select country' options={options} />
      </div>
    );
  }
}

License

MIT