Getting started with React Toolbar component

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

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

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

create-react-app quickstart

cd quickstart

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com 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.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-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.

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";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public render() {
    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>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));

Now, run the application in the browser using the following command.

npm start

The output will be as follows:

Source

Preview

index.jsx

index.tsx

index.html

import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class ReactApp extends React.Component {
    render() {
        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>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));

import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public render() {
    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>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));

<!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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.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>
</head>

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

</html>

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>