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.

1import React, { useState } from 'react';
2import PropTypes from 'prop-types';
3import 'bootstrap/dist/css/bootstrap.min.css';
4
5import Label from 'select-react-bootstrap';
6import Select from 'select-react-bootstrap';
7
8const arrayOfString = [
9    'fox',
10    'bird',
11    'dog',
12    'cat',
13    'tiger',
14    'bear',
15    'elephant',
16    'duke',
17    'lion',
18    'kangaroo',
19    'snake',
20];
21
22export default function App() {
23    const [animal, setAnimal] = useState('');
24
25    const handleChange = e => {
26        setAnimal(e.target.value);
27    };
28
29    return (
30        <div className="container">
31            <Label
32                label="Animal"
33                htmlFor="animal"
34                className="text-dark mt-3"
35                style={{ fontWeight: 'bold' }}
36            />
37            <Select
38                name="animal"
39                id="animal"
40                selectText="Select ..."
41                isDisabled={true}
42                data={arrayOfString}
43                value={animal}
44                onChange={handleChange}
45            />
46        </div>
47    );
48}

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.

1import React, { useState } from 'react';
2import PropTypes from 'prop-types';
3import 'bootstrap/dist/css/bootstrap.min.css';
4
5import Label from 'select-react-bootstrap';
6import Select from 'select-react-bootstrap';
7
8const arrayOfObject = [
9    { colorName: 'pink', colorRef: '#E260D2' },
10    { colorName: 'red', colorRef: '#FF0000' },
11    { colorName: 'blue', colorRef: '#3876AC' },
12    { colorName: 'yellow', colorRef: '#FBE468' },
13    { colorName: 'gray', colorRef: '#C4C4C4' },
14    { colorName: 'orange', colorRef: '#EC5B24' },
15    { colorName: 'green', colorRef: '#279E7A' },
16    { colorName: 'purple', colorRef: '#7360D2' },
17];
18
19export default function App() {
20    const [color, setColor] = useState('');
21
22    const handleChange = e => {
23        setColor(e.target.value);
24    };
25
26    const newArrayOfObject = arrayOfObject.map(color => {
27        return {
28            optionLabel: color.colorName,
29            optionValue: color.colorRef,
30        };
31    });
32
33    console.log(newArrayOfObject);
34    //     [{ optionLabel: 'pink', optionValue: '#E260D2' },
35    //     { optionLabel: 'red', optionValue: '#FF0000' },
36    //     { optionLabel: 'blue', optionValue: '#3876AC' },
37    //     { optionLabel: 'yellow', optionValue: '#FBE468' },
38    //     { optionLabel: 'gray', optionValue: '#C4C4C4' },
39    //     { optionLabel: 'orange', optionValue: '#EC5B24' },
40    //     { optionLabel: 'green', optionValue: '#279E7A' },
41    //     { optionLabel: 'purple', optionValue: '#7360D2' }];
42
43    return (
44        <div className="container">
45            <Label
46                label="Color"
47                htmlFor="color"
48                className="text-dark mt-3"
49                style={{ fontWeight: 'bold' }}
50            />
51            <Select
52                name="color"
53                id="color"
54                selectText="Select ..."
55                className="select-color mb-2"
56                sizing="large"
57                style={{ color: color }}
58                isDisabled={false}
59                data={newArrayOfObject}
60                value={color}
61                onChange={handleChange}
62            />
63        </div>
64    );
65}

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.

Dependencies

React

This project was bootstrapped with Create React App.

Installation Create React App

npx create-react-app nameOfYourProject

Import React

import React, { useState } from 'react';

Bootstrap 5

Make sure Bootstrap 5 is installed in you project or required to install it and css needs to imported in project:

Installation bootstrap

npm install bootstrap@5.1.3

Import bootstrap css

import 'bootstrap/dist/css/bootstrap.min.css';

PropTypes

I also use Proptypes:

Installation Proptypes

npm install prop-types@15.8.1

Import Proptypes

import PropTypes from 'prop-types';

License

MIT Licensed. Copyright (c) Emilie-v11 2021.