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

| Name | Type | Required | Default | Description | | ----------- | ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | preferences | Number | false | [ ] | An array of the position order by preference ( see PositionPreference type below | | space | Number | false | 0 | The space between the parent and children element | | strictMode | Boolean | false | false | If set to true, usePositionning will positionned your element only with your preferences, otherwise it will choose the best position in all the position available | | deps | Array od deps | false | [ ] | An array of dependencies |

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