Using iCheck in Matrix for react app

[james-carrots]

Are you requesting a feature, reporting a bug or asking a question?

Asking a question

What is the current behavior?

Based on this example: https://surveyjs.io/Examples/Library/?id=custom-widget-matrix-icheck&platform=jQuery&theme=default

It seems that by importing jquery and icheck, that matrixes automatically show the icheck (instead of radio buttons)

Is this understanding correct? If so, how do we do this in a react application managed by webpack where we do not import from CDN? Currently I'm wrapping the survey.js code in a react component.

It looks like that: render(){ <Survey.Survey model={this.state.model} css={myCss} onValueChanged={this.surveyValueChanged} onCurrentPageChanged={this.onCurrentPageChanged} onComplete={this.surveyComplete} onAfterRenderQuestion={this.onAfterRenderQuestion} onAfterRenderPage={this.onAfterRenderPage}/> }

and everything works - just don't know how to get the icheck radios instead of the standard radios. I have installed icheck and jquery in npm.

• browser:
• browser version:
• surveyjs platform (angular or react or jquery or knockout or vue):
• surveyjs version:

[dmitry-kurmanov]

@cliewdevelop Hello! You can check our https://github.com/surveyjs/surveyjs_react_quickstart repo wich contains our widgets.

[james-carrots]

Hi Dmitry, I've seen this before - have cloned it and started it up I see references to icheck being imported - but there is no example that shows a matrix using icheck - can you update?

I have also tried using renderAs: 'icheck' for the matrix section

Thank you!

[james-carrots]

Hello, any updates?

[dmitry-kurmanov]

Hello! I've investigated the issue. Unfortanly iCheck doesn't support modules out of the box. We have three variants:

1. Use in index.html an old way by adding script and link tags. Please see the correspondent vuejs example: https://github.com/surveyjs/surveyjs_vue_quickstart/blob/3c004e9b9e026d8c46619b5da3347c19db24cfc4/index.html

2. Please see the issue and the pull request (not merged): https://github.com/fronteed/icheck/issues/391 https://github.com/fronteed/icheck/pull/396. So we need to modify icheck package (very bad practice because of npm i) and then use it like that:

   
   ...
   import "icheck/skins/square/blue.css";
   require("icheck");

let widgets = require("surveyjs-widgets"); ...

3. Please see the commit https://github.com/surveyjs/surveyjs_react_quickstart/commit/fb8de00445cfecfa02d932f97827ff8770741288 I think it is the correct way (but still a little bit hacky).