React Text Selection Popover Save

Selection based Text UI made easy

Project README


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

NPM JavaScript Style Guide


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


import css from '@emotion/css'

    ({ 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: ${ - 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


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


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.

Open Source Agenda is not affiliated with "React Text Selection Popover" Project. README Source: juliankrispel/react-text-selection-popover

Open Source Agenda Badge

Open Source Agenda Rating