Getting Started

7 Nov 20239 minutes to read

This section explains you the steps required to create a simple Toolbar and demonstrate the basic usage of the Toolbar control.

Dependencies

Below is the list of minimum dependencies required to use the Toolbar component.

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

Setup for Local Development

To set-up a React application, choose any of the following ways. The best and easiest way is to use the create-react-app. It sets up your development environment in JavaScript and improvise your application for production. Refer to the installation instructions of create-react-app.

npx create-react-app my-app
cd my-app
npm start

or

yarn create react-app my-app
cd my-app
yarn start

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

Besides using the npx package runner tool, also create an application from the npm init. To begin with the npm init, upgrade the npm version to npm 6+.

npm init 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 Accordion component, use the following command

npm install @syncfusion/ej2-react-navigations –save


## Adding CSS reference

 Add components style as given below in `src/App.css`.

```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-navigations/styles/material.css';

To refer App.css in the application then import it in the src/App.tsx file.

Initialize the Toolbar with commands

The Toolbar can be rendered by defining an array of items. An item is rendered with text by defining the default item type as a Button. For more information about item configuration, refer the Item Configuration section.

  • Import the Toolbar component to your src/App.tsx file using following code.
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";

const ReactApp = () => {
  return (
    <ToolbarComponent id='toolbar'>
      <ItemsDirective>
        <ItemDirective text="Cut" />
        <ItemDirective text="Copy" />
        <ItemDirective text="Paste" />
        <ItemDirective type="Separator" />
        <ItemDirective text="Bold" />
        <ItemDirective text="Italic" />
        <ItemDirective text="Underline" />
      </ItemsDirective>
    </ToolbarComponent>
  );
}
export default ReactApp;
  • Now, run the application in the browser using the following command.
npm start

Initialize the Toolbar using HTML elements

The Toolbar component can be rendered based on the given HTML element using <ToolbarComponent>. You need to follow the below structure of HTML elements to render the Toolbar inside the <ToolbarComponent> tag.

   <ToolbarComponent>   --> Root Toolbar Element
    <div>      --> Toolbar Items Container
       <div>   --> Toolbar Item Element
       </div>
    </div>
  </ToolbarComponent>
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from 'react-dom';

const ReactApp = () => {
    return (<ToolbarComponent>
      <div>
        <div><button className='e-btn e-tbar-btn'>Cut</button> </div>
        <div><button className='e-btn e-tbar-btn'>Copy</button> </div>
        <div><button className='e-btn e-tbar-btn'>Paste</button> </div>
        <div className='e-separator'> </div>
        <div><button className='e-btn e-tbar-btn'>Bold</button> </div>
        <div><button className='e-btn e-tbar-btn'>Italic</button> </div>
      </div>
    </ToolbarComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from 'react-dom';

const ReactApp = () => {
  return (
    <ToolbarComponent>
      <div>
        <div><button className='e-btn e-tbar-btn'>Cut</button> </div>
        <div><button className='e-btn e-tbar-btn'>Copy</button> </div>
        <div><button className='e-btn e-tbar-btn'>Paste</button> </div>
        <div className='e-separator'> </div>
        <div><button className='e-btn e-tbar-btn'>Bold</button> </div>
        <div><button className='e-btn e-tbar-btn'>Italic</button> </div>
      </div>
    </ToolbarComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Toolbar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .custom_bold .e-tbar-btn-text {
            font-weight: 900;
        }

        .custom_italic .e-tbar-btn-text {
            font-style: italic;
        }

        .custom_underline .e-tbar-btn-text {
            text-decoration: underline red;
        }

        .e-txt-casing .e-tbar-btn-text {
            font-variant: small-caps;
        }

        .e-tbar-btn .e-icons {
            font-family: 'Material_toolbar';
            font-size: 16px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='toolbar'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

See Also

NOTE

You can refer to our React Toolbar feature tour page for its groundbreaking feature representations. You can also explore our React Toolbar Example that shows you how to render the Toolbar in React.