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.
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;
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;