Warning: Received false for non-boolean attribute cursor. If this is expected, cast the value to a string.
in input (created by EnhancedSwitch)
in div (created by EnhancedSwitch)
in label (created by EnhancedSwitch)
in EnhancedSwitch (created by Checkbox)
in Checkbox (at App.js:132)
in div (at App.js:126)
in div (at App.js:125)
in div (at App.js:87)
in div (at App.js:86)
in div (at App.js:85)
in div (at App.js:84)
in div (at App.js:61)
in div (at App.js:59)
in App (created by Connect(App))
in Connect(App) (created by Route)
in Route (at index.js:17)
in div (at index.js:16)
in Router (created by ConnectedRouter)
in ConnectedRouter (at index.js:15)
in Provider (at index.js:14)

<Checkbox
                        checkboxClass="icheckbox_square-blue"
                        label="С фотографией"
                      />
                      <Checkbox
                        checkboxClass="icheckbox_square-blue"
                        label="Бесплатно"
                      />

Hello.

I'm trying to build a project using webpack v1, using react-icheck, but it seems there is a problem with configured loaders:

ERROR in ./~/icheck/skins/all.css
Module parse failed: /mydir/node_modules/icheck/skins/all.css Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (3:0)

My webpack conf file looks like the following:

  module: {
    loaders: [
      {
        test: /\css$/,
        include: app_dir + '/css',
        exclude: [node_modules_dir],
          loaders: ['style-loader', 'css-loader', 'sass-loader']
      },

The three loaders are installed, but somehow they are unable to parse the css files.

I'm trying to keep the minimal configuration, not using gulp, just webpack.

If I use gulp, as per the react-icheck structure, then everything goes fine.
But usig webpack only, there seems to be an issue with configured loaders.

Any idea?

Thanks a lot.
-Bob V

I've created a pull request for the feature: #17

I'm having an issue where I have a RadioGroup with two Radio objects inside. They appear like so:

I need them to appear vertically, like so:

This was achieved by editing the label element inside the browser.

Where can I edit these settings specifically?
This is the DOM structure in runtime:

Thanks

Hello,

Just wanted to ask if you could do a new release of react-icheck, to include the fix that was merged form PR #39? This would be greatly appreciated.

Thanks in advance,

Stas

See #11 for my attempt at a fix + more information about the bug.

Hello, thanks for the lib 👍

I use it with webpack and it seems that webpack can't find the module react-icheck, I'm stuck with this error when I use the lib Module not found: Error: Cannot resolve module 'react-icheck'.

package.json main property has the wrong value maybe (lib/index.js) ?
https://github.com/luqin/react-icheck/blob/master/package.json#L5

I've created #44 to address this issue. I know that there's a test failing on it which I believe is because ReactDOM is no longer referenced the same way but not sure if this lib is abandoned at this point? I

Is it possible to publish a new npm package - the current version (0.3.3) seems to be out of date by 2 months.

Thanks

var _mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);

The line fails on isomorphic page loads when rendering on the server side since there is no browser environment.

at Object. (.../node_modules/react-icheck/lib/EnhancedSwitch.js:33:89)
[1] at Module._compile (module.js:460:26)
[1] at Module._extensions..js (module.js:478:10)
[1] at require.extensions.(anonymous function) (.../node_modules/babel-register/lib/node.js:166:7)
[1] at Object._module3.default._extensions.(anonymous function) [as .js](.../node_modules/webpack-isomorphic-tools/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:250:71)
[1] at Module.load (module.js:355:32)
[1] at Module._load (module.js:310:12)
[1] at Function.module._load (.../node_modules/piping/lib/launcher.js:32:16)
[1] at Module.require (module.js:365:17)
[1] at require (module.js:384:17)

Getting the following warning when only setting the checked property:

warning.js?8a56:44 Warning: Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.

Wrapping the checkbox/radio in a label may force some users to create a second label tag if this approach doesn't suit their design. While having multiple labels point to the same input element isn't against spec, anecdotally this may cause accessibility issues (screen readers may only read the first label found). See https://stackoverflow.com/questions/2829936/can-an-input-field-have-two-labels#answer-3992160

Can we follow the lead of the original icheck library and wrap it in a div instead?

Before I go into the style and do some manual customization, I want to ask how does the increaseArea prop work? I tried to adjust to different value but I can't see any effect. For radioClass and other prop it's fine.

I tried to view the state of the checkbox, calling isChecked() method, and get an error:

Uncaught TypeError: this.refs.enhancedSwitch.isSwitched is not a function

So, I made some changes in the file: /lib/Checkbox.js, on lines:

45: this.refs.enhancedSwitch.setSwitched(newCheckedValue);
 to: this.refs.enhancedSwitch.setChecked(newCheckedValue);
50: return this.refs.enhancedSwitch.isSwitched();
 to: return this.refs.enhancedSwitch.isChecked(); 

After Changing this 2 lines, I get these 2 methods working.

I don't know how to send a pull request, because I'm new on github. 😖

Hope this will help. 😉

Thanks.

I think is the same with drgullin/icheck#95...
if true, how can I pass the tap property.

• [email protected]
  • CheckboxGroup
  • removes a 300ms delay between a physical tap and the firing the changes on mobile browsers). Compatible with but doesn't require http://github.com/ftlabs/fastclick
  • customize classname (div, area, label) #8
  • global options
• Toggle

Hello.

I'm using a Checkbox component, and it is being returned in a dinamically-sized loop (items array is variable in length and content), so that it looks like the following:

this.props.items.map(function(item, i){
               return (
                 <div key={i}>
                   <Checkbox
                     checkboxClass={chkboxclass}
                     increaseArea="20%"
                     label={item.title}
                     defaultChecked
                     onChange={hdlchangefn}
                   />
                   <br/>
                 </div>
               )})

So, I need the onChange handler "hdlchangefn" to be a unique function, to be used no matter which Checkbox invoked it.

Is there any way in the hdlchangefn handler to access the id "i" of the enclosing

I've got this error working under react_on_rails app with prerender=True feature.

It's easy to reproduce: import Checkbox in the component, which you are server pre-rendering.

Hello,

Saw your note in the orig iCheck GIT repo about react-icheck and wanted to check this out. Looks very nice.

I wanted to also mention that on the demo page (http://luqin.github.io/react-icheck) I clicked "Radio, #input-4". I then checked "Checkbox, #input-1". Immediately after clicking input-1, the radio button selection on the right also changed to having "Radio, #input-3" checked. Didn't look into why... I just wanted to point it out.

Keep up the good work.

When passing onChange to the checkox component I expected to be able to read e.target.checked which doesnt work, since it triggers before rerendering the inner checkbox. I found that you explicitely pass the 'checked' argument to the given onChange function. This is good, but i needed to search through your code to find out about this, and i think that this is non-default behaviour.
I would suggest adding this to the documentation.

Upgraded from React 15.0.1 to 15.0.2 and now receive the following dev warnings on react-icheck 0.3.3:

Warning: Unknown props checkboxClass, increaseArea, inputType, radioClass, checkedClass, disabledClass, indeterminateClass, hoverClass, focusClass, activeClass, labelHover, labelHoverClass, inheritClass, inheritID, aria on tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

thanks for your nice work!
we use the react-icheck in our project
how to change the size of the checkbox,or has the 'size' props?
thanks:)