@gs-libs/hooks

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