how to show text that can not be selected/copy using react

Question

I noticed some sites publish text that no one can select or copy. How can this be achieved in React? is it possible? Sometimes I believe they are using some images but this might be a solution that uses too many bytes.

Answer 1

You can use user-select: none; on the elements you don't want to be selectable by the user.

function App() {
  return <div style={{ userSelect: "none" }}>Unselectable text</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>