@crave/farmblocks-search-field

Search input with results dropdown list

Stats

StarsIssuesVersionUpdatedCreatedSize
@crave/farmblocks-search-field
20233.8.22a month ago3 years agoMinified + gzip package size for @crave/farmblocks-search-field in KB

Readme

logo-farmblocks

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.