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.

Table of Content

Disable Text Selection for Particular Elements
Toggle Text Selection On and Off

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:

How to Disable Text Selection in HTML with CSS?

saurabhkumarsharma05

Improve

Article Tags :