react-pill-switcher

A simple yet beautifull switcher to transition between two or more options. Made for React.

Install

npm install --save react-pill-switcher

Simple Usage

import PillSwitcher from 'react-pill-switcher'

export function App() {
  return <PillSwitcher options={['One', 'Two', 'Three']} />
}

Demo

Coming soon...

Component Props

|Prop |Type |Description | |-------------------|----------------------------------------------------|--------------------------------------------------| |name* |str |The name for the input element | |options* |[str] or [{label: str, icon: obj, value: any}] |A list of options | |onChange |event |callback event that returns the input value | |activeBg |color |Color code for the background of the pill | |labelColor |color |Color code for the background of the active label | |activeColor |color |Color code for the active label | |className |str |Classes for the Switcher container | |labelClassName |str |Classes for the Switcher labels | |labelActiveClassName |str |Classes for the Switcher labels when active | |pillClassName |str |Classes for the Switcher Pill | |on |any |When changed, the compoent is rerendered (used to prevent visual bugs) | |isFull |boolean |If true, the component will fill the containers width|

License

MIT © lalodoble