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