### Install Ignite UI CLI

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Installs the Ignite UI CLI globally using npm. This tool is used for scaffolding new Ignite UI React projects and configuring them.

```bash
npm install -g igniteui-cli
```

--------------------------------

### Run React Development Server

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Starts the development server for a React application. This command builds the project and serves it locally, allowing developers to see changes in real-time.

```bash
npm run dev
```

--------------------------------

### React Application Setup with Ignite UI

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/editors/multi-column-combobox

This JavaScript code demonstrates the basic setup for a React application using the Ignite UI library. It imports necessary React and ReactDOM modules, along with a CSS file for styling and sample data. This is a common starting point for building interactive UIs with Ignite UI components.

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { SampleComboData } from './SampleComboData';

```

--------------------------------

### React Component Setup for Ignite UI List Examples

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/list

This is the main React component setup for the Ignite UI list examples. It imports necessary components from '@infragistics/igniteui-react' and 'igniteui-webcomponents', defines the component's state for list size, and includes the event handler for radio button changes.

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrList, IgrListItem, IgrListHeader, IgrRadioGroup, IgrRadio, IgrAvatar, IgrButton } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class ListOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
        this.state = { listSize: "medium" };
        this.onRadioChange = this.onRadioChange.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrRadioGroup alignment="horizontal" style={{marginBottom: '10px'}}>
                    <IgrRadio name="size" value="small" labelPosition="after" checked={this.state.listSize === "small" } onChange={this.onRadioChange}>
                        <span>Small</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="medium" labelPosition="after" checked={this.state.listSize === "medium" } onChange={this.onRadioChange}>
                        <span>Medium</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="large" labelPosition="after" checked={ this.state.listSize === "large" } onChange={this.onRadioChange}>
                        <span>Large</span>
                    </IgrRadio>
                </IgrRadioGroup>

                <IgrList size={this.state.listSize} />
            </div>
        );
    }

    public onRadioChange(e: any) {
        if (e.detail.checked == true) {
            this.setState({ listSize: e.detail.value });
        }
    }
}
```

--------------------------------

### Install and Import Ignite UI React Textarea

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/text-area

Demonstrates how to install the igniteui-react npm package and import the IgrTextarea component along with its required CSS. This is the initial setup required before using the Textarea component.

```bash
npm install igniteui-react
```

```tsx
import { IgrTextarea } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
```

```tsx
<IgrTextarea rows="5" label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
```

--------------------------------

### Create New React Project with Vite

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Scaffolds a new React application using Vite's CLI. This command initiates the project creation process, prompting the user for project name, framework, and other configurations.

```bash
npm create vite@latest
```

--------------------------------

### React and ReactDOM Setup

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview

This snippet shows the basic setup for a React application using ReactDOM. It imports necessary React libraries and the main CSS file for styling. This is a standard entry point for a React project.

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

```

--------------------------------

### Install Ignite UI React Grid Package

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Installs the necessary package for the Ignite UI React Grid component. This command adds the `igniteui-react-grids` package to the project's dependencies.

```bash
npm install igniteui-react-grids --save
```

--------------------------------

### Installation

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/editors/xdate-picker

Install the necessary Ignite UI packages for the XDate Picker component.

```APIDOC
## Installation

When installing the XDate Picker component, the core and inputs packages must also be installed.

```bash
npm install --save igniteui-react-core
npm install --save igniteui-react-inputs
npm install --save igniteui-react-layouts
```
```

--------------------------------

### Initialize Ignite UI CLI for React Project

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Starts the Ignite UI CLI in interactive mode to guide the user through creating a new React application. It allows selection of framework, project type, template, and components.

```bash
ig
```

--------------------------------

### React App Initialization

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/hierarchical-grid/selection

Basic React application setup using create-react-app. This snippet demonstrates the entry point of a React application, typically found in index.js or main.js, responsible for rendering the root component into the DOM.

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';


```

--------------------------------

### React Application Entry Point (JavaScript)

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree-grid/sorting

