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.
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'));
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'));