@gunnarx2/hooks

Collection of React hooks. Every hook supports TypeScript and Server-Side Rendering.

Installation

yarn add @gunnarx2/hooks

Usage

• useEventListener() - Event listener
• useResize() - Resize
• useWindowSize() - Window size
• useClickOutside() - Click outside
• useScroll() - Scroll
• useTrapFocus() - Trap focus

Event listener

Example - Event listener

import React from 'react';
import { useEventListener } from '@gunnarx2/hooks';

const Component = () => {
  const ref = useRef(null);

  useEventListener({
    type: 'click',
    listener: (event) => console.log(event),
    element: ref,
    options: { passive: true }
  });

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

export default Component;

Reference - Event listener

Default value for element is window if isSSR returns false.

interface UseEventListener {
  type: keyof WindowEventMap;
  listener: EventListener;
  element?: RefObject<Element> | Document | Window | null;
  options?: AddEventListenerOptions;
}

const useEventListener = ({
  type,
  listener,
  element = isSSR ? undefined : window,
  options
}: UseEventListener): void => {};

Resize

Example - Resize

import React from 'react';
import { useResize } from '@gunnarx2/hooks';

const Component = () => {
  useResize((event) => {
    console.log(event);
  }, 666);

  return null;
};

export default Component;

Reference - Resize

It uses useEventListener() to listen for resize. Will trigger callback on window resize. Passed wait parameter will debounce the callback parameter.

const useResize = (
  callback: (event: Event) => void,
  wait: number = 250
): void => {};

Window size

Example - Window size

import React, { useEffect } from 'react';
import { useWindowSize } from '@gunnarx2/hooks';

const Component = () => {
  const { width, height } = useWindowSize(1337);

  useEffect(() => {
    console.log(width, height);
  }, [width, height]);

  return null;
};

export default Component;

Reference - Window size

It uses useResize() to listen for resize. Passed wait parameter will debounce the callback parameter.

const useWindowSize = (
  wait: number = 250
): {
  width?: number;
  height?: number;
} => {};

Click outside

Example - Click outside

import React, { useRef } from 'react';
import { useClickOutside } from '@gunnarx2/hooks';

const Component = () => {
  const ref = useRef(null);

  useClickOutside(ref, (event) => {
    console.log(event);
  });

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

export default Component;

Reference - Click outside

It uses useEventListener() to listen for click.

const useClickOutside = (
  element: RefObject<Element> | null,
  callback: (event: MouseEvent) => void
): void => {};

Scroll

Example - Scroll

import React, { useEffect, useRef } from 'react';
import { useScroll } from '@gunnarx2/hooks';

const Component = () => {
  const ref = useRef(null);
  const { y, x, direction } = useScroll({
    wait: 420,
    element: ref
  });

  useEffect(() => {
    console.log(y, x, direction);
  }, [y, x, direction]);

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

export default Component;

Reference - Scroll

It uses useEventListener() to listen for scroll, so default element is window. Passed wait parameter will throttle the callback parameter.

interface Scroll {
  y?: number;
  x?: number;
  direction?: 'up' | 'right' | 'down' | 'left';
}

interface UseScroll {
  wait?: number;
  element?: RefObject<Element> | Window | null;
}

export const useScroll = (options?: UseScroll): Scroll => {};

Trap focus

Example - Trap focus

import React, { useRef } from 'react';
import { useTrapFocus } from '@gunnarx2/hooks';

const Component = () => {
  const initialFocusRef = useRef(null);
  const trapRef = useTrapFocus({
    includeContainer: true,
    initialFocus: initialFocusRef.current,
    returnFocus: true,
    updateNodes: false
  });

  return (
    <div ref={trapRef} tabIndex={0}>
      Lorem ipsum{' '}
      <button type="button" ref={initialFocusRef}>
        dolor
      </button>
    </div>
  );
};

export default Component;

Reference - Trap focus

It uses useEventListener() to listen for keydown.

Include container

Include container in the tabbable nodes. In the example above it would result in trapRef.
Default: false.

Initial focus

Set node or 'container' as initial focus. For 'container' to work you need to set includeContainer: true.
Default: null.

Return focus

Return focus to the element that had focus before trapped. This will be executed when component unmounts.
Default: true.

Update nodes

Update tabbable nodes on each tab, can be useful if nodes is rendered dynamically in some way.
Default: false.

type Node = HTMLDivElement | null;

interface UseTrapFocus {
  includeContainer?: boolean;
  initialFocus?: 'container' | Node;
  returnFocus?: boolean;
  updateNodes?: boolean;
}

const useTrapFocus = (
  options?: UseTrapFocus
): MutableRefObject<Node> => {};