@personio/utils-hooks v0.0.6

@personio/utils-hooks

Installation

yarn add @personio/utils-hooks

Hooks

• useAutoPositioner
• useForkRef
• useClickOutside
• useScrollObserver

useAutoPositioner

A wrapper for the usePopper from the react-popper library.

Usage

Accepts a Popper.js options object as an argument and returns the styles and attributes values from the usePopper hook. For convenience, the hook also returns setReferenceElement and setPopperElement functions.

import { useAutoPositioner } from '@personio/utils-hooks';

const MyComponent = () => {
  const {
    setReferenceElement,
    setPopperElement,
    styles,
    attributes,
  } = useAutoPositioner();

  return (
    <div ref={setReferenceElement}>
      <div ref={setPopperElement} style={...styles.popper} {...attributes.popper}>
      </div>
    </div>
  )
};

useForkRef

Allows multiple ref objects/callbacks to be combined so that they can be passed as a single callback ref.

Usage

import React from 'react';
import { useForkRef } from '@personio/utils-hooks';

const MyComponent = () => {
  const firstRef = React.useRef();
  const secondRef = React.useRef();
  const finalRef = React.useRef([firstRef, secondRef]);

  return <div ref={finalRef}></div>;
};

useClickOutside

Allows attaching a click-outside listener to a target element.

Usage

import { useClickOutside } from '@personio/utils-hooks';

const MyComponent = () => {
  const onClickOutside = () => {
    console.log('clicked outside');
  };
  const setElement = useClickOutside(onClickOutside);

  return (
    <div>
      <span>Outer Div</span>
      <div ref={setElement}>
        <span>Inner Div</span>
      </div>
    </div>
  );
};

useScrollObserver

Allows attaching a scroll listener to a target element.

Usage

import { useScrollObserver } from '@personio/utils-hooks';

const MyComponent = () => {
  const onScroll = () => {
    console.log('scrolled');
  };
  const { setElement } = useScrollObserver(onScroll);

  return (
    <div>
      <span>Outer Div</span>
      <div ref={setElement}>
        <span>Inner Div</span>
      </div>
    </div>
  );
};