Ignite UI for React includes a wide range of easy to use React UI components that have been designed and optimized for high-performance, high-volume data scenarios. It includes a grid, charts, gauges and the Excel library.
You can build amazing experiences with Ignite UI for React. Ignite UI for React includes the world’s fastest, virtualized real-time, live-data React grid with interactive responsive web design features like built-in column types & templating support, column sorting, filtering, and more. The high-performance, streaming financial & business charts can render millions of data points in milliseconds with interactive panning & zooming, touch support, callout layers, trend lines and markers with full styling capability. The included Microsoft Excel library has read / write XLS & XLSX file capability, support for more than 300 Excel formulas and reporting with charting & sparklines.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔️ | Latest ✔️ | Latest ✔️ | Latest ✔️ | Latest ✔️ |
This repository contains the base logic and build process for generating the React wrappers published for the igniteui-react, igniteui-react-dockmanager and igniteui-react-grids packages.
Components in igniteui-react
| Components | Status | Documentation | Released Version | License |
|---|---|---|---|---|
| AI Chat | ✅ | Docs | 19.3 | MIT |
| Date Range Picker | ✅ | Docs | 19.1 | MIT |
| Tooltip | ✅ | Docs | 19.1 | MIT |
| Accordion | ✅ | Docs | 18.9 | MIT |
| Tile Manager | ✅ | Docs | 18.9 | MIT |
| Banner | ✅ | Docs | 18.7 | MIT |
| Date Picker | ✅ | Docs | 18.7 | MIT |
| Divider | ✅ | Docs | 18.7 | MIT |
| Carousel | ✅ | Docs | 18.7 | MIT |
| Tree | ✅ | Docs | 16.16 | MIT |
| Avatar | ✅ | Docs | 16.11 | MIT |
| Badge | ✅ | Docs | 16.11 | MIT |
| Button | ✅ | Docs | 16.11 | MIT |
| Button Group | ✅ | Docs | 16.11 | MIT |
| Calendar | ✅ | Docs | 16.11 | MIT |
| Card | ✅ | Docs | 16.11 | MIT |
| Checkbox | ✅ | Docs | 16.11 | MIT |
| Chip | ✅ | Docs | 16.11 | MIT |
| ComboBox | ✅ | Docs | 16.11 | MIT |
| Date Time Input | ✅ | Docs | 16.11 | MIT |
| Dialog | ✅ | Docs | 16.11 | MIT |
| Dropdown | ✅ | Docs | 16.11 | MIT |
| Expansion Panel | ✅ | Docs | 16.11 | MIT |
| Icon | ✅ | Docs | 16.11 | MIT |
| Icon Button | ✅ | Docs | 16.11 | MIT |
| Input | ✅ | Docs | 16.11 | MIT |
| Linear Progress | ✅ | Docs | 16.11 | MIT |
| List | ✅ | Docs | 16.11 | MIT |
| Mask Input | ✅ | Docs | 16.11 | MIT |
| Navigation Bar (Navbar) | ✅ | Docs | 16.11 | MIT |
| Navigation Drawer | ✅ | Docs | 16.11 | MIT |
| Radio & Radio Group | ✅ | Docs | 16.11 | MIT |
| Rating | ✅ | Docs | 16.11 | MIT |
| Ripple | ✅ | Docs | 16.11 | MIT |
| Select | ✅ | Docs | 16.11 | MIT |
| Slider & Range Slider | ✅ | Docs | 16.11 | MIT |
| Snackbar | ✅ | Docs | 16.11 | MIT |
| Stepper | ✅ | Docs | 16.11 | MIT |
| Switch | ✅ | Docs | 16.11 | MIT |
| Tabs | ✅ | Docs | 16.11 | MIT |
| Text Area | ✅ | Docs | 16.11 | MIT |
| Toast | ✅ | Docs | 16.11 | MIT |
Grids in igniteui-react-grids & igniteui-grid-lite
The Ignite UI for React Data Grid is both lightweight and developed to handle high data volumes. The React Grid offers powerful data visualization capabilities and superior performance on any device. With interactive features that users expect. Fast rendering. Unbeatable interactions. And the best possible user experience that you wouldn’t otherwise be able to achieve with so little code on your own.
| Components | Status | Documentation | Released Version | Package | License |
|---|---|---|---|---|---|
| Grid | ✅ | Docs | 18.3 | igniteui-react-grids | Commercial |
| Tree Grid | ✅ | Docs | 18.3 | igniteui-react-grids | Commercial |
| Pivot Grid | ✅ | Docs | 18.3 | igniteui-react-grids | Commercial |
| Hierarchical Grid | ✅ | Docs | 18.6 | igniteui-react-grids | Commercial |
| Grid Lite | ✅ | Docs | 0.0.1 | igniteui-grid-lite | MIT |
Dock Manager - EXCLUSIVE FEATURE - igniteui-react-dockmanager
Provide a complete windowing experience, splitting complex layouts into smaller, easier-to-manage panes.
- Documentation
- License - Commercial
- Package - igniteui-react-dockmanager
Charts & Maps in igniteui-react-charts & igniteui-react-maps
The full-featured Ignite UI for React chart component is built for speed, simplicity, and beauty. It gives you access to more than 65 high-performance React charts such as – Bubble charts, Donut charts, Financial/Stock charts, Pie chart, Line chart and more. With our React component for business and stock charting, you are enabled to build stunning data visualizations, apply deep analytics, and render voluminous data sets in seconds. Flawless experience while scrolling through an unlimited number of rows and columns is guaranteed.
Keeping in mind the customization and configuration your users expect, the Ignite UI for React charts brings on rich interactivity, full touch-screen support that will run on any browser, intuitive API, minimal hand-on coding, and the same chart features that you come across with Google Finance and Yahoo Finance Charts - price overlays, trendlines, volume indicators, value overlays, and more.
Gauges in igniteui-react-gauges
| Components | Status | Documentation | Released Version | Package | License |
|---|---|---|---|---|---|
| Bullet Graph | ✅ | Docs | 16.11 | igniteui-react-gauges | Commercial |
| Linear Gauge | ✅ | Docs | 16.11 | igniteui-react-gauges | Commercial |
| Radial Gauge | ✅ | Docs | 16.11 | igniteui-react-gauges | MIT |
The fastest way to kickstart your React application using Ignite UI for React is using the Ignite UI CLI.
npm i -g igniteui-cli
ig new <project name> --framework=react --type=igr-ts
cd <project name>
ig add grid <component name>
ig start
This will initialize a new application and add a single page to it with a pre-configured grid component. If you need to add other components and therefore the packages they reside in, you can either init the Ignite UI CLI prompt again using the ig command and choose from the list of templates or use the following commands to install the packages needed directly.
npm install --save igniteui-react-charts igniteui-react-core
npm install --save igniteui-react-excel igniteui-react-core
npm install --save igniteui-react-gauges igniteui-react-core
npm install --save igniteui-react-grids igniteui-react-core
npm install --save igniteui-react-maps igniteui-react-core
npm install --save igniteui-react-excel igniteui-react-core
npm install --save igniteui-react-spreadsheet igniteui-react-core
Or
yarn add igniteui-react-charts igniteui-react-core
yarn add igniteui-react-excel igniteui-react-core
yarn add igniteui-react-gauges igniteui-react-core
yarn add igniteui-react-grids igniteui-react-core
yarn add igniteui-react-maps igniteui-react-core
yarn add igniteui-react-excel igniteui-react-core
yarn add igniteui-react-spreadsheet igniteui-react-core
After executing those commands, your new project will be built and served. It will automatically open in your default browser and you will be able to use Ignite UI for React components in your project.
First we have to import the required modules of the components we want to use. We will go ahead and do this for the Category Chart component.
import { IgrCategoryChartModule } from "igniteui-react-charts/ES5/igr-category-chart-module";
IgrCategoryChartMapModule.register();We are now ready to use the CategoryChart component in our markup! Let's go ahead and define it:
// App.txs
render() {
return (
<div style={{height: "100%", width: "100%" }}>
<IgrCategoryChart dataSource={this.state.data}
width="700px"
height="500px">
</IgrCategoryChart>
</div>
);
}Finally, we can run our new application by using one of the following commands:
npm run start
The typedoc will use the configs from the ig-typedoc-theme, in this case the react.oss.config.json. If you would like to test out a local versioning, you will need to set your react-api-docs-versions.json file, that is usually used on the staging/production machines that lists the versions. The content of the file looks like this: {"folders": [ "19.0.3" ]}.
In order to generate typedocs for the components you will need to perform the following steps. You can do everything from root level:
- Build the source:
npm run build(required) - Build the typedoc:
npm run build:typedoc:dev
The build:typedoc:dev script sets NODE_ENV, because it is required by the ig-typedoc-theme to be set, so the config works. Should be already set on staging/production machines.
For development of the plugin you can use the npm run build:plugin:watch and run typedoc under a separate VSCode JS Debug Terminal or similar and breakpoints should work for the source in plugins/typedoc-plugin-react-components/src/main.ts.
Note: If you have globally installed typedoc, it may interfere and not take into account the project config in
typedoc.json. Either use the local package since there's no need for global typedoc or specify the project config manually.
