react-text-selection-popover

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

Install

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

Usage

import css from '@emotion/css'

<Popover
  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 <div className={style}>
        Selecting {(textContent || '').length} characters
      </div>
    }
  }
/>

Props

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.