@pupilfirst/multiselect-dropdown
A multi-select dropdown component for ReasonReact projects.
Demo
multiselect-dropdown.pupilfirst.com
Installation
npm install @pupilfirst/multiselect-dropdown
Then add @pupilfirst/multiselect-dropdown
to bs-dependencies in your bsconfig.json. A minimal example:
{
"name": "your project",
"sources": "src",
"bs-dependencies": ["@pupilfirst/multiselect-dropdown"]
}
Minimal Example
module Selectable = {
type t =
| City(pincode, name)
| Country(countryCode, name)
and pincode = string
and countryCode = string
and name = string;
let label = _t => None;
let value = t =>
switch (t) {
| City(_pincode, name) => name
| Country(_countryCode, name) => name
};
let searchString = t => t |> value;
let color = _t => "gray";
let makeCountry = (~name, ~countryCode) => Country(countryCode, name);
let makeCity = (~name, ~pincode) => City(pincode, name);
};
// create a Multiselect
module Multiselect = MultiselectDropdown.Make(Selectable);
type state = {
selected: array(Selectable.t),
searchString: string,
};
let unselected = [|
Selectable.makeCity(~name="Delhi", ~pincode=""),
Selectable.makeCountry(~name="India", ~countryCode="91"),
Selectable.makeCity(~name="Washington D.C", ~pincode=""),
Selectable.makeCountry(~name="USA", ~countryCode="1"),
|];
[@react.component]
let make = () => {
let (state, setState) =
React.useState(() => {searchString: "", selected: [||]});
<Multiselect
unselected
selected={state.selected}
onSelect={selectable =>
setState(s =>
{
searchString: "",
selected: s.selected |> Array.append([|selectable|]),
}
)
}
onDeselect={_ => ()}
value={state.searchString}
onChange={searchString => setState(s => {...s, searchString})}
/>;
};
See this code, and a more advanced version, in action here: https://multiselect-dropdown.pupilfirst.com
Other examples
Usage
MultiselectDropdown.Make
is a functor that accepts a module with with type t
that has functions label
, value
, searchString
, and color
Function | Type | Description |
---|---|---|
label |
option(string) |
Label for a selectable item. |
value |
string |
The name, or title of a item. |
searchString |
option(string) |
The string you want to compare the user's input against. For example, if the searchString for an item is "Country USA United States of America" , it will show up if the user searches for "United stated of America" or "Country" , or USA . If left out, the searchString will default to value . |
color |
option(string) |
Defaults to gray . You can choose any color from your Tailwind config. |
MultiselectDropdown
component
MultiselectDropdown
is a Reason-React component that accepts an array of unselected and selected items, both of which have to be of the type MultiselectDropdown.Selectable.t
.
The MultiselectDropdown
component accepts the following props:
Prop | Type | Description |
---|---|---|
id |
string (optional) |
id of the input element; you can use this to label the input. |
placeholder |
string (optional) |
Placeholder for the input element. |
value |
string |
Value of input element; this is a controlled component - you hold the state. |
onChange |
string => unit |
onChange for the input element. |
unselected |
array(MultiselectDropdown.Selectable.t) |
The array of unselected options. |
selected |
array(MultiselectDropdown.Selectable.t) |
The array of selected options. |
onSelect |
MultiselectDropdown.Selectable.t => unit |
Callback for when an item is selected. |
onDeselect |
MultiselectDropdown.Selectable.t => unit |
Callback for when an item is removed. |
labelSuffix |
string (optional) |
This is the separator between the selectable's label and title . Defaults to : . |
emptyMessage |
string (optional) |
Empty message shown when the search result is empty. Defaults to No results found . |
hint |
string (optional) |
Message shown on click when value is empty. |
defaultOptions |
array(MultiselectDropdown.Selectable.t) |
The array of default options that will show on click when value is empty |
loading |
bool (optional) |
Used to render skelton loading |