@arnat/styled-popover NPM

ARNAT - styled-popover

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import React, { useState } from 'react';

import { Button } from '@arnat/styled-button';
import { Popover, PopoverArrow, PopoverBody, PopoverHeader } from '@arnat/styled-popover';

export const SimplePopoverToggle = () => {
  const [hidden, setHidden] = useState(true);
  const [position, setPosition] = useState([0, 0]);

  return (
    <div style={{ minHeight: '50vh', display: 'flex', alignItems: 'center' }}>
      <Button
        danger
        onBlur={() => setHidden(true)}
        onClick={ev => {
          setHidden(false);
          setPosition([
            ev.target.offsetTop - ev.target.offsetHeight,
            ev.target.offsetLeft + ev.target.offsetWidth,
          ]);
        }}
      >
        Click to show popover
      </Button>
      <Popover
        hidden={hidden}
        style={{
          top: `${position[0]}px`,
          left: `${position[1]}px`,
        }}
        right
      >
        <PopoverArrow right />
        <PopoverHeader right>Popover Title</PopoverHeader>
        <PopoverBody right>
          And here&#39;s some amazing content. It&#39;s very engaging. Right?
        </PopoverBody>
      </Popover>
    </div>
  );
};