@yuxuan-zheng/hooks v0.0.3

hooks

Some common used hooks.

API Reference

All hooks will return either a value or an array. If the return value is an array, this document will list the values in order.

• useDebounced
• useIntersection

useDebounced

Description

Use this hook to get the debounced value.

Parameters

Returns

Example

const Example = () => {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounced(value);

  const onChange = e => setValue(e.target.value);

  useEffect(() => {
    // Do whatever you want upon the debounced value change
    console.log(debouncedValue);
  }, [debouncedValue]);

  return <input type="text" value={value} onChange={onChange} />;
};

useIntersection

Description

Use this hook to determine whether the element is displayed in viewport.

Parameters

This hook doesn't need parameters.

Returns

Example

const Example = () => {
  const [isIntersecting, callbackRef] = useIntersection();

  useEffect(() => {
    // Do whatever you want when the target is intersecting with viewport
  }, [isIntersecting])

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