Disable the text selection highlighting in React
In this post we will give you information about Disable the text selection highlighting in React. Hear we will give you detail about Disable the text selection highlighting in ReactAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to disable the text selection highlighting from a webpage in React.
Consider, that we have the following text in our React app:
import React from "react";function App { return ( <div> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> );}export default App;Normally, if we double click on some text in the browser it will be selected/highlighted by default to prevent that behavior follow the below tutorial.
To disable the text selection highlighting in React, we can set the css property user-select to a value “none”.
Here is an example:
import React from "react";function App { return ( <div> <p className="disable-text-selection"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> );}export default App;.disable-text-selection{ -moz-user-select:none; /* firefox */ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE*/ user-select: none; /* Standard syntax */}In the example above, we have added the browser prefixes for the user-select property, so it works the same in all browsers.
The user-select css property controls the behavior of a text selection for the HTML elements.
By setting a user-select property with the value none, we can disable the text selection on a webpage.
In case, if you want to disable the text selection for an entire webpage instead of a particular element, you can add the below CSS properties to your body tag.
body { -moz-user-select:none; /* firefox */ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE */ user-select: none; /* Standard syntax */}Hope this code and post will helped you for implement Disable the text selection highlighting in React. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs