README
Tiny React util to pin an element to another.
Install
npm i pind --save
What is this?
When dealing with UI like custom dropdowns and tooltips, you might run into
z-index
and positioning issues. One fix for that is to append content to the
top level of the DOM tree, above and out of the way of other components.
This library does that. It's a low-level abstraction, so use it to build other higher-level libraries like dropdowns.
Usage
import Pind from 'pind';
render(() => {
const target = React.createRef();
const [ pinned, setPinned ] = React.useState(false);
return (
<>
<button ref={target} onClick={() => setPinned(!pinned)}>
Click to Pin
</button>
<Pind pinned={pinned} to={target} at="bottom">
<div>
I'm pinned to the bottom of the button!
</div>
</Pind>
</>
);
}, document.getElementById('root'))
License
MIT License © Eric Bailey