Sets up the root of a React application and renders the main component. It imports necessary modules like React and ReactDOM, and includes basic CSS for styling. This is the standard starting point for a React web application.

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

// Assuming App component is defined elsewhere
// import App from './App'; 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* <App /> */}
  </React.StrictMode>
);
```

--------------------------------

### Basic React App Setup with Ignite UI

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/column-hiding

This snippet shows the basic structure for a React application, including importing React, ReactDOM, and the main CSS file. It also imports the necessary Ignite UI module for grids.

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrGridModule } from "@infragistics/igniteui-react-grids";
```

--------------------------------

### Install and Import IgrDateRangePicker in React

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-range-picker

Installs the Ignite UI for React library and imports the IgrDateRangePicker component along with its necessary CSS. This is the initial setup required before using the component.

```bash
npm install igniteui-react
```

```tsx
import { IgrDateRangePicker } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
```

--------------------------------

### Install and Import IgrBadge in React

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/badge

Installs the Ignite UI for React npm package and imports the IgrBadge component along with its necessary CSS. This is the initial setup required before using the badge component.

```bash
npm install igniteui-react
```

```tsx
import { IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
```

--------------------------------

### Install Ignite UI React Core and Excel Packages

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/excel-library

Installs the necessary core and excel packages for Ignite UI React. These commands are executed using npm.

```bash
npm install --save igniteui-react-core
npm install --save igniteui-react-excel
```

--------------------------------

### Install and Import IgrSwitch Component

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/switch

Installs the Ignite UI for React npm package and imports the IgrSwitch component along with its necessary CSS. This is the initial setup required to use the switch component in a React application.

```bash
npm install igniteui-react
```

```tsx
import { IgrSwitch } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
```

--------------------------------

### React: Setup and Module Registration for Ignite UI Components

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/hierarchical-grid/row-selection

This snippet sets up the React application by importing and registering necessary Ignite UI modules for components like Badge, Property Editor Panel, and Hierarchical Grid. It also imports global styles.

```jsx
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrBadgeModule } from "@infragistics/igniteui-react";
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from "@infragistics/igniteui-react-core";
import SingersData from './SingersData.json';

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const mods: any[] = [
    IgrBadgeModule,
    IgrPropertyEditorPanelModule,
    IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private propertyEditorPanel1: IgrPropertyEditorPanel
    private propertyEditorPanel1Ref(r: IgrPropertyEditorPanel) {
        this.propertyEditorPanel1 = r;
        this.setState({});
    }
    private selectionType: IgrPropertyEditorPropertyDescription
    private hideRowSelectors: IgrPropertyEditorPropertyDescription
    private hierarchicalGrid: IgrHierarchicalGrid
    private hierarchicalGridRef(r: IgrHierarchicalGrid) {
        this.hierarchicalGrid = r;
        this.setState({});
    }

    constructor(props: any) {
        super(props);

        this.propertyEditorPanel1Ref = this.propertyEditorPanel1Ref.bind(this);
        this.hierarchicalGridRef = this.hierarchicalGridRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">
            <div className="options vertical">
                <IgrPropertyEditorPanel
                    target={this.hierarchicalGrid}
                    descriptionType="WebHierarchicalGrid"
                    isWrappingEnabled="true"
                    isHorizontal="true"
                    componentRenderer={this.renderer}
                    ref={this.propertyEditorPanel1Ref}>
                    <IgrPropertyEditorPropertyDescription
                        name="selectionType"
                        propertyPath="RowSelection">
                    </IgrPropertyEditorPropertyDescription>
                    <IgrPropertyEditorPropertyDescription
                        name="hideRowSelectors"
                        propertyPath="HideRowSelectors">
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="container fill">
                <IgrHierarchicalGrid
                    autoGenerate={false}
                    data={this.singersData}
                    ref={this.hierarchicalGridRef}
                    id="hierarchicalGrid"
                    primaryKey="ID"
                    allowFiltering={true}>
                    <IgrColumn
                        field="Artist">
                    </IgrColumn>
                    <IgrColumn
                        field="Photo"
                        dataType="image">
                    </IgrColumn>
                    <IgrColumn
                        field="Debut">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyNominations"
                        header="Grammy Nominations">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyAwards"
                        header="Grammy Awards">
                    </IgrColumn>
                    <IgrRowIsland
                        childDataKey="Albums"
                        autoGenerate={false}>
                        <IgrColumn
                            field="Album">
                        </IgrColumn>
                        <IgrColumn
                            field="LaunchDate"
                            header="Launch Date"
                            dataType="date">
                        </IgrColumn>
                        <IgrColumn
                            field="BillboardReview"
                            header="Billboard Review">
                        </IgrColumn>
                        <IgrColumn
                            field="USBillboard200"
                            header="US Billboard 200">
                        </IgrColumn>
                        <IgrRowIsland
                            childDataKey="Songs"
                            autoGenerate={false}>
                            <IgrColumn
                                field="Number"
                                header="No.">
                            </IgrColumn>
                            <IgrColumn
                                field="Title">
                            </IgrColumn>
                        </IgrRowIsland>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }
}
```

