react-hook-selection :clipboard:

A React hook for accessing user selection.

Installation

Using npm:

npm install --save react-hook-selection

Using yarn:

yarn add react-hook-selection

Usage

import React from 'react'
import useScreenOrientation from 'react-hook-selection'

const ComponentWithSelection = () => {
  const selection = useSelection()

  return (
    <Fragment>
      <p style={{userSelect: 'none'}}>
        Selection is: {JSON.stringify(selection)}
      </p>
      <p>Integer faucibus nec risus a ornare. Lorem ipsum <strong> dolor sit amet</strong>, consectetur adipiscing elit. Donec et purus sit amet lacus vulputate ultricies. Donec tincidunt, urna vitae sollicitudin mattis, erat massa placerat lorem, ut pharetra nulla dolor ullamcorper felis. Suspendisse id lectus sit amet <a href="https://npmjs.com">dolor egestas rhoncus</a> id non dui. Pellentesque sed rhoncus turpis, sed efficitur lacus. Aliquam erat volutpat. Morbi ornare pulvinar libero vitae maximus. Aliquam erat volutpat. Nam consequat augue vel eros tincidunt aliquam. In sodales pretium pulvinar. Donec in hendrerit urna. Mauris pharetra diam at justo porta viverra. Sed ipsum mauris, imperdiet et turpis sed, suscipit vestibulum neque. Sed auctor tortor vitae tellus feugiat, sit amet tincidunt lectus ultrices.</p>
    </Fragment>
  )
}

Caveats

If you interpolate user selection directly in JSX, in order to avoid the browser potentially going absolutely bananas, make sure that the element that renders the selection as its content has user selection disabled, just like in the usage example above.

Notes

Selection value is only accessible in plain text format. So even if the user has selected multiple elements with complex structure and rich formatting, this hook will only be able to provide you with the text content of the selected elements.

Contributions

Contributions are welcome. File bug reports, create pull requests, feel free to reach out at [email protected].

Licence

LGPL-3.0