@crave/farmblocks-input-select
Version:
Select box form component
91 lines (68 loc) • 5.07 kB
Markdown
A component for rendering Select inputs
```
npm install @crave/farmblocks-input-select
```
```
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:
| 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 | | |
This subcomponent is exported so it can reused by components that have similar
visuals:
- `@crave/farmblocks-search-field`
```jsx
import { Item } from "@crave/farmblocks-input-select";
const Component = () => (
<div>
<Item label="First Item" />
<Item label="Second Item" />
</div>
);
```
| Property | Description | Type | Required | Default |
| -------- | --------------------------------- | ------ | -------- | ------- |
| label | Text to display on Item | string | x | |
| image | Path for image to display on Item | string | | |
MIT