Description:
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:
