react-text-selection-popover

A react component that lets you render a popover in relation to the current text selection.

 

Install

``bash
npm install --save react-text-selection-popover
`

Usage

`tsx
import css from '@emotion/css'

render={
({ clientRect, isCollapsed, textContent }) => {
if (clientRect == null || isCollapsed) return null

// I'm using emotion for this example but you can use anything really
const style = css
position: absolute;
left: ${clientRect.left + clientRect.width / 2}px;
top: ${clientRect.top - 40}px;
margin-left: -75px;
width: 150px;
background: blue;
font-size: 0.7em;
pointer-events: none;
text-align: center;
color: white;
border-radius: 3px;


return

Selecting {(textContent || '').length} characters

}
}
/>
`

$3

| name | type | description |
| --- | ---- | --- |
| render | ({ clientRect, isCollapsed, textContent }) => {} | __required__ Render prop for rendering your popover, see above for usage |
| mount | HTMLElement | Dom Element that Popover will be rendered into (This component uses React Portals. Defaults to document.body |
| target | HTMLElement` | Dom Element which the popover is constrained to |

Shoutouts

This was originally written during some freelance work for Spectrum. Shoutout to their awesomeness for letting me do all my work for them in the open!

Work with me?

I build editors for companies, or help their teams do so. Hit me up on my website to get in touch about a project.