Ignite UI for React Packages Overview

    Ignite UI for React is a comprehensive suite of UI components, design toolkits, and supporting services for React. Built to empower developers to create modern, high-performance React applications for desktop browsers, mobile experiences, and progressive web apps (PWAs), Ignite UI for React leverages the latest React best practices and APIs.

    Charts & Graphs

    Ignite UI for React contains a library of Charts & Graphs that lets you visualize any type of data through its 65+ types of chart series and combinations into stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device.

    Gauges

    Ignite UI for React provides Radial Gauge, Linear Gauge, and Bullet Graph components used to illustrate data in an easy and intuitive way. The Radial Gauge has a variety of customization options in order to create a predefined shape and scale. The Linear Gauge provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The Bullet Graph component that lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts.

    Maps

    Ignite UI for React Geographic Maps brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors.

    Grids & Inputs

    Ignite UI for React provides several Grids components that allows you to bind and display data with little configuration in form of Data Grid, List, Tree, and even Spreadsheet. It also provides features such as filtering, sorting, grouping, pinning and more.

    Buttons, Inputs, Layouts & Menus

    Ignite UI for React provides various types of Buttons, Inputs, Menus, and Layouts that give you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the Storybook Here. These components are based on the Indigo Design System, are fully supported by App Builder and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.

    Getting Started With Ignite UI for React

    Install IgniteUI CLI

    To create an application from scratch and configure it to use the Ignite UI React you can use the Ignite UI CLI. The first step is to install the respective package globally as follows:

    npm install -g igniteui-cli

    If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application. To start the guide, simply run the ig command:

    ig

    Then choose React as framework, React TS as type, select Default Top Navigation project template, add a specific component/view or select Complete & Run. Additionally, you can read more about the Ignite UI CLI here.

    Alternatively, you can use popular frameworks such as Next.js, Vite or Expo as recommended by the React team. Following is a step-by-step instructions for creating React applications with Ignite UI React using one of these methods.

    Prerequisites

    1. Install NodeJS.
    2. Install Visual Studio Code.

    Creating New React Project

    With above prerequisites installed, we can create a new React application.

    1 - Open VS Code, select Terminal menu and then New Terminal option.

    2 - Type one of these commands in terminal window:

    npx create-next-app@latest

    Then follow the prompts to choose a name for the project, whether to use Typescript or not and for various other options React provides. For this example npx and create-next-app are required. Refer to this topic for more information on the different ways to boilerplate a React application.

    Updating Existing App

    If you want to use Ignite UI for React in an existing React CLI project (one that you have from before). We have you covered! All you have to do is execute these commands:

    npm install --save igniteui-react
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-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-spreadsheet igniteui-react-core

    This will automatically install packages for Ignite UI for React, along with all of their dependencies, font imports and styles references to the existing project.

    Importing Component Modules

    First we have to import the required modules of the components we want to use. We will go ahead and do this for the GeographicMap component.

    import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();

    Using Components

    We are now ready to use the Ignite UI for React map component in our markup! Let's go ahead and define it:

    // App.txs
function App() {
  return (
    <div style={{ height: "100%", width: "100%" }}>
      <IgrGeographicMap
        width="800px"
        height="500px"
        zoomable="true" />
    </div>
  );
}

    Running Application

    Finally, we can run our new application by using one of the following commands:

    npm run-script start

    After executing this command, your project will be built and served locally on your computer. It will automatically open in your default browser and you will be able to use Ignite UI for React components in your project. The final result should show interactive map of the world: