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

Initialize ButtonGroup using util function in React ButtonGroup component

25 Jan 2023 / 2 minutes to read

Though, it is a CSS component for easy initialization of ButtonGroup createButtonGroup util function can be used.

To use createButtonGroup util function, SplitButton dependencies should be configured and it should be added in system.config.js.

Using createButtonGroup method, the Button options, selector, and cssClass is passed and the corresponding classes is added to the elements.

Create basic ButtonGroup

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

For radio type ButtonGroup

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

For checkbox type ButtonGroup

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

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

Source
Preview
app.jsx
index.html
app.tsx
Copied to clipboard
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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Button</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.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.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='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
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.

Previous
Next