React Dual Listbox solution

A feature-rich dual listbox for React. A good component of React Dual Listbox.

React Dual Listbox

React Dual Listbox is a lightweight React component for rendering dual listbox views. Checkout the examples below and then view source code or main documentation page when you are ready to try it out.

ReactJS Dual Listbox component example
ReactJS Dual Listbox component example

Setup

yarn add react-dual-listbox

# or

npm install react-dual-listbox --save

Include CSS files or utilize a CSS loader:

import ‘react-dual-listbox/lib/react-dual-listbox.css’;

Render Component

The DualListBox is a controlled component, so you have to update the selected property in conjunction with the onChange handler if you want the selected values to change. Here is a minimal rendering of the component:

import React from 'react';
import DualListBox from 'react-dual-listbox';

const options = [
    { value: 'one', label: 'Option One' },
    { value: 'two', label: 'Option Two' },
];

class Widget extends React.Component {
    state = {
        selected: ['one'],
    };

    onChange = (selected) => {
        this.setState({ selected });
    };

    render() {
        const { selected } = this.state;

        return (
            <DualListBox
                options={options}
                selected={selected}
                onChange={this.onChange}
            />
        );
    }
}

Filtering

You can enable filtering of available and selected options by merely passing in the canFilter property:

render() {
    ...
    return <DualListBox canFilter options={options} />;
}

Optionally, you can also override the default filter placeholder text and the filtering function:


render() {
    ...

    return (
        <DualListBox
            canFilter
            filterCallback={(option, filterInput) => {
                if (filterInput === '') {
                    return true;
                }

                return (new RegExp(filterInput, 'i')).test(option.label);
            }}
            filterPlaceholder="Filter..."
            options={options}
        />
    );
}

In addition, you can control the filter search text, rather than leaving it up to the component:

render() {
    ...

    return (
        <DualListBox
            canFilter
            filter={{
                available: 'europa',
                selected: '',
            }}
            options={options}
            onFilterChange={(filter) => {
                console.log(filter;
            }}
        />
    );
}

License: MIT

Homepage

https://jakezatecky.github.io/react-dual-listbox/

GitHub

https://github.com/jakezatecky/react-dual-listbox

scraperapi

See also

How to create Dual Listbox for Vue JS? Meet the dual-listbox-vue component

Step by step progress wizard with Bootstrap 4

Bootstrap dual listbox solution

Enjoy!