It seems that importing with ES6 doesn't work.

import SwitchButton from 'react-switch-button';

This throws the following error using webpack:

ERROR in ./~/react-switch-button/src/react-switch-button.js
Module parse failed: /vagrant/src/scripts/app/node_modules/react-switch-button/src/react-switch-button.js Unexpected token (70:8)
You may need an appropriate loader to handle this file type.

Any idea?

awesome component!

i'm using the switch button in the sense of switching between two options rather than 'on/off', is there an easy way I can disable it from changing color to the 'off-state' and just keep it 'on' the whole time?

Please provide the solution for this

@gfazioli During running tests with Jest I have the following issue Cannot find module 'react-switch-button' from ...(some js file).
Getting into source code of library under node_modules I see typo in package.json
"main": "dist/react-switch-button.min.js", , which doesn't correspond to actual name under dist folder react-switch-button.js (without min). Please fix this typo, because changing name to react-switch-button.min.js makes the tests pass.
Thanks.

I tryin to update the check status, but the 'checked' property is useless.

react-tools has been deprecated and replaced by Babel

From reactify's github page:

DEPRECATED: Use babelify instead (make sure you configured Babel with babel-preset-react).

A warning from yarn:

warning react-switch-button > reactify > [email protected]: react-tools is deprecated. For more information, visit https://fb.me/react-tools-deprecated

Hello,

After having done the npm install react-switch-button --save, i have those warnings :

Compiled successfully!
npm WARN [email protected] requires a peer of react@^0.14.8 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\react-scripts\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

• [email protected]
  added 230 packages and updated 1 package in 49.968s

In my App.js class, after having import the module using
import SwitchButton from 'react-switch-button';
I just try to include it in my render function this way
<SwitchButton label="Click me" />
and i always have the same error :

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/react-switch-button.857546cd.jsx') is not a valid name.

Could you help me ?

I am using this module into my cordova and have added dependency in package.json

"dependencies": {
        "cordova-android": "^7.0.0",
        "cordova-ios": "^4.5.4",
        "cordova-plugin-whitelist": "^1.3.3",
        "react": "^16.3.1",
        "react-dom": "^16.3.1",
        "react-redux": "^5.0.7",
        "react-switch-button": "^2.3.0",
        "redux": "^3.7.2",
        "webpack": "^4.5.0"
    }

And in this how I have used

import React from 'react'
import ImgArrow from '../../../../../img/list_arrow.png'
import style from './setting_drawable.css'
import SwitchButton from 'react-switch-button'

const SettingDrawable = (props) => {
  let type = props.Type

  if (props.Type === '' || props.Type === null) {
    // default drawable
    type = 'SELECTION_DEFAULT'
  }

  let drawable = <img className = {style.DrawableSource} src={ImgArrow} />
  if (type === 'SELECTION_DEFAULT') {
    drawable = <img className = {style.DrawableSource} src={ImgArrow} />
  } else if (type === 'TOGGLE') {
    drawable = <SwitchButton name={ props.name } checked={ props.on } />
  }

  return (
    <div className = {style.SettingDrawable}>{ drawable }</div>
  )
}

export default SettingDrawable

And while running the command npm run build which will run following part "build": "webpack --config webpack.config.js --display-error-details"

and in return I get this as stacktrace:

ERROR in ./node_modules/react-switch-button/src/react-switch-button.jsx
Module parse failed: Unexpected token (31:8)
You may need an appropriate loader to handle this file type.
|
|       return (
|         <div className={classes.join( " " ).trim()}>
|           {
|             (this.props.label.length > 0)
 @ ./www/js/components/Settings/SettingElement/SettingDrawable/SettingDrawable.js 19:25-55

My project is in typescript so I don't have babel installed.

ERROR in ./node_modules/react-switch-button/src/react-switch-button.jsx
Module parse failed: Unexpected token (31:8)
You may need an appropriate loader to handle this file type.
|
|       return (
|         <div className={classes.join( " " ).trim()}>
|           {
|             (this.props.label.length > 0)
 @ ./src/Wallet.tsx 23:28-58
 @ ./src/Dashboard.tsx
 @ ./src/main.tsx
 @ multi webpack-dev-server/client?http://localhost:3300 webpack/hot/only-dev-server ./src/main

That should not matter though because it should all run from the dist files right?

see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Specifically:

HTMLInputElement.defaultChecked
Is a Boolean representing the default state of a radio button or checkbox as originally specified in HTML that created this object.

Can i disable the switch button?

When I am creating multiple switch-button component it generating duplicating id and for in the input and label element.
Is there any way to define it explicitly ?

<div class="rsbc-switch-button rsbc-mode-switch rsbc-switch-button-flat-round">
      <input type="checkbox" id="switch-button" name="switch-button" value="1">
      <label for="switch-button"></label>
</div>

Looks like we can't import this by doing something like

var Switch = require('react-switch-button');

Throws CompileError.

CompilerError: 
.../node_modules/react-switch-button/index.html:1
<!DOCTYPE html>
^
ParseError: Unexpected token

I just got this Error from the build server.
The build is done with browserify like this:

browserify browser.js -t [ babelify --presets [ es2015 react  ] ] -t brfs -t require-globify -g uglifyify -o public/js/bundle.js -v

I got this as a dependency in my package.json

  "react-switch-button": "^2.2.2",

The build server downloaded version 2.3.0

Locally with the version 2.2.2 it works.

My question is, would it be better to change the version of 2.3 to 3.0 since it may break the build process?

Hello,

I was checking your documentation and example at http://gfazioli.github.io/react-switch-button/ and found out that the example still shows the old prop label_right.
Please update the documentation to address the proper prop i.e., labelRight.

Thanks.

The convention for components seems to be camel case for props. Can label_right be changed to labelRight? Or perhaps a more suitable name could be found.

Installed fresh version from npm:

npm install react-switch-button --save

-- [email protected]

And getting "Uncaught TypeError: Cannot read property 'createClass' of undefined" on import

Importing like this:

import SwitchButton from 'react-switch-button';

also tried this according to "ReadMe":

import Select from 'react-switch-button';
import Switch from 'react-switch-button';

how to change this switch button backgroundColor?

Problem 💥

when using this component, there is a warning that React.createClass() will be removed in React version 16.

Solution 🤔

The package create-react-class should be used instead of the function from the React base package.

Hi - don't see any demos of the actual component on http://gfazioli.github.io/react-switch-button/, expected to. I'd like to add to react.rocks, if there are demos. Thanks :)

Question 🤔 ❓

is there a particular reason why this component can't be a controlled component? There is a checked prop but it is set to a PropTypes.string which makes no sense. Also, this prop is never used...