https://github.com/juliankrispel/react-text-selection-popover

Selection based Text UI made easy
https://github.com/juliankrispel/react-text-selection-popover

draft-js popover react rich-text-editor slatejs text-editor text-selection wysiwyg-editor

Last synced: about 21 hours ago
JSON representation

Selection based Text UI made easy

• Host: GitHub
• URL: https://github.com/juliankrispel/react-text-selection-popover
• Owner: juliankrispel
• Created: 2018-07-12T21:24:21.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T10:13:32.000Z (almost 2 years ago)
• Last Synced: 2024-11-12T10:48:36.199Z (4 days ago)
• Topics: draft-js, popover, react, rich-text-editor, slatejs, text-editor, text-selection, wysiwyg-editor
• Language: TypeScript
• Homepage: https://juliankrispel.github.io/react-text-selection-popover
• Size: 3.78 MB
• Stars: 288
• Watchers: 8
• Forks: 27
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# react-text-selection-popover

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

[![NPM](https://img.shields.io/npm/v/react-text-selection-popover.svg)](https://www.npmjs.com/package/react-text-selection-popover) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

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

```

## Usage

```tsx

import css from '@emotion/css'

 {

      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

      

    }

  }

/>

```


### 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](https://reactjs.org/docs/portals.html). 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](https://spectrum.chat/). 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](http://jkrsp.com) to get in touch about a project.