© 2021 DataCamp, Inc.
⚠️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.



A hook to provide positioning styles.


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>


You can import following components or utilities from this module:

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