⚠️This version of Waffles Design System is no longer maintained, and was deprecated at the end of 2022. It's main repository is archived. Please migrate your app to the New Waffles.

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';