arnthor3 / react-bootstrap-toggle Goto Github PK

If there is anyone who wants to take this project over please contact me.

In https://github.com/arnthor3/react-bootstrap-toggle/blob/master/src/react-bootstrap-toggle.jsx a className property is defined, and this property is applied to the outermost div inside the render method.

However this property is not initialised inside the defaultProps and does not seem to be applied at all when I use it like so:

import React, { Component, PropTypes } from 'react';
import Toggle from 'react-bootstrap-toggle';

import 'react-bootstrap-toggle/lib/bootstrap2-toggle.css';

class MyComponent extends Component {
    ...
    render() {
        return (
            <Toggle size={`xs`} on={`Yes`} off={`No`} onstyle={`success`} offstyle={`danger`} className={`span3`} />
        );
    }
...

The value that I enter for className appears to be thrown away, I also noticed that it is not mentioned in the readme file as a prop that can be set - is this a mistake or am I using it incorrectly?

This error is returned when a font awesome icon is placed in labels.
If it's the error is thrown when you click on the button.
If it's the error is thrown at page loading.

You have to set both properties for there to be an effect, which is a bit surprising.

Only Bootstrap2Toggle:

$ node
> var t = require('react-bootstrap-toggle')
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
undefined
> t.
t.__defineGetter__      t.__defineSetter__      t.__lookupGetter__      t.__lookupSetter__      t.__proto__
t.constructor           t.hasOwnProperty        t.isPrototypeOf         t.propertyIsEnumerable  t.toLocaleString
t.toString              t.valueOf               

t.Bootstrap2Toggle      t.__esModule            t.default               

> t.Bootstrap2Toggle
[Function: ReactBootstrap2Toggle]

When trying to define an ID for the react bootstrap toggle (passing the usual id property for JSX tag), the rendered element doesn't have an id property. After inspecting the generated html element on the browser, we can see that the defined id is ignored. As this approach of defining a custom id for elements is very important for later identifying the element, I would like to know if it is in the roadmap of this project to support the receiving of the id.

I found that one of my unit test suites caused my Jest test runner to hang indefinitely. I traced it down to trying to mount the component in the unit tests for that suite. I investigated further and found the issue was caused by using "ToggleButton" in the React component under test.

<span>
    <ToggleButton onstyle='danger' height='34px' active={true}/>
</span>

Which is imported with:

import ToggleButton from 'react-bootstrap-toggle';

Environment

• Windows 7 64-bit
• Electron 1.7.3 application
• [email protected]
• [email protected]
• [email protected]
• [email protected]

Does it suppot bootstrap 4?
Or any fast suggest how to port it ?

Hi,

Good job on your component.

There is a small issue when I am using your component in my project. The problem is the component should always infer active value from props and not from state.

So it should not be

className={this.state.active ? activeClass : inactiveClass} 

Rather it should be

className={this.props.active ? activeClass : inactiveClass} 

The reason is, we make API calls to get some object and the object's bool value should determine the active state. The objects bool valus is passed through this.props.

Can you add all dev files in your .npmignore so when published, we are not stuck with files like .babelrc which impacts our building process?

It's probably should only contain the dist/ folder and package.json and some readme, but nothing like .??* nor the src/ folder.

Also, if your package is also compatible with react@15, would appreciate if the peerDependencies be adjusted so too. Right now, we are trying to use the 2.2.3 because it's for our project... or just publish a tag react-15 would be appreciated.

Thanks,

<Toggle on={<h5>Enabled</h5>} off={<h5>Disabled</h5>} size="xs" offstyle="danger" active={this.state.status} onClick={this.statusChangeSwitch.bind(this)} disabled />

Disable the toggle is not working

I'm getting a series of React warnings from this library:

Warning: You are manually calling a React.PropTypes validation function for the `onstyle` prop on `ReactBootstrapToggle`. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.

(One for each of the PropTypes defined in the lib)
I can't tell why though, it appears your use of PropTypes should still be valid..

hello,
npm complains because react-bootstrap-toggle demands a 15.* version of react as a peer dependency.
as far as i can see it works fine with v16.2, could to update the peer dependency requirements in the package.json?

thx!

Can the onClick callback pass back more than just the new value?
Like the event, id, data value?

The reason for this would be code reusability ... can reuse the same toggle method to set the state for multiple Toggle's on the same component.

My current example works for all my onChange's except Toggle's 'onClick'
onChange = (event) => { this.setState({ [event.target.attributes["data-config-key"].value]: event.target.value }) }

Event would be best in my opinion because the user can get whatever information they want from the dom if they need it.

Thanks,
Matthew Struensee

Sorry, kicking the tires a bit today.

This line:

Appears to call the callback with !this.state.active, unless I'm misinterpreting something, shouldn't it be calling the callback with !this.props.active?

Please include more example for this React component. For example, I would like to know how would I style my toggle button and add onClick handler function.

The disable props on the button is kinda buggy.
Any other solution?

The compiled sources use PropTypes from react library directly and React.PropTypes is deprecated as of React v15.5. We have to use the prop-types library instead.

var _react = require('react');
var eitherStringOrInteger = _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]);

