gfazioli / react-toggle

A React UI Component to display an awesome Toggle Button control

Overview

This component is designed to render an awesome switch/toggle component.

New in v2.0.x

• Use TypeScript
• Use React Hooks
• New Documentation and Interactive Playground
• Removed the import styles
• New props

Upgrade Guide

If you're using the previous version 1.x, have a look at Upgrade to 2.0 from 1.x before upgrade

Installation

You can use either npm

npm i react-toggle-component

or yarn

yarn add react-toggle-component

Basic Usage

First of all, remember to import the component.

import React from "react"

import {Toggle} from "react-toggle-component"

function Application() {

  return <Toggle name="toggle-1" />;

}

Documentation

See the complete documentation and interactive playground

Contributing

Thanks for any of your contributions 👏.

Bugs 🐛

Use the GitHub issues.

License

MIT Licensed. Copyright (c) Giovambattista Fazioli 2019.

react-toggle's Issues

Peer dependencies React 17

When I try npm install I get this error:

Using :

npm: 8.4.1
node: 17.5.0
react: 17.0.2

Can you update the peer dep to react 17 ?

Free Trial

Property 'checked' does not exist on type 'EventTarget & Element'

Description
Below code results in typescript prompt Property 'checked' does not exist on type 'EventTarget & Element' error for onToggle event.

  <Toggle
    name="toggle-1"
    onToggle={(e) => console.log(e.target.checked)}
  />

Version
React-toggle-component version : ^3.0.8
Typescript version: ^4.0.2

Expected behavior
checked should be present in e.target property, similar to React.ChangeEvent<HTMLInputElement>

P.S.: Found out that styled-components is not listed as a peer-dependency and results in an error on adding this awesome library to my project. It should be mentioned in the installation instructions or add styled-components sub-dependency while installing react-toggle-component.

Multiple toggles

Thanks for the great plugin!

I noticed that if you have multiple toggles on the same page, only the first one works. I had to define a unique "id" for it to work. I think it would be good to mention this in the docs.

Also, the docs say the onToggle event should have an "event" property but I'm only getting the "checked" property. Not a big deal as I found a workaround but just thought I would mention that.

Epics Create from board

react-controlled-component warning

The component looks very nice. Thank you.
I installed it, coded it up and got this warning:
I like to remove all warnings from my code before I release, if you can help with this :-) that would be awesome

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
More info: https://fb.me/react-controlled-components

Here is my code:

import Toggle from "react-toggle-component"
import "react-toggle-component/styles.css" 

