[FEATURE REQUEST] need disabled style

[geminiyellow]

[wle8300]

Second this. There should be an optional attribute to disable.

[gdowens]

It's a good suggestion. I'll get around to it, but no promises it will be anytime soon. Feel free to take it on if time is an issue.

[geminiyellow]

@gdowens sorry, i use https://github.com/aaronshaf/react-toggle instead of this. his repo is more active then yours.

[gdowens]

That is very true. I'm open to bringing on collaborators, since apparently there is interest in keeping it active. I just don't have the time keep up on this project, especially as I am no longer using it myself. (He says... months later)

[birdage]

add a div container above the toggle, then a field for disabled based on a bool, then do something like this to simulate being disabled.

.toggle-control-container[disabled]{
    opacity:0.5;
    cursor: no-drop;
    pointer-events: none;
}

[david-xhk]

add a div container above the toggle, then a field for disabled based on a bool, then do something like this to simulate being disabled.

.toggle-control-container[disabled]{
    opacity:0.5;
    cursor: no-drop;
    pointer-events: none;
}

Thanks! This helped a lot.

Here's what I came up with to patch it in:

// ToggleButtonPatched.js
import React from "react"
import ToggleButton from "react-toggle-button"

export default function ToggleButtonPatched(props) {
  let { disabled, containerStyle, passThroughInputProps, ...restProps } = props

  if (disabled) {
    containerStyle = { ...containerStyle, opacity: 0.5, cursor: "no-drop", pointerEvents: "none" }
    passThroughInputProps = { ...passThroughInputProps, disabled: true }
  }

  return <ToggleButton containerStyle={containerStyle} passThroughInputProps={passThroughInputProps} {...restProps} />
}