React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Render other components in Toolbar using template in React Toolbar component

02 Feb 2023 / 1 minute to read

You can render other components inside Toolbar using React template. Through this, we can add content as other components directly with all functionalities to our Toolbar. Follow the below guidelines for using the other components as template in Toolbar.

  • Declare a template within the function returns jsx element. If the template does not need arguments no need to pass the properties.
  • Assign the function as value for the template property.
Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
function App() {
    function contentTemplate1() {
        return (<ButtonComponent>Click me</ButtonComponent>);
    }
    function contentTemplate2() {
        return (<DatePickerComponent></DatePickerComponent>);
    }
    return (<div id='container'>
  <ToolbarComponent id="toolbar">
    <ItemsDirective>
      <ItemDirective template={contentTemplate1}/>
      <ItemDirective template={contentTemplate2}/>
      <ItemDirective text="Cut"/>
      <ItemDirective text="Copy"/>
      <ItemDirective text="Paste"/>
      <ItemDirective type="Separator"/>
      <ItemDirective text="Bold"/>
      <ItemDirective text="Italic"/>
      <ItemDirective text="Underline"/>
    </ItemsDirective>
  </ToolbarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Tab</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/20.4.48/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id='element'>
            <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';


function App() {

  function contentTemplate1(): JSX.Element {
return (<ButtonComponent>Click me</ButtonComponent>);
  }
  function contentTemplate2(): JSX.Element {
return (<DatePickerComponent></DatePickerComponent>);
  }
  return (
<div id='container'>
  <ToolbarComponent id="toolbar">
    <ItemsDirective>
      <ItemDirective template={contentTemplate1} />
      <ItemDirective template={contentTemplate2} />
      <ItemDirective text="Cut" />
      <ItemDirective text="Copy" />
      <ItemDirective text="Paste" />
      <ItemDirective type="Separator" />
      <ItemDirective text="Bold" />
      <ItemDirective text="Italic" />
      <ItemDirective text="Underline" />
    </ItemsDirective>
  </ToolbarComponent>
</div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Previous
Next