A beautiful, customizable, searchable select input React component built on top of TailwindCSS.

How to use it:

1. Installation.

c# Yarn
$ yarn add react-tailwindcss-select

# NPM
$ npm i react-tailwindcss-select

2. Import the select component.

c// React component
import React from 'react';
import Select from 'react-tailwindcss-select';

c// With React Hooks
import {useState} from 'react';
import Select from 'react-tailwindcss-select';

3. Define your options in a JS array.

const options = [
  {value: "vue", label: "Vue Script"},
  {value: "React", label: "React Script"},
  {value: "Angular", label: "Angular Script"},
];

4. Basic usage.

// React Component
class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {animal: null};
      this.handleChange = this.handleChange.bind(this);
  }
  handleChange(value) {
      console.log("value:", value);
      this.setState({animal: value});
  }
  render() {
      const { animal } = this.state;
      return (
          <Select
              value={animal}
              onChange={this.handleChange}
              options={options}
          />
      );
  }
}

// React Hooks
const App = () => {
  const [animal, setAnimal] = useState(null);
  const handleChange = (value) => {
      console.log("value:", value);
      setAnimal(value);
  };
  return (
      <Select
          value={animal}
          onChange={handleChange}
          options={options}
      />
  );
};
export default App;

5. Available props.

isClearable: PropTypes.bool,
isDisabled: PropTypes.bool,
isMultiple: PropTypes.bool,
isSearchable: PropTypes.bool,
loading: PropTypes.bool,
menuIsOpen: PropTypes.bool,
noOptionsMessage: PropTypes.string,
onChange: PropTypes.func.isRequired,
options: OptionsType,
placeholder: PropTypes.string,
searchInputPlaceholder: PropTypes.string,
value: PropTypes.oneOfType([
  PropTypes.shape({
      value: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
  }),
  OptionsType,
]),

Preview:

Download Details:

Author: onesine

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/onesine/react-tailwindcss-select

License: MIT