# react-range-switch

> react-range-switch

Latest version **1.0.7** (published 2017-05-25) · 0 weekly downloads

## Install

```sh
npm install react-range-switch
pnpm add react-range-switch
yarn add react-range-switch
bun add react-range-switch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2017-05-25 |
| First published | 2017-05-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bojan Aleksic |
| Maintainers | bojanaleksa |
| Keywords | react, react-component |

## Links

- npm: https://www.npmjs.com/package/react-range-switch
- Repository: https://github.com/bojanaleksa/react-range-switch
- Issues: https://github.com/bojanaleksa/react-range-switch/issues
- npm.io page: https://npm.io/package/react-range-switch

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.1.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-extra-prop-types](https://npm.io/package/react-extra-prop-types.md) ^0.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2017-05-25
- 1.0.6 — 2017-05-24
- 1.0.5 — 2017-05-24
- 1.0.4 — 2017-05-24
- 1.0.2 — 2017-05-24
- 1.0.1 — 2017-05-24
- 1.0.0 — 2017-05-24

## README

# react-range-switch

__Text based switch component__


## Demo & Examples

Live demo: [bojanaleksa.github.io/react-range-switch](http://bojanaleksa.github.io/react-range-switch/)

To build the examples locally, run:

```
npm install
npm start
```

Then open [`localhost:8000`](http://localhost:8000) in a browser.


## Installation

The easiest way to use react-range-switch is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).

You can also use the standalone build by including `dist/react-range-switch.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.

```
npm install react-range-switch --save
```


## Usage

This component is meant for selecting among several text options. Can be used as a yes/no switch, a multiple choice switch ( never, sometimes, always ), menu ( single level only )...

Set the height and width using .react-range-switch-holder {height: 30px;width: 100px;} or put it in a parent element with defined height and width, as the intented usage for it is to be a part of a grid.

```
import RangeSwitch from 'react-range-switch';

<div style={{width: '100px', height:'30px'}}
  <RangeSwitch />
</div>

```

### Properties

name | type | default | description
---|---|---|---
borderRadius|integer|30|border curve for holder and selector
change|function||called when the user performs action, passes index of selected text as the only argument
color|hex, rgb(a)|rgb(200, 200, 200)|border and selector color. It is used when the currently selected text doesn't have a color property
selected|integer|0|index of the currently selected text
texts|array of either strings or objects of shape {string, color}. Can be mixed|['no', {text:'maybe', color: '#ff0000'}, {text: 'yes', color: '#00ff00'}]|this is the list of options for the user to choose

### Classes
name | description
---|---
.react-range-switch-holder|for the holder element. This is where you cna change the width, height...
.react-range-switch-section|for the sections. A section is a holder of a single text.
.react-range-switch-selector|for the sliding selector.


## Development (`src`, `lib` and the build process)

**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).

## License

MIT

Copyright (c) 2017 Bojan Aleksic.

---
_Source: https://npm.io/package/react-range-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._