react-input-switch's Introduction

react-input-switch

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

react-input-switch's People

Contributors

Stargazers

Watchers

react-input-switch's Issues

ReferenceError: window is not defined

When using with Next.js, in a page component, using server-side rendering, the following error occurs:
ReferenceError: window is not defined

I'm using this function to render the Switch:

const renderValue = (val, key) => {
    console.log('@renderValue', val, key, typeof val)
    switch (typeof val) {
      case 'boolean': {
        return (
          <Switch 
            onChange={e => console.log(e.target.value ? 'Sim' : "Nao")}
            value={Boolean(val)}
            name={key}
          />
        )
      }

      case 'string': {
        return (
          <textarea rows={5} className='w-full resize-none border border-gray-300 p-2 rounded-md mt-3' type="text" defaultValue={val} placeholder={key} name={key} />
        )
      }

      case 'number': {
        return (
          <input
            type="number"
            defaultValue={Number(val)}
            placeholder={key}
            name={key}
          />
        )
      }

      case 'object': {
        return (
          <div className='flex flex-col items-start justify-start w-full'>
            {Object.keys(val).map(nKey => renderValue(nKey, val[nKey]))}
          </div>
        )
      }

      default: {
        return <div>{val}</div>
      }
    }
  }

Thanks in advance!

Recommend Projects