55

GitHub - juliankrispel/react-text-selection-popover: Selection based Text UI mad...

 5 years ago
source link: https://github.com/juliankrispel/react-text-selection-popover
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

react-text-selection-popover

lil-demo

As it says on the tin. This module provides a way to render a popover/tooltip style component when text is selected.

NPM JavaScript Style Guide

Install

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

Usage

import React, { Component } from 'react'

import Popover from 'react-text-selection-popover'

class Example extends Component {
  state = {
    textSelected: false
  }

  constructor() {
    this.ref = React.createRef()
  }

  render () {
    return (
      <div>
        <p ref={this.ref}>
          Select this text 
        </p>
<Popover
  onTextSelect={()=> this.setState({ textSelected: true })}
  onTextUnSelect={()=> this.setState({ textSelected: false })}
  selectionRef={this.ref}
>
  <MyAwesomeComponent />
</Popover>
</div>
    )
  }
}

<Popover /> Props

Property Type required? Description selectionRef React.ref optional Set this to constrain selection events to a dom element and it's children. You need this especially if you use more than one Popover component (defaults to document) isOpen Boolean optional Is the Popover visible or not (defaults to true) onTextSelect Function optional Callback for when text is selected (typically used for setting state that opens the modal) onTextUnSelect Function optional Callback for when selection collapses (typically used for setting state that closes the modal) className String optional CSS class name for Popover container. gap Number optional Px gap between text selection and popover - (defaults to 5) defaultDirection "above"|"below" optional Whether to position the popover below or above selection by default - __(defaults to "above")

License

MIT © juliankrispel

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!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK