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

Enable ripple for Switch label in React Switch component

23 Feb 2021 / 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.tsx
index.html
app.jsx
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.
class App extends React.Component<{}, {}> {
    public 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);
            }
        }
    }
  public render() {
    return (
        <table className='size'>
            <tr>
                <td className='lSize'>
                    <label htmlFor='switch1'>USB Tethering</label>
                </td>
                <td>
                    <SwitchComponent id="switch1" created={this.onCreated} checked={true} />
                </td>
            </tr>
        </table>
    );
  }
}
ReactDom.render(<App />, document.getElementById('switch'));
<!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/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
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.
class App extends React.Component {
    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);
            }
        }
    }
    render() {
        return (<table className='size'>
            <tr>
                <td className='lSize'>
                    <label htmlFor='switch1'>USB Tethering</label>
                </td>
                <td>
                    <SwitchComponent id="switch1" created={this.onCreated} checked={true}/>
                </td>
            </tr>
        </table>);
    }
}
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