How to init with util in React Button Group

4 Sep 20268 minutes to read

The createButtonGroup utility function provides an alternative approach to initialize React Button Group components with minimal setup. This function automatically applies ButtonGroup styling and behavior to elements.

To use the createButtonGroup utility function, configure the SplitButton dependencies in system.config.js.

The createButtonGroup method accepts Button options, element selectors, and CSS classes, then applies the corresponding styling to the elements.

Create basic React Button Group

To create a basic React Button Group, the target element along with the button elements should be created and createButtonGroup is to be imported from ej2-splitbuttons.

For radio type React Button Group

To create a radio type React Button Group, the target element along with the input elements should be created with type radio.

For checkbox type React Button Group

Checkbox type React Button Group creation is similar to radio type React Button Group, instead the type of the input elements should be checkbox.

The following example illustrates how to create React Button Group using createButtonGroup function for basic, checkbox, and radio type behaviors.

import { createButtonGroup } from '@syncfusion/ej2-splitbuttons';
import { useEffect } from "react";
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup using `util` function.
function App() {
    useEffect(() => {
        createButtonGroup('#basic', {
            buttons: [
                { content: 'HTML' },
                { content: 'CSS' },
                { content: 'Javascript' }
            ]
        });
        createButtonGroup('#checkbox', {
            buttons: [
                { content: 'Bold' },
                { content: 'Italic' },
                { content: 'Undeline' }
            ]
        });
        createButtonGroup('#radio', {
            buttons: [
                { content: 'Left' },
                { content: 'Center' },
                { content: 'Right' }
            ]
        });
    }, []);
    return (<div>
      <h5>Normal behavior</h5>
      <div id='basic'>
        <button />
        <button />
        <button />
      </div>
      <h5>Checkbox type behavior</h5>
      <div id='checkbox'>
        <input type="checkbox" id="checkbold" name="font" value='bold'/>
        <input type="checkbox" id="checkitalic" name="font" value='italic'/>
        <input type="checkbox" id="checkunderline" name="font" value='underline'/>
      </div>
      <h5>Radiobutton type behavior</h5>
      <div id='radio'>
        <input type="radio" id="radioleft" name="align" value='left'/>
        <input type="radio" id="radiomiddle" name="align" value='middle'/>
        <input type="radio" id="radioright" name="align" value='right'/>
      </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));
import { createButtonGroup } from '@syncfusion/ej2-splitbuttons';
import { useEffect } from "react";
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup using `util` function.
function App() {
 useEffect(() => {
    createButtonGroup('#basic', {
      buttons: [
          { content: 'HTML' },
          { content: 'CSS' },
          { content: 'Javascript'}
      ]
  });

  createButtonGroup('#checkbox', {
      buttons: [
          { content: 'Bold' },
          { content: 'Italic' },
          { content: 'Undeline'}
      ]
  });

  createButtonGroup('#radio', {
      buttons: [
          { content: 'Left' },
          { content: 'Center' },
          { content: 'Right'}
      ]
  });
  }, []);
  
  return (
    <div>
      <h5>Normal behavior</h5>
      <div id='basic'>
        <button/>
        <button/>
        <button/>
      </div>
      <h5>Checkbox type behavior</h5>
      <div id='checkbox'>
        <input type="checkbox" id="checkbold" name="font" value='bold' />
        <input type="checkbox" id="checkitalic" name="font" value='italic' />
        <input type="checkbox" id="checkunderline" name="font" value='underline' />
      </div>
      <h5>Radiobutton type behavior</h5>
      <div id='radio'>
        <input type="radio" id="radioleft" name="align" value='left'/>
        <input type="radio" id="radiomiddle" name="align" value='middle'/>
        <input type="radio" id="radioright" name="align" value='right'/>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

If null value is passed in button options, then that particular button will be skipped from processing in createButtonGroup util function.