I use the toggle like this: (other code removed for clarity)

 render() {
    const { user } = this.props.auth;

    let Content = null;

    if (user === null ) {
      Content = <Spinner />;
    } else {

      let engineSwitch = null;
      if( user.role === 'admin'){
        engineSwitch = (
          <Toggle label="Off" labelRight="On" />
        )
      }
    
      Content = (
        <div>
          {engineSwitch}
        </div>
      );      
  }

    return (
      <div className="dashboard">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              <h3 className="display-4">Engine</h3>
              {Content}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Update packages

multiple toggles in same app do not function independently

Hi,

the toggle control is pretty cool... when I use two of them in the same app however, the second one controls the first

Screen shot before:

Screen shot after clicking on second toggle (Hide previous days2), notice first toggle slides to left as if it had been clicked.
I expected the second toggle to slide to the left.

Here is the relevant code:

Constructor setup:

constructor( props )
{
  super( props );

  this.state = {
    hidePastDays:true,
    hidePastDays2:true,
    errors:null,
  }
} 

"toggle" handlers:

onToggle(value) {
    this.setState( {hidePastDays: value} );
}

onToggle2(value) {
  this.setState( {hidePastDays2: value} );
}

render function:

     let hideSwitch = null;
     let hideSwitch2 = null;

      hideSwitch = (
        <div className="row">
          <Toggle 
            checked={this.state.hidePastDays}
            onToggle={(value) => { this.onToggle(value) } }
          />
          <p>Hide previous days</p>
        </div>
      );

      hideSwitch2 = (
        <div className="row">
          <Toggle 
            checked={this.state.hidePastDays2}
            onToggle={(value) => { this.onToggle2(value) } }
          />
          <p>Hide previous days2</p>
        </div>
      );

return (
    <div>
      {hideSwitch}
      {hideSwitch2}
    </div>
);

Question: is TypeScript required?

TypeScript is not listed as a pre-req, but npm install does not work due to a postinstall step with tsc.

build in 'prepare' script

Is your feature request related to a problem? Please describe.
It would be nice to not require typescript installed globally when yarn add/npm installing this package.

Describe the solution you'd like
running tsc -p tsconfig.json in the prepare script instead of the postinstall should have access to the node_modules folder. Also including typescript (or tsc) as a dev dependency will be required. This way the tsc command will reference typescript from the node_modules folder.

Describe alternatives you've considered
none

Additional context
sorry if this has been tried before, but I suppose there has to be a way to not require the consuming project to have global node modules installed.

Unable to install 2.0.6

I have been running with ^1.0.5 successfully for a long time, but when trying to upgrade to 2.0.6 it fails at installation time.

Tried both yarn and npm, and also in a clean folder right after yarn init.
I installed @types/react and @types/styled-components to get rid of two other errors, but can't see what I could do to fix the remaining?

> [email protected] postinstall ./node_modules/styled-components
> node ./scripts/postinstall.js || exit 0

Use styled-components at work? Consider supporting our development efforts at https://opencollective.com/styled-components

> [email protected] postinstall ./node_modules/react-toggle-component
> tsc -p tsconfig.json

src/components/Toggle/index.tsx(155,20): error TS2365: Operator '>' cannot be applied to types 'boolean' and 'string'.
src/components/Toggle/index.tsx(155,32): error TS2693: 'Props' only refers to a type, but is being used as a value here.
src/components/Toggle/index.tsx(160,12): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(161,13): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(177,16): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(178,17): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(179,27): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(181,24): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(189,26): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(192,13): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(193,15): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(196,13): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(197,15): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(199,29): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(204,17): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(211,18): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(212,19): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(213,26): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(214,29): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(217,24): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(224,29): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(231,31): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(240,22): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(241,17): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(244,31): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(251,31): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(265,29): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(272,31): error TS7006: Parameter 'p' implicitly has an 'any' type.
src/components/Toggle/index.tsx(282,33): error TS4025: Exported variable 'Toggle' has or is using private name 'Props'.
src/components/Toggle/index.tsx(316,6): error TS2604: JSX element type 'ToggleBase' does not have any construct or call signatures.
src/theme/index.tsx(15,51): error TS4025: Exported variable 'ReactToggleThemeProvider' has or is using private name 'Props'.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `tsc -p tsconfig.json`
npm ERR! Exit status 1

Can't Install react-toggle-component "sh: 1: tsc: not found"

Ubuntu 19.04
Node 12.10.0
Npm 6.11.2

After npm i react-toggle-component, got this error

usama@usama-Aspire-V5-471:~/Documents/Droovia$ sudo npm i react-toggle-component

> [email protected] postinstall /home/usama/Documents/Droovia/node_modules/styled-components
> node ./scripts/postinstall.js || exit 0

Use styled-components at work? Consider supporting our development efforts at https://opencollective.com/styled-components

> [email protected] postinstall /home/usama/Documents/Droovia/node_modules/react-toggle-component
> tsc -p tsconfig.json

sh: 1: tsc: not found
npm WARN [email protected] No description
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":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] postinstall: `tsc -p tsconfig.json`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/usama/.npm/_logs/2019-09-21T01_25_49_555Z-debug.log

Incorrect suggested usage of component

Instead of importing Toggle, I had to change my import to:
import {Toggle} from "react-toggle-component".

Otherwise I would get the following error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Addition of an extra state so that it behaves as a tri state switch

Want to implement something like a switch that has three states, "ENABLED,PENDING,DISABLED" . Is it possible that something like this can be implemented

Something like this?

free trial issue

Can we get two-way binding for checked attribute?

Two-way binding would be nice for checked. Expected functionality would be if I set the 'checked' value to a state variable, and that variable is changed, the toggle would update to reflect this new state change.

Currently I don't see this functionality implemented anywhere.

My workaround includes onStateChange doing the following:
document.getElementById('myToggler').checked = togglerCheckedVal

Thanks!

bug? Initial value is stucked on true

Initial value set to true is not working. It is always false on first render.

even with this code:

<Toggle
        backgroundColor={themeContext.backgroundColor}
        borderColor={themeContext.textColor}
        knobColor={themeContext.textColor}
        name="toggle-3"
        value={true}
        onToggle={handleSetTheme}
      />

the result is:

Can't install package, using nextjs

Describe the bug

error node_modules/react-toggle-component: Command failed.
Exit code: 127
Command: tsc -p tsconfig.json
Arguments:
Directory: node_modules/react-toggle-component

To Reproduce
nextjs (9)
typescript (3.6.2) installed/
yarn add react-toggle-component

Move styled-components as a peerDependency

Describe the bug
Hello, and thank you for this great component. I wanted to use your library as part of a project that depends on styled-components and saw some warnings after installation regarding styled-components being instantiated twice.

To Reproduce
Steps to reproduce the behavior:

1. Create a folder mkdir repro
2. Init npm package npm init -y
3. Install styled-components npm i styled-components
4. Install react-toggle-component npm i react-toggle-component
5. After bundling, the console should show the warning available in screenshots

Expected behavior
Styled-components should be put in peerDependencies

Screenshots
Warning message printed to the console :

Desktop (please complete the following information):

• OS: Mac Os
• Browser: Google Chrome
• Version: 74

Additional context
Add any other context about the problem here.

Add posibility to style the knob itself.

Is your feature request related to a problem? Please describe.
I would like to have an ability to style the knob itself.

Describe the solution you'd like
An ability to pass styles to knob so that I can style it like this:

(white background with black border)

Error TS1192 with TypeScript

I've been trying to use your toggle component in React with TypeScript but it seems that some curly braces are missing.

node_modules/react-toggle-component/dist/components/Toggle/index.d.ts:1:8 - error TS1192: Module '"$project/node_modules/@types/react/index"' has no default export.

import React, { FunctionComponent } from "react";
       ~~~~~

node_modules/react-toggle-component/dist/theme/index.d.ts:5:8 - error TS1192: Module '"$project/node_modules/@types/react/index"' has no default export.

import React, { FunctionComponent } from 'react';
       ~~~~~