GS Utility Hooks Package

This package contains GS's most commonly used react hooks.

useDebounce

Debounce a function passed in

import { useDebounce } from '@gs-libs/hooks'
import { useBridge, useMutation } from '@gs-libs/bridge'

const Home = () => {
  const [input, setInput] = React.useState('');

  const bridge = useBridge();

  const { mutateAsync: search, data } =
    useMutation(bridge.searchStories)

  const cancel = useDebounce(() => {
    search({
      q: input
    })
  }, 500, [input]);

  return (
    <div>
      <input onChange={(e) => setInput(e.target.value)}>
      {data?.map(...)}
    </div>
  )
}

useThrottle

Throttle a function passed in and return a throttled function

import { useThrottle } from '@gs-libs/hooks';

const Home = () => {
  const throttled = useThrottle(() => {
    console.log('clicked')
  }, 300);

  return (
    <button onClick={throttled}>
      ...
    </button>
  )
}

useIsMounted

Check if the component has been mounted.

import { useIsMounted } from '@gs-libs/hooks';

const Home = () => {
  const isMounted = useIsMounted();

  if (isMounted()) {
    ...
  }
}

useMountedEffect

useEffect that doesn't run on the first mount.

import { useMountedEffect } from '@gs-libs/hooks';

const Home = () => {
  useMountedEffect(() => {
    // do something
  }, [])
}

useCallbackEffect

Makes the native useCallback able to return a clean up function just like what useEffect is able to do.

We take the callback ref as an example here.

import { useCallback } from 'react';
import { useCallbackEffect } from '@gs-libs/hooks';

const Home = () => {
  const callbackRef = useCallback((element) => {
    // do something with the 'element'
    ...
    ...

    return () => {
      // do some cleanup
    }

    // whenever the deps changes, the returned function will run
  }, [deps]);

  /**
    By wrapping the `callbackRef` into `useCallbackEffect`
    the returned function in the callbackRef will be run
    everytime the callbackRef is a new function (which means the `deps` chagnes), and on unmount.
  */
  const callbackRefEffect = useCallbackEffect(callbackRef);

  return (
    <div ref={callbackRefEffect}>...</div>
  )
}

useCopyToClipboard

Copies text to clipboard.

import { useCopyToClipboard } from '@gs-libs/hooks';

const Home = () => {
  const [text, setText] = React.useState('');
  const [state, copyToClipboard] = useCopyToClipboard();

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <button type="button" onClick={() => copyToClipboard(text)}>copy text</button>
      {state.error
        ? <p>Unable to copy value: {state.error.message}</p>
        : state.value && <p>Copied {state.value}</p>}
    </div>
  )
}

Details

const [{value, error, noUserInteraction}, copyToClipboard]
    = useCopyToClipboard({ isEmptyStringAllowed: true });

return

• value = the value that's been copied to clipboard

• error = error when trying to copy to clipboard

• noUserInteraction = indicating if it requires user interaction

param options

• isEmptyStringAllowed = default to false, if false, copying empty text will fail.

useComponentSize

Hook that listens to changes of a specific component/element and notifies us the size after chagne.

import { useRef } from 'react';
import { useComponentSize } from '@gs-libs/hooks';

const Home = () => {
  const ref = useRef();
  const { size, orientation } = useComponentSize(ref);

  return (
    <div ref={ref}>...</div>
  )
}

Detail

This hook has two overloads

const { size, orientation } = useComponentSize(ref, options);

or

const { size, orientation } = useComponentSize(ref, formatter, options);

| param | desc | type | optional | default | | :-------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------: | :------: | :-----: | | ref | The react ref from an element | MutableRefObject<HTMLElement \| null> | no | | | formatter | A function that formats the width of the component, whatever being returned will be set as the size state | (width: number) => T | yes | | | options.delay | delay time of the resize listener throttling | number (ms) | yes | 300 | | options.useResizeObserver | indicating if the hook should use resizeObserver over window.addEventListener('resize') - Should I use it? | boolean | yes | false |