@reach/popover

Render a portal positioned relative to another element.

Last updated 3 years ago by chancestrickland .

MIT · Repository · Bugs · Original npm · Tarball · package.json

$ cnpm install @reach/popover

SYNC missed versions from official npm registry.

@reach/popover

import * as React from "react";
import { Popover, positionDefault } from "@reach/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>
	);
}

Current Tags

0.18.0 ... latest (3 years ago)
0.4.0-beta.0 ... next (6 years ago)
0.18.0-pre.5 ... pre (3 years ago)

52 Versions

Maintainers (2)

mjackson

ryanflorence

Downloads

Today 0

This Week 6

This Month 11

Last Day 1

Last Week 5

Last Month 0

Dependencies (5)

@reach/polymorphic 0.18.0
@reach/portal 0.18.0
@reach/rect 0.18.0
@reach/utils 0.18.0
tabbable ^5.3.3

Dev Dependencies (6)

Dependents (4)