npm

Need private packages and team management tools?Check out npm Orgs. »

styled-popover-component

4.0.0 • Public • Published

styled-popover-component

npm Travis branch Codecov branch storybook lerna

The bootstrap popover component made with styled-components.

This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.

Installation

npm install --save styled-popover-component
npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies 

Usage

For detailed information take a look at the documentation.

This example uses styled-button-component package

import React, { useState } from 'react';
 
import { Button } from 'styled-button-component';
import {
  Popover,
  PopoverArrow,
  PopoverBody,
  PopoverHeader,
} from 'styled-popover-component';
 
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

License

MIT © Lukas Aichbauer

install

npm i styled-popover-component

Downloadsweekly downloads

352

version

4.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability