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

Prop	Type	Description
disabled	bool	disable select control
errorText	string	text to display for an error
inline	bool	make the select inline
label	string	pass the label text
margin	string	add margins to component if necessary
name	string	generate an HTML input with this name
onChange	function	subscribe to change events
options	array	specify the options the user can select from
placeholder	string	change the text displayed when no option is selected
readOnly	bool	read only for the select component
searchable	bool	allow the user to search for matching options
value	string	control the current value
width	string	control width of the component

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.