React onTouchCancel Event

React onTouchCancel event fires when touch interrupts. Similar to other elements in it, we have to pass a function for process execution.

It is similar to the HTML DOM touchcancel event but uses the camelCase convention in React.

Syntax:

onTouchCancel={function}

Parameter :

• function that will call when touch interrupts.

Return type:

• event: It is an event object containing information about the event like target element and values

Example 1 : In this example, we implemented the TouchCancel area. If the user interrupts their touch inside the area, they will get a message on the console through the function.

/*App.css*/
.App {
	min-width: 30vw;
	margin: auto;
	text-align: center;
	color: green;
	font-size: 23px;
}

.Shaded {
	background-color: lightgray;
	height: 200px;
	width: 300px;
	margin: auto;
	border-radius: 6px;
}

// App.js
import "./App.css"
const App = () => {
	const function1 = (event) => {
		console.log("Touch Cancel Fires!")
	}
	return (
		<div className="App">
			<h1>GeeksforGeeks</h1>
			<h2>Touch and cancel your touch to fire event</h2>
			<div className="Shaded" onTouchCancel={function1}>
			</div>
		</div>
	);
}
export default App;

Output :

Example 2 : In this example, we implemented an area where when user interrupts there touch user will get a alert message that TouchCancel Fired.

/*App.css*/
.App {
    min-width: 30vw;
    margin: auto;
    text-align: center;
    color: green;
    font-size: 23px;
}

.Shaded {
    background-color: lightgray;
    height: 200px;
    width: 300px;
    margin: auto;
    border-radius: 6px;
}

// App.js
import "./App.css"
const App = () => {
	const function1 = (event) => {
		alert("Touch Cancel Event Fires!")
	}
	return (
		<div className="App">
			<h1>GeeksforGeeks</h1>
			<h2>Interrupt your touch to fire Event</h2>
			<div className="Shaded" onTouchCancel={function1}>
			</div>
		</div>
	);
}
export default App;

Output: