npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

react-input-switch

2.1.30 • Public • Published

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'
    }
  }}
/>

Also <Switch className="switch" /> will render:

<label className="switch">
  <span className="switch-track" />
  <span className="switch-button" />
</label>

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

install

npm i react-input-switch

Downloadsweekly downloads

149

version

2.1.30

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability