react-selection-popover

1.1.1 • Public • Published

react-selection-popover

Popover menu for selected text

Getting started

Add the SelectionPopover component as a sibling of the element that contains the selectable text. Add the data-selectable attribute to the element that contains the selectable text. Make sure the common parent has its position set to relative.

Add any children and props (including styling) to SelectionPopover.

import React from 'react';
import SelectionPopover from 'react-selection-popover'
 
export default class Demo extends React.Component {
  render() {
    state = {
      showPopover: false
    }
    return (
      <div style={{
        position: 'relative'
      }}>
        <div data-selectable>
          <p>
            This is the first selectable paragraph. Looking pretty good.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing.
          </p>
        </div>
        <SelectionPopover
          showPopover={this.state.showPopover}
          onTextSelect={() => {this.setState({showPopover: true})}}
          onTextDeselect={() => {this.setState({showPopover: false})}}
        >
          <button>save</button>
          <button>share</button>
        </SelectionPopover>
      </div>
    )
  }
}

Props

prop description type required
topOffset distance from selection and top of box (default 30px) integer false
style any ole style prop object false
onTextDeselect fired when text selection is cleared function true
onTextSelect fired when text is selected function<selectedText: string> true
showPopover shows or hides the popover boolean true

You can pass any other div compatible props

Contributing

Clone repo then

npm install
npm start

TODO

  • add tests
  • disable user selection for children of popover

License

react-selection-popover is available under MIT. See LICENSE for more details.

Package Sidebar

Install

npm i react-selection-popover

Weekly Downloads

5

Version

1.1.1

License

MIT

Last publish

Collaborators

  • mvanlonden