--------------------------------

### Tree Grid Row Drag and Drop Example (TypeScript)

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree-grid/row-drag

Demonstrates how to implement row drag and drop functionality in an Ignite UI React Tree Grid. This example showcases the basic setup for enabling drag and drop operations between grids.

```typescript
export class EmployeesNestedTreeDataItem {
    public constructor(init: Partial<EmployeesNestedTreeDataItem>) {
        Object.assign(this, init);
    }
}
```

--------------------------------

### Install and Import Ignite UI React

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/icon

Instructions for installing the necessary Ignite UI npm package and importing the IgrIcon component along with its required CSS. This is a prerequisite for using the component.

```bash
npm install igniteui-react
```

```tsx
import { IgrIcon } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
```

--------------------------------

### Circular Progress Indicator - Simple Example (React)

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/circular-progress

Demonstrates a basic implementation of the Circular Progress Indicator component in React. It shows how to import the necessary modules and render a simple circular progress bar with a specified value. This example requires the '@infragistics/igniteui-react' package and basic React setup.

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCircularProgress, IgrCircularProgressModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './CircularProgressStyle.css'

IgrCircularProgressModule.register();

export default class SimpleCircularProgressIndicator extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCircularProgress value={100} />
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SimpleCircularProgressIndicator/>);

```

--------------------------------

### Install Ignite UI for React Packages

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/color-editor

These commands install the necessary Ignite UI for React packages. 'igniteui-react-core' provides core functionalities, while 'igniteui-react-inputs' includes input-related components like the ColorEditor.

```cmd
npm install igniteui-react-core
npm install igniteui-react-inputs
```

--------------------------------

### Basic Multi-Column ComboBox with Data Source

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/editors/multi-column-combobox

Renders a Multi-Column ComboBox and binds an array of objects to its dataSource property. This example demonstrates the fundamental setup for displaying data.

```tsx
<IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryNames} />
```

--------------------------------

### Basic Tree Grid Row Editing Setup (React)

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree-grid/row-editing

This code snippet shows a minimal setup for enabling row editing in an Ignite UI React Tree Grid. It focuses on the essential properties required for row editing, such as `primaryKey`, `width`, `height`, and `rowEditable`. This serves as a starting point for implementing row editing.

```tsx
<IgrTreeGrid primaryKey="ID" width="100%" height="500px" rowEditable={true}>
    <IgrColumn field="Name" header="Name" dataType="string"></IgrColumn>
    <IgrColumn field="Age" header="Age" dataType="number"></IgrColumn>
    <IgrColumn field="Title" header="Title" dataType="string"></IgrColumn>
    <IgrColumn field="HireDate" header="Hire Date" dataType="date"></IgrColumn>
</IgrTreeGrid>
```

--------------------------------

### Pie Chart Examples - Ignite UI React

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/cell-activation

Illustrates the implementation and customization of Pie Charts using Ignite UI React. Includes examples for animations, highlight filters, and general highlighting effects. Assumes basic knowledge of React and Ignite UI components.

```javascript
import React from 'react';
import { IgrPieChartModule } from 'igniteui-react-charts';

