Package Exports

@haensl/react-hooks
@haensl/react-hooks/dist/hooks.cjs.js
@haensl/react-hooks/dist/hooks.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@haensl/react-hooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@haensl/react-hooks

Assorted React hooks.

Installation

Via `npm`

$ npm install -S @haensl/react-hooks

Via `yarn`

$ yarn add @haensl/react-hooks

Usage

Install @haensl/react-hooks
Use hooks in your components:

import { useDebounce } from '@haensl/react-hooks';

const DebouncedButton = () => {
  const handler = useDebounce(() => {
    console.log('click');
  }, 50);

  return (
    <button
      onClick={ handler }
    >click me</button>
  );
};

Available hooks

useAnimationFrame: animate a function.
useBoundingClientRect: keep track of a container's DOM rectangle.
useDebounce: debounce a function.
useIsMounted: keep track of whether or not a component is mounted.
useIsScrolling: keep track of whether or not the user is scrolling.
useOnScroll: subscribe to scroll events.
useWindowScroll: keep track of the window's scroll position.
useWindowSize: keep track of the window's size.

useAnimationFrame(fn)

Uses requestAnimationFrame to animate a function fn. The callback is passed one single argument, the time delta in milliseconds that has passed between this and the last call. Please check the example below as well as the Codepen example.

Example

import React, { useState, useEffect } from 'react';
import { useAnimationFrame } from '@haensl/react-hooks';

const AnimatedTimer = () => {
  const [seconds, setSeconds] = useState(0);
  const [elapsed, setElapsed] = useState(0);

  useAnimationFrame((dt) => {
    setElapsed(elapsed + dt);
  });

  useEffect(() => {
    if (elapsed >= 1000) {
      setSeconds(seconds + 1);
      setElapsed(elapsed - 1000);
    }
  }, [elapsed]);

  return (
    <span>{ seconds }</span>
  );
};

→ Codepen example

useBoundingClientRect(ref, [debounceMs = 25])

Returns the DOM rectangle (initially null) as returned by getBoundingClientRect for the given container ref. Changes are debounced by 25 milliseconds by default. Customize the debounce interval via the optional debounceMs argument. Please check out the example below as well as the Codepen example.

Example

import React, { useRef } from 'react';
import { useBoundingClientRect } from '@haensl/react-hooks';

const RectTracker = () => {
  const ref = useRef();
  const containerRect = useBoundingClientRect(ref);

  if (!containerRect) {
    return (
      <div ref={ ref }>
        <span>no container rect</span>
      </div>
    );
  }

  return (
    <div ref={ ref }>
      <span>Container rect:</span>
      <span>Width: {containerRect.width}</span>
      <span>Height: {containerRect.height}</span>
    </div>
  );
};

→ Codepen example

useDebounce(fn, debounceMs)

Uses memoization to debounce fn by debounceMs milliseconds. Please check the example below as well as the Codepen example.

Example

import React from 'react';
import { useDebounce } from '@haensl/react-hooks';

const DebouncedButton = () => {
  const handler = useDebounce(() => {
    console.log('click');
  }, 50); // handler only fires when there were no calls for 50ms.

  return (
    <button
      onClick={ handler }
    >click me</button>
  );
};

→ Codepen example

useIsMounted()

Returns a function to check whether or not the component invoking the hook is mounted.

Example

import React, { useEffect } from 'react';
import { useIsMounted } from '@haensl/react-hooks';
import api from 'somewhere';

const MyComponent = () => {
  const isMounted = useIsMounted();
  // load some data from the backend
  useEffect(() => {
    api.fetchData()
      .then((data) => {
        if (isMounted()) {
          // use data only if component is still mounted
        }
      });
  }, []);
}

useIsScrolling([el = window, scrollEndMs = 100])

Returns a boolean indicating whether or not the user is scrolling. You can subscribe to a specific element via the first argument, el (default: window). End of scrolling is determined by no incoming scroll events for scrollEndMs milliseconds (default: 100). Please check the example blow as well as the Codepen example

Example

import React from 'react';
import { useIsScrolling } from '@haensl/react-hooks';

const UserScrollTracker = () => {
  const isScrolling = useIsScrolling();

  return (
    <span>The user is currently { isScrolling ? '' : 'not' } scrolling</span>
  );
};

→ Codepen example

useOnScroll(fn, [el = window])

Subscribes to scroll events on the given element el (default: window). The callback function fn is passed the Event. Please check the example below as well as the Codepen example.

Example

import React, { useState } from 'react';
import { useOnScroll } from '@haensl/react-hooks';

const WindowScrollTracker = () => {
  const [windowScroll, setWindowScroll] = useState(0);

  useOnScroll(() => {
    setWindowScroll(window.scrollY);
  });

  return (
    <div className="WindowScrollTracker">
      <span>Window has scrolled down</span>
      <span>{ windowScroll }px</span>
    </div>
  );
};

→ Codepen example

useWindowScroll([debounceMs = 25])

Returns an object (null if there is no window) with properties x and y reflecting the the scroll position of the window or document. Scroll position updates are by default debounced by 25 milliseconds. This debounce interval can be customized via the optional debounceMs argument. Please check the example below as well as the Codepen example.

Example

import React, { useState } from 'react';
import { useWindowScroll } from '@haensl/react-hooks';

const windowScrollTracker = () => {
  const windowScroll = useWindowScroll();

  if (!windowScroll) {
    return (
      <div className="WindowScrollTracker">
        no scroll poistion
      </div>
    );
  }

  return (
    <div className="WindowScrollTracker">
      <span>Scroll x: {windowScroll.x}</span>
      <span>Scroll y: {windowScroll.y}</span>
    </div>
  );
};

→ Codepen example

useWindowSize([debounceMs = 25])

Returns an object (initially null) with properties width and height reflecting the innerWidth and innerHeight of the window object. Size updates are by default debounced by 25 milliseconds. This debounce interval can be customized via the optional debounceMs argument. Please check the example below as well as the Codepen example.

Example

import React, { useState } from 'react';
import { useWindowSize } from '@haensl/react-hooks';

const WindowSizeTracker = () => {
  const windowSize = useWindowSize();

  if (!windowSize) {
    return (
      <div className="WindowSizeTracker">
        <span>No window size</span>
      </div>
    );
  }

  return (
    <div className="WindowSizeTracker">
      <span>Window Size:</span>
      <span>width: { windowSize.width }px</span>
      <span>height: { windowSize.height }px</span>
    </div>
  );
};

JSPM