text: import React from 'react';
  import ReactDOM from 'react-dom';
  
  import JqxToolBar from '../../../jqwidgets-react/react_jqxtoolbar.js';
  
  class App extends React.Component {
      render () {
          let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
  
          let initTools = (type, index, tool, menuToolIninitialization) => {
              let icon = document.createElement('div');
              if (type == 'toggleButton') {
                  icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
              }
              switch (index) {
                  case 0:
                      icon.className += 'jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic';
                      icon.setAttribute('title', 'Bold');
                      tool[0].appendChild(icon);
                      break;
                  case 1:
                      icon.className += 'jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic';
                      icon.setAttribute('title', 'Italic');
                      tool[0].appendChild(icon);
                      break;
                  case 2:
                      icon.className += 'jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic';
                      icon.setAttribute('title', 'Underline');
                      tool[0].appendChild(icon);
                      break;
                  case 3:
                      tool.jqxToggleButton({ width: 80, toggled: true });
                      tool[0].innerText = 'Enabled';
                      tool.on('click', () =>
                      {
                          let toggled = tool.jqxToggleButton('toggled');
                          if (toggled)
                          {
                              tool.text('Enabled');
                          } else
                          {
                              tool.text('Disabled');
                          }
                      });
                      break;
                  case 4:
                      tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                      break;
                  case 5:
                      tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                      break;
                  case 6:
                      tool.jqxInput({ width: 200, placeHolder: 'Type here to search...' });
                      break;
                  case 7:
                      let button = document.createElement('div');
                      button.innerHTML = "<img src='../../../../images/administrator.png' title='Custom tool' />";
                      tool[0].appendChild(button);
                      tool.jqxButton({ height: 15 });
                      break;
              }
          }
          return (
              <JqxToolBar
                width={800} height={35}
                initTools={initTools} tools={tools}
              />
          )
      }
  }
  
  ReactDOM.render(<App />, document.getElementById('app'));
  