How to add a Toggle Button as a Toolbar item in React

4 Sep 202620 minutes to read

The React Toolbar supports adding a toggle Button by using the template property. Refer to the steps below.

  1. Using the React Toolbar template property, pass the required HTML string to render the toggle button.
  <ItemDirective template='<button class="e-btn" id="media_btn"></button>' />
  1. Now render the toggle Button into the targeted element in React 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.
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/34.2.2/tailwind3.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>
</head>

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

</html>