React UI Components Documentation

Typescript React UI Components for jQWidgets

React is a declarative, efficient, and flexible library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called components.

Prerequisites

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 Webpack

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

Component Creation

There are two ways of creating a component:

I. Static Loading

This is the default and simplest way of creating a React component.

II. Lazy Loading

This is used when we want to create the component after the Initial Render has passed by.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
 
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
 
    constructor(props: {}) {
        super(props);
 
        this.state = {
            max: 300,
            values: [102, 115, 130, 137]
        };
    }
 
    public componentDidMount(): void {
        ReactDOM.render(
            <JqxBarGauge
                width={600} height={600} max={this.state.max} values={this.state.values}
            />,
            document.querySelector('#container'));
    }
 
    public render() {
        return (
            <div id="container" />
        );
    }
 
}
 
export default App;

Events Methods & Properties

I. Static Loading

import * as React from 'react';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
 
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
 
    private myBarGauge = React.createRef<JqxBarGauge>();
 
    constructor(props: {}) {
        super(props);
 
        this.state = {
            max: 200,
            values: [102, 115, 130, 137]
        };
    }
 
    public componentDidMount(): void {      
        // Update Initial Props
        this.setState({
            max: 50,
            values: [10, 20, 30, 40, 50]
        }, () => {
            // Methods
            this.myBarGauge.current!.refresh();
        });
 
        // Set & Get Props NOT Set in Initial Rendering
        const animationDuration = this.myBarGauge.current!.getOptions('animationDuration');
        this.myBarGauge.current!.setOptions({ animationDuration: animationDuration - 300 });
    }
 
    public render() {
        return (
            <JqxBarGauge ref={this.myBarGauge} onDrawEnd={this.handleEvent}
                width={600} height={600} max={this.state.max} values={this.state.values}
            />
        );
    }
 
    private handleEvent(e: Event): void {
        // something
    }
 
}
 
export default App;

II. Lazy Loading

import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
 
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
 
    private myBarGauge = React.createRef<JqxBarGauge>();
 
    constructor(props: {}) {
        super(props);
        this.state = {
            max: 300,
            values: [102, 115, 130, 137]
        };
    }
 
    public componentDidMount(): void {
        ReactDOM.render(
            <JqxBarGauge ref={this.myBarGauge} onDrawEnd={this.handleEvent}
                width={600} height={600} max={this.state.max} values={this.state.values}
            />,
            document.querySelector('#container'));
 
        setTimeout(() => {
            this.setState({
                max: 50,
                values: [10, 20, 30, 40, 50]
            }, () => {
                // Set Properties
                this.myBarGauge.current!.setOptions(this.state);
                // Get Properties
                const max = this.myBarGauge.current!.getOptions('max');
                /* tslint:disable:no-console */
                console.log(max);
                // Methods
                this.myBarGauge.current!.refresh();
            });
        }, 1500);
    }
 
    public render() {
        return (
            <div id="container" />
        );
    }
 
    private handleEvent(e: Event): void {
       // something
    }
 
}
 
export default App;