How to Disable Text Selection in ReactJS ?
Last Updated :
25 Jul, 2024
In this article, we will see how to disable the text selection in ReactJS.
Prerequisites:
Web applications often provide a valuable feature called text selection, enabling users to easily highlight and copy content from a webpage. However, there are situations where disabling text selection becomes necessary to restrict users from copying or interacting with specific parts of the application.
Syntax:
const noSelectElements =
document.querySelectorAll(".no-select");
noSelectElements.forEach((element) => {
element.style.webkitUserSelect = "none";
element.style.mozUserSelect = "none";
element.style.msUserSelect = "none";
element.style.userSelect = "none";
});
Steps to Create React Application:
Step 1: Create a react application by using this command
npx create-react-app <<My-Project>>
Step 2: After creating your project folder, i.e. TextSelectionApp, use the following command to navigate to it:
cd <<My-Project>>
Project Structure:

There are different approaches to Disable Text Selection Using ReactJS. Let's discuss each of them one by one.
Approach 1: Disable Text Selection for Particular Elements
In this approach, we will use react.js to disable only specific text not all text. the functionality is achieved by employing the useEffect hook. Upon execution, it targets all elements tagged with the "no-select" class and applies styles to them, specifically manipulating properties like webkitUserSelect, mozUserSelect, msUserSelect, and userSelect. By setting these properties to "none," users are effectively prevented from selecting or highlighting any text within those elements.
Example: In this example we are using the above-explained approach.
JavaScript
// App.js file
import React, { useEffect } from "react";
const App = () => {
useEffect(() => {
// Disable text selection for elements
// with class "no-select"
const noSelectElements =
document.querySelectorAll(".no-select");
noSelectElements.forEach((element) => {
element.style.webkitUserSelect = "none";
element.style.mozUserSelect = "none";
element.style.msUserSelect = "none";
element.style.userSelect = "none";
});
}, []);
return (
<div style={styles.body}>
<div style={styles.container}>
<h1>Disable Text Selection Using React</h1>
<div
className="no-select"
style={styles.noSelect}
>
<h1>Welcome To Geeksforgeeks</h1>
<p>This text is not selectable</p>
</div>
<p style={styles.p}>
A Computer Science portal for geeks. It
contains well-written, well-thought, and
well-explained computer science and
programming articles.
</p>
</div>
</div>
);
};
export default App;
const styles = {
body: {
fontFamily: "Arial, sans-serif",
margin: 0,
padding: 0,
},
container: {
maxWidth: "800px",
margin: "0 auto",
padding: "20px",
backgroundColor: "#fff",
border: "1px solid #ccc",
borderRadius: "5px",
boxShadow: "0 0px 10px 0px black",
margin: "4rem",
},
noSelect: {
border: "3px solid green",
padding: "20px",
backgroundColor: "#f9f9f9",
borderRadius: "10px",
marginBottom: "10px",
color: "green",
},
p: {
lineHeight: "1.6",
},
};
Steps to run:
To open the application, use the Terminal and enter the command listed below.
npm start
Output:
Approach 2: Toggle Text Selection On and Off
This example showcases a React component that effortlessly switches between two states. It empowers users to enable or disable text selection and alter the background color of a button. By utilizing the useState hook, this component effectively manages these states. With just a simple click of the button, users can seamlessly toggle between a captivating blue and red background while simultaneously controlling the ability to select text on the page.
Example: In this example we are using the above-explained approach.
JavaScript
// App.js file
import React, { useState } from "react";
const App = () => {
const [allowTextSelection, setAllowTextSelection] =
useState(true);
const [isBlueBackground, setIsBlueBackground] =
useState(true);
const toggleTextSelection = () => {
setAllowTextSelection(!allowTextSelection);
};
const handleButtonClick = () => {
// Toggle between two colors
setIsBlueBackground(!isBlueBackground);
// Toggle text selection
toggleTextSelection();
};
const bodyStyle = {
fontFamily: "Arial, sans-serif",
margin: 0,
padding: 0,
backgroundColor: "#f5f5f5",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
};
const containerStyle = {
maxWidth: "600px",
padding: "20px",
backgroundColor: "#fff",
border: "1px solid #ccc",
borderRadius: "8px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
textAlign: "center",
};
const buttonStyle = {
backgroundColor: isBlueBackground
? "#007bff"
: "red", // Toggle between two colors
color: "white",
border: "none",
padding: "10px 20px",
borderRadius: "5px",
cursor: "pointer",
fontSize: "16px",
transition: "background-color 0.3s ease",
};
if (!allowTextSelection) {
bodyStyle.userSelect = "none";
}
return (
<div style={bodyStyle}>
<div style={containerStyle}>
<h1>Welcome To GeeksforGeeks</h1>
<p>
A Computer Science portal for geeks. It
contains well-written, well-thought, and
well-explained computer science and
programming articles.
</p>
<button
id="toggle-button"
style={buttonStyle}
onClick={handleButtonClick}
>
Toggle Text Selection
</button>
</div>
</div>
);
};
export default App;
Output:
Similar Reads
How to Disable Text Selection using jQuery? In this article, we are going to learn how to disable text Selection using jQuery. Disabling text selection refers to preventing users from highlighting or selecting text content on a webpage. Text seÂlection is a common feature in numerous web applications. However, there might arise situations whe
4 min read
How to Disable Text Selection in Tailwind CSS? Tailwind CSS can also be used for disabling text selection, providing a straightforward way to enhance user experience in web applications. By using Tailwind's utility classes, developers can easily control the selectability of text elements, preventing unwanted highlighting during interactions.This
2 min read
How to Disable Text Selection in HTML with CSS? Disabling text selection in HTML can be useful in scenarios where you want to prevent users from copying text, dragging elements, or accidentally selecting text while interacting with web page elements.These are the following approaches:Table of ContentUsing user-select PropertyUsing Vendor Prefixes
2 min read
How To Set Default Value In Select using ReactJS? When building forms in ReactJS, it is common to work with select dropdowns where users can choose an option from a list. Sometimes, you may want to set a default value in the select dropdown to pre-select an option when the form loads. In this article, weâll explore different approaches to set a def
3 min read
How to disable dropdown in ReactJS? Disable dropdown means the user can't interact with the dropdown or its options. Material UI for React has this component available for us and it is very easy to integrate. We can disable the dropdown using the following approach. Creating React Application And Installing Module: Step 1: Create a Re
2 min read
How to Disable Text Selection Highlighting using CSS? The user-select property in CSS is used to disable text selection highlighting in CSS. This feature is useful when we need to disable the copy option of content.Syntaxuser-select: none;-webkit-user-select: none; /* Chrome, Opera */-webkit-touch-callout: none; /* Safari */-moz-user-select: none; /* F
2 min read
How to use HTML <select> tag in ReactJS ? HTML <select> tag in react is a common web development component used for dynamic form input or as a select menu. It provides multiple selection options in the form of a dropdown menu. It enables the web page to render a select box with the options. The <select> Â tag is used as an outer
2 min read
How To Copy Text To The Clipboard In ReactJS? In ReactJS, you can copy text to the clipboard using two methods. One way is to use the copy-to-clipboard package, which provides a simple copy() function to handle the task. Alternatively, you can use the browser's built-in window.navigator.clipboard.writeText() method, which copies text to the cli
4 min read
React Suite Dropdown Disabled State React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The dropdown component allows the user to provide navigation that uses a select picker if you want to select a value. React Suite Dropdown Disabled help to disa
2 min read
How to Set Selected Option of a Select in React? In the React setting the selected option of a Select can be achieved using different approaches including using the native HTML <select> element and using third-party select components like react-select. We will discuss two approaches to Setting selected options of a select in React: Table of
3 min read