@react-lit/popover
v0.8.0
Published
## Installation
Downloads
35
Readme
@react-lit/popover
Installation
$ npm i @react-lit/popover
# or
$ yarn add @react-lit/popover
Example
import * as React from 'react';
import { Popover, positionDefault } from '@react-lit/popover';
function Example() {
const ref = React.useRef(null);
const [value, setValue] = React.useState('');
return (
<div>
<label>
<span>Type for a special message</span>
<input
type="text"
ref={ref}
onChange={event => setValue(event.target.value)}
/>
</label>
{value.length > 0 && (
<Popover targetRef={ref} position={positionDefault}>
<div>
<p>Whoa! Look at me!</p>
</div>
</Popover>
)}
</div>
);
}
Available position functions
positionDefault
(default): Popover is positioned with it's top left corner at the bottom left corner of the target element.positionRight
Popover is positioned with it's top right corner at the bottom left corner of the target element.positionMatchWidth
Popover is positioned below the target element matching it's width.positionCenter
Popover is positioned centered below the target element.
Development
(1) Install dependencies
$ npm i
# or
$ yarn
(2) Run initial validation
$ ./Taskfile.sh validate
(3) Run tests in watch-mode to validate functionality.
$ ./Taskfile test -w
This project was set up by @jvdx/core