React Popover Control

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