React-selection-box NPM

react-selection-box

A beautiful and responsive Select Input control for ReactJS with singleselect, multiselect, rangeselect and autocomplete (async) support.

Full Document and Demo

Document And Demo

Supports typescript

Install

npm install react-selection-box

Types

With this package, you can create select input with the following types.

Single select
Multiple select
Range select
Async select (autocomplete)

See the document page for more examples.

Some features

Searchable
Cleanable
Loading
Disabled
RTL
Translates
Show Label
...

Please see the document page for more examples.

Async (autocomplete)

Easily create an autocomplete selection to get values from the server by typing and list them for the user.

Please see the document page and go to examples.

Usage

import React  from 'react'

import Selection from 'react-selection-box'
import 'react-selection-box/dist/index.css'

const MyComponent = () => {

    const handleChange = (value) => {
        console.log(value)
    }

    const options = [
        {label: 'Option 1', value: 'option_1', checked: false},
        {label: 'Option 2', value: 'option_2', checked: false},
        {label: 'Option 3', value: 'option_3', checked: false}
    ]

    return (
        <div>

            <Selection
                type="single" // single, muliple, renge
                name="counties"
                label="Select Counties"
                className=""
                options={options}
                onChange={handleChange}
                searchable={true}
                cleanable={true}
                loading={false}
                disabled={false}
                rtl={false}
                translates={{
                    placeholder: {
                        search: "Search countries"
                    }
                }}
            />

        </div>
    );
};

export default MyComponent;