# react-click-to-select

**Repository Path**: mirrors_mapbox/react-click-to-select

## Basic Information

- **Project Name**: react-click-to-select
- **Description**: react component that enables click-to-select interaction
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-09
- **Last Updated**: 2025-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-click-to-select

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

[![npm](https://img.shields.io/npm/v/@mapbox/react-click-to-select.svg)]()
[![npm license](https://img.shields.io/npm/l/@mapbox/react-click-to-select.svg)](https://github.com/mapbox/react-click-to-select/blob/master/LICENSE.txt)

## install

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

## use

```jsx
<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:

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

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

This avoids React warnings:

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