@arnat/styled-popover
TypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published

ARNAT - styled-popover

npm Travis branch Codecov branch storybook lerna

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>
  );
};

Properties

Properties which can be added to the component to change the visual appearance.

  • hidden Type: boolean
  • right Type: boolean
  • top Type: boolean
  • left Type: boolean
  • bottom Type: boolean
  • transitionProps Type: object

Package Sidebar

Install

npm i @arnat/styled-popover

Weekly Downloads

2

Version

0.0.12

License

MIT

Unpacked Size

69.1 kB

Total Files

13

Last publish

Collaborators

  • arnat.technologies
  • rsurjano