simple-react-select

Home Page

Test will finish soooooooooooooooooooooooooooooooooooooooooooooooooon! ( •̀ᄇ• ́)ﻭ✧

Install

$ yarn add simple-react-select

// or

$ npm install simple-react-select --save

How to use

Usage

Then you need to import its component and css:

import Select from 'simple-react-select'
import 'simple-react-select/lib/simple-react-select.css'

Make sure you have [email protected] installed.

"peerDependencies": {
  "react": "^16.8.6",
  "react-dom": "^16.8.6"
}

Example

Now, let's place component in your Web APP!

import React, {memo, useState} from 'react';
import Select from 'simple-react-select';
import 'simple-react-select/lib/simple-react-select.css'

const App = memo(() => {
  const optionList = [
    { value: 'Ocean', color: '#00B8D9' },
    { value: 'Blue', color: '#0052CC', isDisabled: true },
    { value: 'Purple', color: '#5243AA' },
    { value: 'Red', color: '#FF5630' },
    { value: 'Orange', color: '#FF8B00' },
    { value: 'Yellow', color: '#FFC400' },
    { value: 'Green', color: '#36B37E' },
    { value: 'Forest', color: '#00875A' },
    { value: 'Slate', color: '#253858' },
    { value: 'Silver', color: '#666666' },
  ];
  const stateSelect = useState('');
  const attribute = {
    select: stateSelect[0],
    onSelectChange: val => stateSelect[1](val),
  };
  return (
    <div>
      <Select {...attribute}>
        {optionList.map(item => {
            return (
              <div key={item.value} value={item.value} disabled={item.isDisabled}>
                {item.value}
              </div>
            );
          })}
      </Select>
    </div>
  );
});

If you wanna explore more usages, here's a playground on CodeSandBox.io.

Attribute

| Props | Description | Type | Opt | Default | | ---- |:----:|:----:|:----:|:----:| | placeholder | change the text displayed when no option is selected | string | — | — | | select | control the current value | string | — | — | | noOptionsText | Text to display when there are no options | string | — | — | | loadingText | Text to display when loading | string | — |—| | isLoadingIcon | need loading icon or not when loading | boolean | — |true| | selectCustomStyle | select custom style | object | { width: '300px', selectColor: stateBgColor[0], selectBorderRadius: '0', selectBorderColor: 'black', activeBorderColor: 'red' } | {} | | optionsCustomStyle | options custom style | object | { maxHeight: '200px', optionsBorderColor: 'black', optionsBorderRadius: '0', optionHoverBgColor: '#eee', optionActiveBgColor: 'pink', optionActiveColor: 'blue'} | {} | | optionsIsLoading | loading control | boolean | — | false | | onSelectChange | subscribe to change events | function | — | (res) => {} | | isSearchable | allow the user to search for matching options | boolean | — | false | | isClearable | clear select or input value | boolean | — | false |

LICENSE

MIT