A higher-order component that selects elements contained within it on click

react-click-to-select

A React component that selects the text / elements contained within when they're clicked.

install

npm install --save @mapbox/react-click-to-select

use

<ClickToSelect>
  this text will be selected when clicked
</ClickToSelect>

By default ClickToSelect contains the children within a span element, but you
can use a div instead:

<ClickToSelect containerElement="div">
  <p>
    this text will be selected when clicked
  </p>
</ClickToSelect>

You can pass a function that will be called when text is selected. This is useful for doing things like showing a tooltip with a prompt to copy.

<ClickToSelect onSelect={myFunc}>
  <p>
    this text will be selected when clicked
  </p>
</ClickToSelect>

This avoids React warnings:

validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

GitHub