IgrPieChartModule.register();

function PieChartExample() {
  // Pie chart data and configuration
  return (
    <div style={{ height: '400px', width: '100%' }}>
      {/* Ignite UI Pie Chart component */}
      <IgrPieChart
        // ... chart properties
      />
    </div>
  );
}

export default PieChartExample;
```

--------------------------------

### Install Ignite UI React Grid Packages

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/overview

Installs the necessary Ignite UI React packages for the data grid. Requires both the core package and the grids package to be installed.

```cmd
npm install --save igniteui-react-core
npm install --save igniteui-react-grids
npm install --save igniteui-react-inputs
```

--------------------------------

### Linear Gauge Animation with React

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/linear-gauge

Demonstrates how to animate the Linear Gauge component in React. This example utilizes the IgrLinearGauge and IgrLinearGraphRange components from the @infragistics/igniteui-react-gauges package. It includes setup for the gauge and methods to trigger animations.

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLinearGauge } from "@infragistics/igniteui-react-gauges";
import { IgrLinearGraphRange } from "@infragistics/igniteui-react-gauges";
import { LinearGraphNeedleShape } from "@infragistics/igniteui-react-gauges";
import { IgrLinearGaugeModule } from "@infragistics/igniteui-react-gauges";

IgrLinearGaugeModule.register();

export default class LinearGaugeAnimation extends React.Component {
    public gauge: IgrLinearGauge;
    private shouldAnimate: boolean = false;

    constructor(props: any) {
        super(props);

        this.onGaugeRef = this.onGaugeRef.bind(this);
        this.onAnimateToGauge1 = this.onAnimateToGauge1.bind(this);
    }
}
```

--------------------------------

### Install Ignite UI React Packages

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/editors/multi-column-combobox

Installs the core, data-grids, inputs, and layouts packages for Ignite UI React. These are essential for using components like the Multi-Column ComboBox.

```bash
npm install --save igniteui-react-core
npm install --save igniteui-react-data-grids
npm install --save igniteui-react-inputs
npm install --save igniteui-react-layouts
```

--------------------------------

### Initialize Multi-Column ComboBox with Options

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/editors/multi-column-combobox

Initializes the Multi-Column ComboBox component with various configurations including data source, text field, display fields, placeholder, and sort mode. This example shows a comprehensive setup within a React component.

```tsx
import { IgrMultiColumnComboBoxModule } from "@infragistics/igniteui-react-data-grids";
import { IgrMultiColumnComboBox, SortMode } from "@infragistics/igniteui-react-data-grids";
import { IgrColumnWidth } from "@infragistics/igniteui-react-data-grids";

IgrMultiColumnComboBoxModule.register();

export default class MultiColumnComboBoxOverview extends React.Component<any, any> {
    public multiColumnComboBox!: IgrMultiColumnComboBox;
    public countryData: any[];

    constructor(props: any) {
        super(props);
        this.onMultiColumnComboBoxRef = this.onMultiColumnComboBoxRef.bind(this);
        this.countryData = SampleComboData.getPopulation();
    }

    public onMultiColumnComboBoxRef(multiColumnComboBox: IgrMultiColumnComboBox) {
        if (!multiColumnComboBox) { return; }
        this.multiColumnComboBox = multiColumnComboBox;
        this.multiColumnComboBox.dataSource = this.countryData;
        this.multiColumnComboBox.textField = "country";
        this.multiColumnComboBox.fields = ["country", "continent", "pop"];
        this.multiColumnComboBox.placeholder = "Choose a country";
        this.multiColumnComboBox.sortMode = SortMode.SortByOneColumnOnly;
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container">
                    <IgrMultiColumnComboBox width="600px" defaultColumnWidth="200"
                            ref={this.onMultiColumnComboBoxRef}>
                    </IgrMultiColumnComboBox>
                </div>
            </div>
        );
    }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MultiColumnComboBoxOverview/>);
```