npm.io
4.0.21 • Published 4 years ago

@crave/farmblocks-input-select

Licence
MIT
Version
4.0.21
Deps
12
Size
28 kB
Vulns
0
Weekly
0
Stars
20
SummaryDependencyVersions

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

Keywords

selectselectboxforminput