@malcodeman/react-popover

1.1.11 • Public • Published

react-popover

GitHub license npm code style: prettier

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

Package Sidebar

Install

npm i @malcodeman/react-popover

Weekly Downloads

53

Version

1.1.11

License

MIT

Unpacked Size

24.7 kB

Total Files

6

Last publish

Collaborators

  • malcodeman