Getting Started

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

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

Start a new project using create-react-app command as follows

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

cd quickstart

Install the below required dependency package in order to use the Toolbar component in your application.

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

The above package installs toolbar dependencies which are required to render the Toolbar component in React environment.

Toolbar CSS files are available in the ej2-react-navigations package folder. Import the Toolbar component’s required CSS references as follows 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';

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.tsx

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"));

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>

Source

Preview

index.tsx

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>
          <div>
              <div><button class='e-btn e-tbar-btn'>Cut</button> </div>
              <div><button class='e-btn e-tbar-btn'>Copy</button> </div>
              <div><button class='e-btn e-tbar-btn'>Paste</button> </div>
              <div class='e-separator'> </div>
              <div><button class='e-btn e-tbar-btn'>Bold</button> </div>
              <div><button class='e-btn e-tbar-btn'>Italic</button> </div>
            </div>
        </ToolbarComponent>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));

Getting Started

Dependencies

Installation and Configuration

Initialize the Toolbar with commands

Initialize the Toolbar using HTML elements

See Also