React UI Components Documentation

React UI Components for jQWidgets

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.


Node.js - to verify that you have it installed, run the command node -v in cmd. It will output the current version.

Note: Make sure that you are running on the latest Node.js and npm versions.

Setup using create-jqwidgets-react-app

To use a template project with jQWidgets and Create React App, please refer to: create-jqwidgets-react-app
This is the simplest way to get jQWidgets working with React.

Setup using Create React App

To use the React Components with Create React App, please refer to: Create React App

Setup using AOT Webpack Compilation

To use the React Components with React WebPack, please refer to: React Webpack

Events Methods & Properties

In order to bind to any event, change any property or call any method we need a reference to the widget.
For that we use the React "ref" callback attribute:

Now when we have the reference, we can call the desired event/property/method.
This is done in the componentDidMount() React Component Lifecycle method:

I. Events

To bind to an event you must use the following format:

II. Methods & Properties

Every widget have a method setOptions which accepts an object as an argument. This object contains widget settings:

Every widget also have a method getOptions which returns an object containing the widget settings: