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