@crave/farmblocks-input-select

Farmblocks Select Input

A component for rendering Select inputs

Installation

npm install @crave/farmblocks-input-select

Usage

import React, { Component } from 'react';
import { render } from 'react-dom';
import Select from '@crave/farmblocks-input-select';

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}
        onChange={(value) => console.log("onChange", value)}
      />
    );
  }
}

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

This code will render:

API

Property	Description	Type	Required	Default
items	Items to be rendered as options	ArrayOf({ value: string, label: string, image: (optional)string })	x
value	Selected option	string, number or array of those (for multi)
width	Width of the component	string		200px
onChange	Function to handle selection of an item.	onChange(value:string)		() => false
renderItem	Custom render item function	renderItem(item): node
noResultsMessage	Custom no results message to be displayed when there is no result available on search	string
disableSearch	Disables item search	boolean		false
maxHeight	Set a maximum height for the menu	string
fontSize	One of the constants in fontSizes from farmblocks-theme package. For convenience, fontSizes is also exported on this package	number
id	DOM element Id attribute	string
multi	Defines if multiple items can be selected	boolean		false
onMenuVisibilityChange	Invoked when the react-autocomplete menu visibility changes	func

Subcomponent: Item

This subcomponent is exported so it can reused by components that have similar visuals:

• @crave/farmblocks-search-field

Usage

import { Item } from "@crave/farmblocks-input-select";

const Component = () => (
  <div>
    <Item label="First Item" />
    <Item label="Second Item" />
  </div>
);

API

Property	Description	Type	Required	Default
label	Text to display on Item	string	x
image	Path for image to display on Item	string

License

MIT