@malcodeman/react-popover

react-popover

The Popover component displays floating content in relation to a target. Popovers appear either at the top, bottom, left or right of their target. The preferred and default side is the bottom. Popovers use smart positioning if there is not enough space.

Getting started

yarn add @malcodeman/react-popover
# or
npm install --save @malcodeman/react-popover

import React from "react";
import { StatefulPopover } from "@malcodeman/react-popover";

function App() {
  return (
    <StatefulPopover content={() => <div>PopoverContent</div>}>
      <button>Trigger Popover</button>
    </StatefulPopover>
  );
}

export default App;

Stateless example

import React from "react";
import { Popover } from "@malcodeman/react-popover";

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Popover isOpen={isOpen} content={() => <div>PopoverContent</div>}>
      <button onClick={() => setIsOpen(!isOpen)}>Trigger Popover</button>
    </Popover>
  );
}

export default App;

License

MIT