Skip to content

Latest commit

 

History

History
61 lines (45 loc) · 1.97 KB

README.md

File metadata and controls

61 lines (45 loc) · 1.97 KB

react-text-selection-popover

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

NPM JavaScript Style Guide

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.