simple-react-select v0.4.0

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

LICENSE

MIT