Select-react-bootstrap NPM

select-react-bootstrap

A custom Select designed to behave like regular select form control, and developed to use with React 16+ and Bootstrap 5.

Installation & Usage

npm i select-react-bootstrap --save

With React Hooks

Example with a simple Array of String

In this type of Array, each string are both the same label and value. No need to transform the array or data.

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';

import Label from 'select-react-bootstrap';
import Select from 'select-react-bootstrap';

const arrayOfString = [
    'fox',
    'bird',
    'dog',
    'cat',
    'tiger',
    'bear',
    'elephant',
    'duke',
    'lion',
    'kangaroo',
    'snake',
];

export default function App() {
    const [animal, setAnimal] = useState('');

    const handleChange = e => {
        setAnimal(e.target.value);
    };

    return (
        <div className="container">
            <Label
                label="Animal"
                htmlFor="animal"
                className="text-dark mt-3"
                style={{ fontWeight: 'bold' }}
            />
            <Select
                name="animal"
                id="animal"
                selectText="Select ..."
                isDisabled={true}
                data={arrayOfString}
                value={animal}
                onChange={handleChange}
            />
        </div>
    );
}

Example with an Array of Object

In this type of Array, there is two ways :

If you can change or manage the data's keys names of object in the array, you must rename them : optionLabel & optionValue.
If you can't change or manage them, you must create a copy of array and rename the data's keys names of object with the keys: optionLabel & optionValue.

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';

import Label from 'select-react-bootstrap';
import Select from 'select-react-bootstrap';

const arrayOfObject = [
    { colorName: 'pink', colorRef: '#E260D2' },
    { colorName: 'red', colorRef: '#FF0000' },
    { colorName: 'blue', colorRef: '#3876AC' },
    { colorName: 'yellow', colorRef: '#FBE468' },
    { colorName: 'gray', colorRef: '#C4C4C4' },
    { colorName: 'orange', colorRef: '#EC5B24' },
    { colorName: 'green', colorRef: '#279E7A' },
    { colorName: 'purple', colorRef: '#7360D2' },
];

export default function App() {
    const [color, setColor] = useState('');

    const handleChange = e => {
        setColor(e.target.value);
    };

    const newArrayOfObject = arrayOfObject.map(color => {
        return {
            optionLabel: color.colorName,
            optionValue: color.colorRef,
        };
    });

    console.log(newArrayOfObject);
    //     [{ optionLabel: 'pink', optionValue: '#E260D2' },
    //     { optionLabel: 'red', optionValue: '#FF0000' },
    //     { optionLabel: 'blue', optionValue: '#3876AC' },
    //     { optionLabel: 'yellow', optionValue: '#FBE468' },
    //     { optionLabel: 'gray', optionValue: '#C4C4C4' },
    //     { optionLabel: 'orange', optionValue: '#EC5B24' },
    //     { optionLabel: 'green', optionValue: '#279E7A' },
    //     { optionLabel: 'purple', optionValue: '#7360D2' }];

    return (
        <div className="container">
            <Label
                label="Color"
                htmlFor="color"
                className="text-dark mt-3"
                style={{ fontWeight: 'bold' }}
            />
            <Select
                name="color"
                id="color"
                selectText="Select ..."
                className="select-color mb-2"
                sizing="large"
                style={{ color: color }}
                isDisabled={false}
                data={newArrayOfObject}
                value={color}
                onChange={handleChange}
            />
        </div>
    );
}

Props

For Label component:

Prop	Type	Default	Required	Description
label	string		X	Label, content displayed above the select component.
htmlFor	string		X	Attribut htmlFor, must be the same as the select id.
className	string	form-label		Add personal className or Bootstrap className.
style	object			Add style-in-line for customize the label. All CSS are allowed.

For Select component:

Prop	Type	Default	Required	Description
name	string		X	Name of the select component.
id	string		X	Attribut id, must be the same as the label htmlFor.
selectText	string			Content of the first option visible when the select is closed. The value is empty.
className	string	form-select		Add personal className or Bootstrap className.
sizing	string			3 sizes: by default medium when empty, or choose 'large' or 'small' custom selects'.
style	object			Add style-in-line for customize the select menu.
isDisabled	boolean	false		when it's 'true' the first option (selectText prop) will be disabled.
data	array	array of string	X	Map an array of string for option list. For array of object change keys names with optionLabel & optionValue.
value	string		X	The value prop is required with the useState Hook for manage the value.
onChange	function	array of string	X	A function 'onChange' for manage the change of value.