switchbox

A dropdown, and search component for React applications

Install

npm install --save react-switchbox

Usage

import Switchbox from 'react-switchbox'

Prop Types

The switchbox component takes one prop type: options

Options

The options prop is an object detailing all the rules for the switchbox Here is an example options object prop:

const options = this.props.options || {
    type: 'dropdown',
    data: ['things', 'to', 'display']
    iconPosition: 'right',
    hideIcon: false,
    defaultValue: 'drop for something.',
    maxItems: 10,
    itemHeight: 22,
    onChange: (searchQuery) => { console.log(`${searchQuery} is being returned`) },
    onSelect: (selectedItem) => { console.log(`user has selected ${selectedItem}`) }
}

The object can contain:

type: Either dropdown or search, defaults to dropdown

data: The data that will be used in the search or dropdown

iconPosition: Either left or right, defaults to right

hideIcon: true or false, defaults to true

defaultValue: The default text displayed in the switchbox

maxItems: A limit on how many items can be displayed, defaults to 10

itemHeight: The height of each item in the dropdowns

onChange: A callback that return the text typed into the switchbox. this is used to filter and refine your search ( must be implemented yourself )

onSelect: A callback that returns the value of the item selected in the dropdown of the switchbox.

Implement

export default class App extends Component {
  render () {
    return (
      <Switchbox options={options}/>
    )
  }
}

License

© Perple Corp.

Author: Kyle Kilbride