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