3.8.25 • Public • Published


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.


npm install @crave/farmblocks-search-field


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 (
        placeholder="Select fruit"
        onSearchChange={value => console.log("onSearchChange", value)}
        onChange={value => console.log("onChange", value)}

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


  • 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.




npm i @crave/farmblocks-search-field

DownloadsWeekly Downloads






Unpacked Size

22.3 kB

Total Files


Last publish


  • viniciusmartin
  • luis.nascimento
  • seocam
  • vnakamura
  • alcferreira
  • imwra