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 w3wiki</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",
    },
};

How to Disable Text Selection in ReactJS ?

In this article, we will see how to disable the text selection in ReactJS.

Tags:

#React-Questions #ReactJS #Web Technologies

Steps to Create React Application:

Steps to run:

Disable Text Selection for Particular Elements

Javascript

How to Disable Text Selection in ReactJS ?

Similar Reads

Contact Us