Select Text & highlight selection or get selection value (React)

I think that it's the right way...

 document.onmouseup = () => {
   console.log(window.getSelection().toString());
 };

There is no React-specific solution for this. Just use window.getSelection API.

To output highlighted text run window.getSelection().toString()

Use onMouseUp and onDoubleClick events to detect to call method, that will determine selection using JavaScript Selection API.

Use window.getSelection() to get selection object.

To get selected text, use window.getSelection.toString().

To get coordinates of selected text area for rendering popup menu, use selection.getRangeAt(0).getBoundingClientRect().

As an example implementation, take a look at react-highlight library.

Related