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.
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'));
<!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>
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.