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

Question

I have a React application which displays some spans:

Hello my name  is &l         


        

Answer 1

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.