usepositionning v1.2.4
usePositionning
A lightweight library to position elements on the page according to scrolling and available space.
Install
npm install --save usepositionning
yarn add --save usepositionning
What's new ?
usePositionning is a react hook that allows your component (like popUp or select for example) to reposition itself according to the available space on the screen and the position of its parent node when a user scroll or resize the window.
How does it works ?
usePosition calculates the CSS parameters top / bottom / right / left of a JSX element on every scroll and resize of the window . These properties are calculated according to the position of its parent element, which must be in relative position.
Here is how to add usePositionning to your component:
const [refParent, refChildren, style, position] = usePositionning(
{
space: 1,
preferences: ['bottom-left', 'top-left', 'right-top', 'left-top'],
strictMode: false
},
[open]
)
usePositionning returns four elements:
- refParent is a React.ref that you should pass to the parent element on which your children are positioned :
<div className='parent' ref={refParent}>
{' '}
</div>
-refChildren is a React.ref for the pop up element, the one who need to be positionned :
<div className='children' ref={refChildren}>
{' '}
</div>
- style are the CSS property that you need to pass to the children JSX.element :
<div className='children' style={positions}>
{' '}
</div>
-actualPosition is the actual position of the children element. See below the possible position that it can take
Parameters of usePositionning
Here are all the position available for the children element :
export type PositionPreferences =
| 'top'
| 'bottom'
| 'left'
| 'right'
| 'top-left'
| 'top-right'
| 'bottom-right'
| 'bottom-left'
| 'right-top'
| 'right-bottom'
| 'left-top'
| 'left-bottom'
Example of use
const Example = (): JSX.Element => {
const [refParent, refChildren, style, actualPositions] = usePositionning({
preferences: ['top-left', 'bottom-left'],
space: 10
})
return (
<div className='parentNode' ref={refParent}>
<div className='childrenNode' ref={refChildren} style={positions}>
{' '}
<p> {actualPosition} </p>{' '}
</div>
<style jsx>
{`
.parentNode {
position: relative;
width: 200px;
height: 300px;
}
.childrenNode {
width: 500px;
height: 200px;
}
`}
</style>
</div>
)
}
MIT © RomainGuarinoni