react-selection-popover

A medium-like popover menu for selected text

Demonstration

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 to the div that contains the selectable text. Add the data-selectable attribute to the same div.

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() {
      return (
        <div data-selectable>
          I am selectable text!
          <SelectionPopover>
            <button>save</button>
            <button>share</button>
          </SelectionPopover>
        </div>
      )
    }
  }

Props

propdescriptiontype
onChangefired when visibility of popover changesfunction
topOffsetdistance from selection and top of box (default 30px)integer
styleany ole style propobject

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.