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.
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'));
<!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.1.55/ej2-base/styles/fabric.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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<{}, {}> {
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'));
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.