hi,
our CI picked up the latest version (2.2.6, published 14h ago) and it seems to be broken. thats the content of the downloaded package:

after switching to 2.2.5 it works again

The component appears to use the classes btn-xs, btn-sm, btn-lg, which I think are the bootstrap3 classes, but the docs and the included bootstrap2-toggle css file references bootstrap2, which use the old classes (btn-large, btn-small, btn-mini). Is there a good way to still use the bootstrap2 classes?

Version 1.2.15, which updated peerDependencies, seems to install fine, without warning:

$ npm install react react-dom [email protected]
├── [email protected] 
├── [email protected] 
└── [email protected] 

But the src doesn't get compiled into lib:

$ ls node_modules/react-bootstrap-toggle/
gulpfile.js  package.json readme.md    src

Running npm install a second time still won't compile it, so it doesn't seem to be npm/npm#10727

Version 1.2.14 does give warnings:

$ npm install react react-dom [email protected]
├─┬ UNMET PEER DEPENDENCY [email protected]
│ ├─┬ [email protected] 
│ │ ├── [email protected] 
│ │ ├── [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ ├─┬ [email protected] 
│ │ │ │ ├─┬ [email protected] 
│ │ │ │ │ └── [email protected] 
│ │ │ │ └── [email protected] 
│ │ │ └── [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ └── [email protected] 
│ │ └── [email protected] 
│ ├─┬ [email protected] 
│ │ └── [email protected] 
│ └── [email protected] 
├── [email protected] 
└── UNMET PEER DEPENDENCY [email protected]

But it gets compiled correctly:

$ ls node_modules/react-bootstrap-toggle/
gulpfile.js  lib          package.json readme.md

Node version is v0.12.3 and npm is 3.7.3.

I'm getting some warnings about using a type number in width and height props (documentation says these are integer props).
Warning: Failed prop type: Invalid prop heightof typenumbersupplied toReactBootstrapToggle, expected string``
It seems that these props are having check as string type.
I'm currently using [email protected]

Get a infinite render loop when using jest for testing if I use this component:

[Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.]

To work around for the moment, I remove the this.setDimensions(); from componentDidUpdate, but not sure if this is the correct fix as I dont know the Toggle code, just verifying if this seems to be an ok fix by the author?

Greetings,
When I try to unit test the component using Mocha and Chai I get a strange reference error "getComputedStyle is not defined". Is there a way to solve this?

Thank you very much

I have warning
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

It's about https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

It seams you use deprecated PropTypes
https://github.com/arnthor3/react-bootstrap-toggle/blob/master/src/react-bootstrap-toggle.jsx#L1

I have this error from dist/react-bootstrap-toggle.js:27
var eitherStringOrInteger = _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]);

It would be nice to add TypeScript type definitions.

please publish new version 2.3.2 to npm registry.

Thx