select

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

May 15, 2018
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

Recommended