@pupilfirst/multiselect-dropdown NPM

`@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

Real world Usage in Pupilfirst

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