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

Enable ripple for Switch label in React Switch component

25 Jan 2023 / 1 minute to read

By default, label with ripple effect is not available in Switch. You can achieve this by using rippleMouseHandler method.

The following example illustrates how to enable ripple effect for labels in Switch component.

Source
Preview
app.jsx
index.html
app.tsx
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
import { rippleMouseHandler } from '@syncfusion/ej2-buttons';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render Switch with checked state.
function App() {
    function onCreated() {
        // Function to handle ripple effect for Switch with label.
        document.querySelector('.lSize label').addEventListener('mouseup', rippleHandler);
        document.querySelector('.lSize label').addEventListener('mousedown', rippleHandler);
        function rippleHandler(e) {
            const rippleSpan = e.target.parentElement.nextElementSibling.querySelector('.e-ripple-container');
            if (rippleSpan) {
                rippleMouseHandler(e, rippleSpan);
            }
        }
    }
    return (<table className='size'>
            <tr>
                <td className='lSize'>
                    <label htmlFor='switch1'>USB Tethering</label>
                </td>
                <td>
                    <SwitchComponent id="switch1" created={onCreated} checked={true}/>
                </td>
            </tr>
        </table>);
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Switch</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/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/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='switch'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
import { rippleMouseHandler } from '@syncfusion/ej2-buttons';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render Switch with checked state.
function App() {
    function onCreated(): void {
        // Function to handle ripple effect for Switch with label.
        (document.querySelector('.lSize label') as HTMLElement).addEventListener('mouseup', rippleHandler);
        (document.querySelector('.lSize label') as HTMLElement).addEventListener('mousedown', rippleHandler);
        function rippleHandler(e: MouseEvent): void  {
            const rippleSpan = (e.target as HTMLElement).parentElement.nextElementSibling.querySelector('.e-ripple-container');
            if (rippleSpan) {
                rippleMouseHandler(e, rippleSpan);
            }
        }
    }
    return (
        <table className='size'>
            <tr>
                <td className='lSize'>
                    <label htmlFor='switch1'>USB Tethering</label>
                </td>
                <td>
                    <SwitchComponent id="switch1" created={onCreated} checked={true} />
                </td>
            </tr>
        </table>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));

While accessing HTML Elements we got the exception ‘object is possibly null’ due to ‘strictNullChecks’ option. So you can disable it in ‘tsconfig.json’ file.

Previous
Next