Package Exports
- @arnat/styled-popover
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@arnat/styled-popover) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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's some amazing content. It's very engaging. Right?
</PopoverBody>
</Popover>
</div>
);
};Properties
Properties which can be added to the component to change the visual appearance.
hiddenType: booleanrightType: booleantopType: booleanleftType: booleanbottomType: booleantransitionPropsType: object