Waffles
© 2021 DataCamp, Inc.

components

Positioner

A hook to provide positioning styles.

Overview

usePositioner is a hook to provide positioning styles for emotion. It replaces the old Positioner component.

It is designed to be a building block for other components. An example of how to use it follows:

function PositionExample() {
  const targetRef = React.useRef()
  const positionerStyles = usePositioner({
    isVisible: true,
    target: targetRef,
    position: 'bottom',
    offset: 8
  });

  return <>
    <div ref={targetRef}>target</div>
    <div css={positionerStyles}>positioned element</div>
  </>
}

Imports

You can import following components or utilities from this module:

import Positioner, { usePositioner } from '@datacamp/waffles-positioner';