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.

Prerequisites

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

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:

<JqxBarGauge ref={ref => this.myBarGauge = ref} 
    width={600} height={600} ...
/>

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

class App extends React.Component {
 
    componentDidMount() {
        this.myBarGauge.val(50);
    }
 
    render () {
        return ( 
            <JqxBarGauge ref={ref => this.myBarGauge = ref}
                width={600} height={600} ...
            />
        )
    }
};

I. Events

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

this.myBarGauge.on('eventName', event => {
   //your logic
});

II. Methods & Properties

//Get Methods
const value = this.myBarGauge.val();
 
//Set Methods
this.myBarGauge.val([10,20,30]);
 
//Get Properties
const title = this.myBarGauge.title();
 
//Set Properties
this.myBarGauge.title('This is a New Title!');

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

this.myBarGauge.setOptions({
    title: 'I am a BarGauge', max: 100, min: 20
})

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

const options = this.myBarGauge.getOptions();