@fdefelici/re-boot-select NPM

re-boot-select ·

Select Component for React based on Bootstrap which offer the following features:

Single Selection
Multiple Selection
Selection Handling
Search through items
Scrollbar Control
Localization

Component ShowCase

Usage

This component is based on React and Bootstrap (only css part), so in your project you must have these dependencies. It's suggested to adopt the following versions:

react >= 15.0.0
bootstrap >= 3.3.0

then import the library:

$ npm install @fdefelici/re-boot-select[@VERSION] --save

and use it in your code:

import RBS from "@fdefelici/re-boot-select"

...

<RBS.Select
    data={["Apple", "Banana", "Citrus", "Grapefruit"]}
/>

For a full working example take a look here.

Configuration

This component allow customization tweeking the following attributes:

Attribute	Type	Description	Default
`data`	string array	List of items	[]
`id`	string	html element ID	none
`isMultiSelect`	boolean	Allow multiple selection	false
`labels`	object	Localization support (see details in localization paragraph)	-
`maxCaptionItems`	integer	Max number of visible items (comma separated) in caption before showing label message `cap.select.singular` or `cap.select.plural`	0
`maxDropdownItems`	integer	Max number of visible items in dropdown menu	6
`onChange`	function	Callback function called when a selection/deselection happen (see details in the example)	none
`showButtons`	boolean	Show Select/Deselect All buttons	false
`showSearch`	boolean	Show Search field	false

Localization Support

Using labels attribute it is possible to customize any text the component shows.

Attribute	Type	Description	Default
`cap.select.empty`	string	Shown when there are no item selected	"Select an item"
`cap.select.singular`	string	Shown when just one item is selected, only when `maxCaptionItems` is set to 0	"1 item selected" or same as `cap.select.plural` if only plural attribute is defined.
`cap.select.plural`	string	Shown when multiple items are selected, only when the number of selected items is greather than `maxCaptionItems`	"{size} item selected"
`btn.select.all`	string	Label for Select All Button	"All"
`btn.unselect.all`	string	Label for Unselect All Button	"Clear"

Special Markers

To build labels it's possible to use the follow markers:

{size}: represent the total number of items
{sel}: represent the number of items currently selected

Example

Example of fully labels customization:

<RBS.Select
    ...
    labels={{
        "cap.select.empty": "Select an item",
        "cap.select.singular": "One item selected",
        "cap.select.plural": "{sel} of {size} items selected",
        "btn.select.all": "Pick All",
        "btn.unselect.all": "Release All",
    }}
/>

Browsers Compatibility

This component has been tested against the following browsers:

Chrome 76+
Firefox 68+
Internet Explorer Edge

How to Contribute

If you want to contribute to the project, please follow the guidelines.

react bootstrap select combo combobox multi-select dropdown

@everything-registry/sub-chunk-316

6 years ago

6 years ago

6 years ago

6 years ago