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

Question

I have a React application which displays some spans:

<span>Hello</span> <span>my</span> <span>name</span> <span> is </span> ...

I would like the user to select the text with the mouse like so

..and then get the selected value, or highlight the text etc. How would I do this in React? I am not sure what event handlers to use and how to get hold of the current selection! A minimal example or a hint would be appreciated!

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.