https://github.com/alvarobernalg/react-switchable
A react primitive for building switchable components
https://github.com/alvarobernalg/react-switchable
control overlay primitives radio radiogroup react switch toggle
Last synced: 3 months ago
JSON representation
A react primitive for building switchable components
- Host: GitHub
- URL: https://github.com/alvarobernalg/react-switchable
- Owner: AlvaroBernalG
- License: mit
- Created: 2018-05-30T10:04:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-25T02:11:15.000Z (over 2 years ago)
- Last Synced: 2025-05-31T09:51:22.878Z (4 months ago)
- Topics: control, overlay, primitives, radio, radiogroup, react, switch, toggle
- Language: JavaScript
- Homepage:
- Size: 8.43 MB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [react](https://reactjs.org)-switchable
[](https://badge.fury.io/js/react-switchable)
[](https://badge.fury.io/js/react-switchable)
[](https://github.com/AlvaroBernalG/react-switchable/blob/master/LICENSE)
A customizable and simple to use React primitive for building switchable components, inspired by react-switch.
---
## Install
```bash
npm install react-switchable --save
```
## Usage
```jsx
import Switch, { Item } from 'react-switchable';
import 'react-switchable/dist/main.css'
console.log('The new value is => ', newValue)}>
Hot
Cold
```
You can have as many Item children as you can fit:
```jsx
import Switch, { Item } from 'react-switchable';
import 'react-switchable/dist/main.css'
What is the capital of Venezuela ?
checkAnswer(capital)}>
London
Caracas
Lagos
Beijing
Moscow
```
## Data flow
By default the switchable component manages which `` is active internally. You can change that by setting the `active` attribute in any `` component.
Data flow from parent to child :
```js
class App extends React.Commponent {
state = {
selectedCountryIndex: 1,
countries: [
{ value: "Russia" },
{ value: "Nigeria" },
{ value: "Venezuela" },
{ value: "France" }
]
}
render() {
return (
{
this.setState({
selectedCountryIndex: selectedIndex
})
}}
>
{countries.map((country, index) => (
{country.value}
))}
)
}
}
```
Data flow from child to parent:
```js
class App extends React.Commponent {
state = {
selectedCountry: "Nigeria"
}
render() {
return (
this.setState({ selectedCountry: country })}>
Russia
Nigeria
Venezuela
France
)
}
}
```
## Accessible
Created with accessibility in mind. The following `gif` was made using MacOS
Sierra `VoiceOver`.
## Live demo
[](https://codesandbox.io/s/react-switchable-alvarobernalg-lp823)
## API
### Switch
Prop | Type | Required | Default | Description
-----|------|----------|---------|-------------
`name`| string | Yes | "" | Unique global identifier.
`children` | Array[Item] | Yes | [] | A list of Items.
`onItemChanged`| function | No | "" | Fires after the selection of an Item.
`onItemSelected`| function | No | "" | Fires when an Item is selected.
`disable` | boolean | No | false | Disables the switch.
`arrowSelection` | boolean | No | true | Enables the selection of Items with arrow keys.
`customOverlay` | Overlay | No | undefined | Enables the use of a custom overlay React component.
Inherits all other properties assigned from the parent component
### State | Item
Prop | Type | Required | Default | Description
-----|------|----------|---------|-------------
`value`| string | Yes | "" | Represents the Item value.
`active` | boolean | No | false | Sets the Item as active.
`disable` | boolean | No | false | Disables the Item.
`default` | boolean | No | false | Which Item should be active by default.
Inherits all other properties assigned from the parent component.
### Overlay
Prop | Type | Required | Default | Description
-----|------|----------|---------|-------------
`selectedIndex`| number | Yes | "" | The selected Item index.
`totalItems` | number | Yes | "" | The total number of Items.
Inherits all other properties assigned from the parent component.
## Related
[react-sn-question](https://github.com/AlvaroBernalG/react-sn-question)
## Contributing
All contributions are welcome.
## License
MIT license @[Alvaro Bernal G](https://alvarobg.com).