@pupilfirst/multiselect-inline

A multi-select inline component with search for ReasonReact projects.

Demo

multiselect-inline.pupilfirst.com

Installation

npm install @pupilfirst/multiselect-inline

Then add @pupilfirst/multiselect-inline to bs-dependencies in your bsconfig.json. A minimal example:

{
  "name": "your project",
  "sources": "src",
  "bs-dependencies": ["@pupilfirst/multiselect-inline"]
}

Example

Here's an example interface, to select few sports.

   module Selectable = {
    type t =
      | Sport(name)
    and name = string;

    let value = t =>
      switch (t) {
      | Sport(name) => name
      };

    let searchString = value;

    let makeSport = name => Sport(name);
  };

  module MultiSelect = MultiselectInline.Make(Selectable);

  type state = {
    searchInput: string,
    selected: array(Selectable.t),
  };

  let unselected = selected => {
    let searchCollection =
      [|
        "Badminton",
        "Tennis",
        "Baseball",
        "Swimming",
        "Volleyball",
        "Football",
        "Formula 1",
        "Squash",
        "Boxing",
      |]
      |> Array.map(sportName => Selectable.makeSport(sportName));
    searchCollection
    |> Js.Array.filter(sport => !(selected |> Array.mem(sport)));
  };

  let setSportSearch = (setState, value) => {
    setState(state => {...state, searchInput: value});
  };

  let select = (setState, state, sport) => {
    let selected = state.selected |> Js.Array.concat([|sport|]);
    setState(_state => {searchInput: "", selected});
  };

  let deSelect = (setState, state, sport) => {
    let selected =
      state.selected
      |> Js.Array.filter(selected =>
           Selectable.value(sport) != Selectable.value(selected)
         );
    setState(_state => {searchInput: "", selected});
  };

  [@react.component]
  let make = () => {
    let (state, setState) =
      React.useState(() => {searchInput: "", selected: [||]});
    <div className="mt-4">
      <h2 className="text-xl font-semibold"> {"Example" |> str} </h2>
      <div className="mt-4">
        <label
          className="block text-xs font-semibold"
          htmlFor="MultiselectInline__search-input-example">
          {"Select your sports:" |> str}
        </label>
      </div>
      <MultiSelect
        placeholder="Search sport"
        emptySelectionMessage="No sport selected"
        selected={state.selected}
        unselected={unselected(state.selected)}
        onChange={setSportSearch(setState)}
        value={state.searchInput}
        onSelect={select(setState, state)}
        onDeselect={deSelect(setState, state)}
      />
    </div>;
  };

See this code in action here: https://multiselect-inline.pupilfirst.com

Other examples

• Real world Usage in Pupilfirst

Usage

MultiselectInline.Make is a functor that accepts a module with with type t that has functions value and searchString.

Function	Type	Description
value	string	The name, or title of a item.
searchString	string	The string you want to compare the user's input against. For example, if the searchString for an item is "Formula 1", it will show up if the user searches for "Form" or "1".

MultiselectInline component

MultiselectInline is a Reason-React component that accepts an array of unselected and selected items, both of which have to be of the type MultiselectInline.Selectable.t.

The MultiselectInline component accepts the following props:

Prop	Type	Description
id	string (optional)	id of the input element; you can use this set unique id to the input text field.
placeholder	string (optional)	Placeholder for the input search field.
value	string	Value of input element; this is a controlled component - you hold the state.
onChange	string => unit	onChange to set value of the input in state.
unselected	array(MultiselectInline.Selectable.t)	The array of unselected options.
selected	array(MultiselectInline.Selectable.t)	The array of selected options.
onSelect	MultiselectInline.Selectable.t => unit	Callback for when an item is selected.
onDeselect	MultiselectInline.Selectable.t => unit	Callback for when an item is removed.
emptySelectionMessage	string (optional)	Empty message shown when the there are no selected items. Defaults to No items selected.
allItemsSelectedMessage	string (optional)	This message is shown when all the items are selected from the dropdown. Defaults to 'You have selected all items!'
colorForSelected	string (optional)	This is the color used to indicate selected items. The default is orange.