Tailwind CSS に基づいた美しい選択入力コンポーネント

TailwindCSS 上に構築された美しく、カスタマイズ可能、検索可能な選択入力 React コンポーネント。

それの使い方：

1. インストール。

c# Yarn
$ yarn add react-tailwindcss-select

# NPM
$ npm i react-tailwindcss-select

2. 選択したコンポーネントをインポートします。

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. JS 配列でオプションを定義します。

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

4. 基本的な使い方。

// 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. 利用可能な小道具。

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,
]),

プレビュー:

GitHub で表示: https://github.com/onesine/react-tailwindcss-select