Primitives to build things like tooltips, dropdown menu's and pop-overs.
Basically any kind of layer that can be toggled. Focus on what your layer should look like, and let react-laag take care of where and when to show it.
Visit the website for more examples and docs here.
- Build your own tooltips / dropdown-menu's / pop-overs / etc...
- Not opinionated regarding styling or animations
- Highly customizable
- Small footprint (tree-shakable)
- Zero dependencies
- Built with typescript / ships with typescript definitions
- Integrates well with other libraries
- Automatically adjusts your layer's placement to fit the screen
- Works with nested scroll-containers
- Observes and reacts to changes in dimensions
npm install --save react-laag
or
yarn add react-laag
import React from "react";
import { ToggleLayer, anchor } from "react-laag";
function Example() {
return (
<ToggleLayer
// provide placement config
placement={{ anchor: anchor.BOTTOM_CENTER }}
// render-prop to render our layer
renderLayer={({ layerProps, isOpen }) =>
// only render on `isOpen`
isOpen && (
<div
// for calculation stuff
ref={layerProps.ref}
style={{
// inject calculated positional styles
...layerProps.style
// add your own styles
}}
/>
)
}
>
{({ toggle, triggerRef }) => (
<div
// only the `triggerRef` is required...
ref={triggerRef}
// ...the rest is up to you
onClick={toggle}
style={{}}
/>
)}
</ToggleLayer>
);
}
...or use the hook:
import React from "react";
import { useToggleLayer, anchor } from "react-laag";
function Example() {
const [element, toggleLayerProps] = useToggleLayer(
// render the layer
({ layerProps, isOpen }) => isOpen && <div {...layerProps} />,
// provide some options, like placement
{ placement: { anchor: anchor.BOTTOM_CENTER } }
);
return (
<div>
{element}
<div onClick={toggleLayerProps.openFromMouseEvent}>Click me!</div>
</div>
);
}
MIT © everweij