Nondeterministic Postrequisite Metaprotocol

    react-popover-control

    0.1.4 • Public • Published

    React Popover Control

    npm

    Download

    npm install react-popover-control

    Usage

    import Popover from 'react-popover-control';
     
    const actions = [
      {
        title: 'Edit',
        func() {
          // some action here
        }
      },
      {
        title: 'Delete',
        func() {
          // some action here
        }
      }
    ];
     
    class Page extends React.Component {
      render() {
        return (
          <div>
            Some component...
     
            <Popover actions={actions}>
              <a>Click Here</a>
            </Popover>
          </div>
        )
      }
    };

    Styling

    Default styles are included as jss, but you can opt out by... (TODO)

    A good popover...

    • Flips when it is too low on screen
    • Nudges left when it is too far right on screen
    • Responds to clicks outside of its bounds
    • Responds to keyboard shortcuts like ESC

    Things still missing

    • Arrow key control
    • Scrolling when there are too many items
    • Using keyboard letters as shortcuts to certain fields
    • Filtering items with an input field

    Install

    npm i react-popover-control

    DownloadsWeekly Downloads

    6

    Version

    0.1.4

    License

    MIT

    Last publish

    Collaborators

    • qiming