react-select-x v1.2.2

React Select X

An awesome react select component.

Demo

https://dnkodi.github.io/react-select-x/

Installation

$ npm install react-select-x --save

After this you can import react-select-x and its styles in your application as follows:

import { Select, MultiSelect } from 'react-select-x';

//Include styles at your root and make sure you have necessary loaders to handle css
import 'react-select-x/dist/styles.css';

Usage

Select Component

import React from 'react';
import { Select } from 'react-select-x';

const list = [
    { value: "LBJ", label: "Lebron James" },
    { value: "SC", label: "Stepehen Curry" },
    { value: "JH", label: "James Harden" }
]

class App extends React.Component {
  state = {
    selectedValue: "",
  }

  handleClick = (value) => {
    this.setState({
            selectedValue: value
    })
    console.log(`Option selected:`, selectedValue);
  }

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

    return (
      <Select
        label="Select"
        name="single-select"
        onChange={this.handleClick}
        options={list}
        placeholder="-Select-"
        value={selectedValue}
      />
    );
  }
}

MultiSelect Component

import React from 'react';
import { MultiSelect } from 'react-select-x';

const list = [
    { value: "LBJ", label: "Lebron James" },
    { value: "SC", label: "Stepehen Curry" },
    { value: "JH", label: "James Harden" }
]

class App extends React.Component {
  state = {
    selectedValues: [],
  }

  handleItemsClick(value) {
    this.setState({
        selectedValues: value
    })
  }

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

    return (
      <MultiSelect
        label="Multi-Select"
        name="multi-select"
        onChange={this.handleItemsClick}
        options={list}
        placeholder="-Select-"
        value={selectedValues}
      />
    );
  }
}

Props

TODO

At the moment react-select-x does not handle loading of options asynchronously so this needs to be implemented and few other more features as well. Feel free to raise an issue if you run into something. PR's are most welcome. This repos is still in its early stage. :)

Development

$ git clone https://github.com/dnkodi/react-select-x.git
$ npm install

Start the dev server

$ npm start

Defaults to port 8080.

Thanks

This component was inspired by: react-select a lovely select component done by Jed Watson. And many thanks to my collegues Michael Raymond (the maestro) and Deegha Galkissa for helping to get this component from scratch.

License

MIT Licensed. Copyright (c) Duleep Kodithuwakku 2019.