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;