Farmblocks Search Field

Search input with results dropdown list.
The main difference between this and the Select component is that while Select searches among the available items, this component gives you the ability to fetch for new items on an external API.

Installation

npm install @crave/farmblocks-search-field

Usage

import React, { Component } from "react";
import { render } from "react-dom";
import Select from "@crave/farmblocks-search-field";

const items = [
  { value: "1", label: "Apple" },
  { value: "2", label: "Banana" },
  { value: "3", label: "Pear" },
];

class App extends Component {
  render() {
    return (
      <Select
        placeholder="Select fruit"
        label="Fruit"
        items={items}
        onSearchChange={value => console.log("onSearchChange", value)}
        onChange={value => console.log("onChange", value)}
      />
    );
  }
}

render(<App />, document.getElementById("root"));

API

• items (Array)

  Items to be rendered as options The elements of the array should follow this shape: { value: String, label: String, image: String(optional) }

• value (String)

  Selected option. It's expected that items have an element with the same value

• footer (React node)

  Component to render at the menu bottom

• width (Number or String) = 200

  Width of the component

• maxMenuHeight (Number or String) = 353

  Maximum height of the menu. After that, the menu will have a scroll bar

• debounceDelay (Number) = 500

  Time in milliseconds to wait for new key presses before dispatching onSearchChange

• onSearchChange ((value:String) => void) = noop

  Function to handle changes in the search term. It usually uses the value to search in an external API and updates the items prop with the received results

• onScrollReachEnd (() => void) = noop

  Function to handle the end of the scroll. Useful for pagination

• onBeforeChange ((args:Object) => void) = noop

  Function that runs before onChange. It has the ability to decide wether onChange will be triggered or not. When this prop is not defined, onChange will trigger immediately

  The arguments are sent as an Object, so you can destructure it to get only the needed ones. It wil contain:

  • value (String)

    The value for the selected item

  • selectedItem (Object)

    The whole selected item

  • inputDOMElement (Element)

    The input element. You can use it to give back the focus after the uses click on an item

  • proceed ((item: Object) => void)

    Function to trigger the onChange handler. Optionally, you can modify the item that onChange will pass

• onChange ((value:String, item:Object) => void) = noop

  Function to handle selection of an item

• valueKey (String) = "value"

  Custom name to be used as the items value key

• labelKey (String) = "label"

  Custom name to be used as the items label key

• imageKey (String) = "image"

  Custom name to be used as the items image key

Note: to listen to clicks on items or footer, use onMouseDown event over onClick.

License

MIT