Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-input-switch with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactInputSwitch = require("react-input-switch")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-input-switch v2.2.1

React toggle switch component

react-input-switch

npm npm Build Status codecov styled with prettier

React toggle switch component

Installation

npm install react-input-switch --save
yarn add react-input-switch

Demo

https://swiftcarrot.dev/react-input-switch/

Custom styles

<Switch
  styles={{
    track: {
      backgroundColor: 'blue'
    },
    trackChecked: {
      backgroundColor: 'red'
    },
    button: {
      backgroundColor: 'yellow'
    },
    buttonChecked: {
      backgroundColor: 'blue'
    }
  }}
/>

Controlled example (with hook)

import React, { useState } from 'react';
import Switch from 'react-input-switch';

const App = () => {
  const [value, setValue] = useState(0);

  return <Switch value={value} onChange={setValue} />;
};

Custom on/off value

The default on/off value is 1/0 and default value is 1. This component will also render a hidden input (<input type="hidden"/>) with current value and the name prop.

import React, { useState } from 'react';
import Switch from 'react-input-switch';

const App = () => {
  const [value, setValue] = useState('yes');

  return <Switch on="yes" off="no" value={value} onChange={setValue} />;
};

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free