Getting Started

22 Nov 20232 minutes to read

This section explains how to create a simple Chip and to configure the Chip component.

Dependencies

The list of dependencies required to use the Chip component in your application is given below:

|-- @syncfusion/ej2-react-buttons
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-react-base

Installation and Configuration

You can use Create-react-app to setup
the applications. To install create-react-app run the following command.

npm install -g create-react-app

To set-up a React application in TypeScript environment, run the following command.

``` npx create-react-app my-app --template typescript cd my-app npm start ```

To set-up a React application in JavaScript environment, run the following command.

``` npx create-react-app my-app cd my-app npm start ``` ## Adding Syncfusion packages All the available Essential JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. To install Chip component, use the following command ```bash npm install @syncfusion/ej2-react-buttons --save ``` ## Adding CSS Reference Import the Chip component's required CSS references as follows in `src/App.css`. ```css @import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css"; ``` ## Adding Chip component to the Application To include the Chip component in your application import the `ChipListComponent` from `ej2-react-buttons` package in `App.tsx`. Add the Chip component in application as shown in below code example. ```ts import * as React from 'react'; import './App.css'; // Import the Button. import { ChipListComponent } from '@syncfusion/ej2-react-buttons'; // To render Button. function App() { return ( ); } export default App; ``` ## Running the application Run the application in the browser using the following command: ``` npm start ``` The following example shows a basic Chip component.

app.jsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent text="Janet Leverling"></ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));

app.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
  return (
    <ChipListComponent text="Janet Leverling"></ChipListComponent>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('chip'));