@crave/farmblocks-input-select

Select box form component

Stats

StarsIssuesVersionUpdatedCreatedSize
@crave/farmblocks-input-select
20234.0.182 months ago4 years agoMinified + gzip package size for @crave/farmblocks-input-select in KB

Readme

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:

image

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

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.