simple-react-select

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 react@16.8.6 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