@mapbox/react-click-to-select

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

Usage no npm install needed!

<script type="module">
  import mapboxReactClickToSelect from 'https://cdn.skypack.dev/@mapbox/react-click-to-select';
</script>

README

react-click-to-select

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

npm npm license

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>.