1.0.5 • Published 3 years ago
react-pill-switcher v1.0.5
react-pill-switcher
A simple yet beautifull switcher to transition between two or more options. Made for React.
Install
npm install --save react-pill-switcherSimple 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