Demonstration

This is the first selectable paragraph. Looking pretty good.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Documentation

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.