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;