Add toggle button in React Toolbar component

29 Aug 202320 minutes to read

Toolbar supports to add a toggle Button by using the template property. Refer below steps

By using Toolbar template property, pass required HTML String to render toggle button.

  <ItemDirective template='<button class="e-btn" id="media_btn"></button>' />

Now render the toggle Button into the targeted element in Toolbar created event handler and bind click event for it. On clicking the toggle Button, change the required icon and content based on current active state.

index.jsx
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

const ReactApp = () => {
  const zoomBtnRef = useRef<ButtonComponent>(null);
  const mediaBtnRef = useRef<ButtonComponent>(null);
  const undoBtnRef = useRef<ButtonComponent>(null);
  const filterBtnRef = useRef<ButtonComponent>(null);
  const visibleBtnRef = useRef<ButtonComponent>(null);
  const contentRef = useRef(null);

  //Toggle button click event handlers
  const zoomBtnClick = () => {
    if (zoomBtnRef.current) {
      zoomBtnRef.current.element.onclick = () => {
        if (zoomBtnRef.current.element.classList.contains('e-active')) {
          zoomBtnRef.current.iconCss = 'e-icons e-zoomout-icon';
        } else {
          zoomBtnRef.current.iconCss = 'e-icons e-zoomin-icon';
        }
      };
    }
  }

  const mediaBtnClick = () => {
    if (mediaBtnRef.current) {
      mediaBtnRef.current.element.onclick = () => {
        if (mediaBtnRef.current.element.classList.contains('e-active')) {
          mediaBtnRef.current.iconCss = 'e-icons e-pause-icon';
        } else {
          mediaBtnRef.current.iconCss = 'e-icons e-play-icon';
        }
      };
    }
  }

  const undoBtnClick = () => {
    if (undoBtnRef.current) {
      undoBtnRef.current.element.onclick = () => {
        if (undoBtnRef.current.element.classList.contains('e-active')) {
          undoBtnRef.current.iconCss = 'e-icons e-redo-icon';
        } else {
          undoBtnRef.current.iconCss = 'e-icons e-undo-icon';
        }
      };
    }
  }

  const filterBtnClick = () => {
    if (filterBtnRef.current) {
      filterBtnRef.current.element.onclick = () => {
        if (filterBtnRef.current.element.classList.contains('e-active')) {
          filterBtnRef.current.iconCss = 'e-icons e-filternone-icon';
        } else {
          filterBtnRef.current.iconCss = 'e-icons e-filter-icon';
        }
      };
    }
  }

  const visibleBtnClick = () => {
    if (visibleBtnRef.current) {
      visibleBtnRef.current.element.onclick = () => {
        if (visibleBtnRef.current.element.classList.contains('e-active')) {
          contentRef.current.style.display = 'none';
          visibleBtnRef.current.content = 'Show';
          visibleBtnRef.current.iconCss = 'e-icons e-show-icon';
        } else {
          contentRef.current.style.display = 'block';
          visibleBtnRef.current.content = 'Hide';
          visibleBtnRef.current.iconCss = 'e-icons e-hide-icon';
        }
      };
    }
  }

  const zoomBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-zoomin-icon' isToggle={true} ref={zoomBtnRef}></ButtonComponent>
    </div>);
  }
  const mediaBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-play-icon' isToggle={true} ref={mediaBtnRef}></ButtonComponent>
    </div>);
  }
  const undoBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-undo-icon' isToggle={true} ref={undoBtnRef}></ButtonComponent>
    </div>);
  }
  const filterBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-filter-icon' isToggle={true} ref={filterBtnRef}></ButtonComponent>
    </div>);
  }
  const visibleBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-hide-icon' isToggle={true} content='Hide' ref={visibleBtnRef}></ButtonComponent>
    </div>);
  }
  const divMargin = { margin: '25px 0' };

  return (
    <div className='control-pane'>
      <div className='control-section tbar-control-section'>
        <div className='control toolbar-sample tbar-sample' style={divMargin}>
          <ToolbarComponent id="ej2Toolbar">
            <ItemsDirective>
              <ItemDirective template={mediaBtn} click={mediaBtnClick} />
              <ItemDirective type='Separator' />
              <ItemDirective template={zoomBtn} click={zoomBtnClick} />
              <ItemDirective type='Separator' />
              <ItemDirective template={undoBtn} click={undoBtnClick} />
              <ItemDirective type='Separator' />
              <ItemDirective template={filterBtn} click={filterBtnClick} />
              <ItemDirective type='Separator' />
              <ItemDirective template={visibleBtn} click={visibleBtnClick} />
            </ItemsDirective>
          </ToolbarComponent>
          <br></br>
          <div ref={contentRef}>
            This content will be hidden, when you click on hide button and toggle
            get an active state as show, otherwise it will be visible.
          </div>
        </div>
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

const ReactApp = () => {
  const zoomBtnRef = useRef<ButtonComponent>(null);
  const mediaBtnRef = useRef<ButtonComponent>(null);
  const undoBtnRef = useRef<ButtonComponent>(null);
  const filterBtnRef = useRef<ButtonComponent>(null);
  const visibleBtnRef = useRef<ButtonComponent>(null);
  const contentRef = useRef(null);

  //Toggle button click event handlers
  const zoomBtnClick = () => {
    if (zoomBtnRef.current) {
      zoomBtnRef.current.element.onclick = () => {
        if (zoomBtnRef.current.element.classList.contains('e-active')) {
          zoomBtnRef.current.iconCss = 'e-icons e-zoomout-icon';
        } else {
          zoomBtnRef.current.iconCss = 'e-icons e-zoomin-icon';
        }
      };
    }
  }

  const mediaBtnClick = () => {
    if (mediaBtnRef.current) {
      mediaBtnRef.current.element.onclick = () => {
        if (mediaBtnRef.current.element.classList.contains('e-active')) {
          mediaBtnRef.current.iconCss = 'e-icons e-pause-icon';
        } else {
          mediaBtnRef.current.iconCss = 'e-icons e-play-icon';
        }
      };
    }
  }

  const undoBtnClick = () => {
    if (undoBtnRef.current) {
      undoBtnRef.current.element.onclick = () => {
        if (undoBtnRef.current.element.classList.contains('e-active')) {
          undoBtnRef.current.iconCss = 'e-icons e-redo-icon';
        } else {
          undoBtnRef.current.iconCss = 'e-icons e-undo-icon';
        }
      };
    }
  }

  const filterBtnClick = () => {
    if (filterBtnRef.current) {
      filterBtnRef.current.element.onclick = () => {
        if (filterBtnRef.current.element.classList.contains('e-active')) {
          filterBtnRef.current.iconCss = 'e-icons e-filternone-icon';
        } else {
          filterBtnRef.current.iconCss = 'e-icons e-filter-icon';
        }
      };
    }
  }

  const visibleBtnClick = () => {
    if (visibleBtnRef.current) {
      visibleBtnRef.current.element.onclick = () => {
        if (visibleBtnRef.current.element.classList.contains('e-active')) {
          contentRef.current.style.display = 'none';
          visibleBtnRef.current.content = 'Show';
          visibleBtnRef.current.iconCss = 'e-icons e-show-icon';
        } else {
          contentRef.current.style.display = 'block';
          visibleBtnRef.current.content = 'Hide';
          visibleBtnRef.current.iconCss = 'e-icons e-hide-icon';
        }
      };
    }
  }

  const zoomBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-zoomin-icon' isToggle={true} ref={zoomBtnRef}></ButtonComponent>
    </div>);
  }
  const mediaBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-play-icon' isToggle={true} ref={mediaBtnRef}></ButtonComponent>
    </div>);
  }
  const undoBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-undo-icon' isToggle={true} ref={undoBtnRef}></ButtonComponent>
    </div>);
  }
  const filterBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-filter-icon' isToggle={true} ref={filterBtnRef}></ButtonComponent>
    </div>);
  }
  const visibleBtn = () => {
    return (<div>
      <ButtonComponent cssClass='e-flat' iconCss='e-icons e-hide-icon' isToggle={true} content='Hide' ref={visibleBtnRef}></ButtonComponent>
    </div>);
  }
  const divMargin = { margin: '25px 0' };

  return (
    <div className='control-pane'>
      <div className='control-section tbar-control-section'>
        <div className='control toolbar-sample tbar-sample' style={divMargin}>
          <ToolbarComponent id="ej2Toolbar">
            <ItemsDirective>
              <ItemDirective template={mediaBtn} click={mediaBtnClick} />
              <ItemDirective type='Separator' />
              <ItemDirective template={zoomBtn} click={zoomBtnClick} />
              <ItemDirective type='Separator' />
              <ItemDirective template={undoBtn} click={undoBtnClick} />
              <ItemDirective type='Separator' />
              <ItemDirective template={filterBtn} click={filterBtnClick} />
              <ItemDirective type='Separator' />
              <ItemDirective template={visibleBtn} click={visibleBtnClick} />
            </ItemsDirective>
          </ToolbarComponent>
          <br></br>
          <div ref={contentRef}>
            This content will be hidden, when you click on hide button and toggle
            get an active state as show, otherwise it will be visible.
          </div>
        </div>
      </div>
    </div>
  );
}
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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
      <div id="toolbar" class="toggle">
        <div id="loader">LOADING....</div>
      </div>
      <br />
    </div>
</body>

</html>