@exodus/react-hooks

Some usable hooks common to different apps

Browser

useChromeUserSettings

import useChromeUserSettings from '@exodus/react-hooks/browser/useChromeUserSettings';

useFocus

import useFocus from '@exodus/react-hooks/browser/useFocus';

useIsConnectionActive

import useIsConnectionActive from '@exodus/react-hooks/browser/useIsConnectionActive';

useIsPopup

import useIsPopup from '@exodus/react-hooks/browser/useIsPopup';

useIsWindow

import useIsWindow from '@exodus/react-hooks/browser/useIsWindow';

useKeyEventHandlers

import useKeyEventHandlers from '@exodus/react-hooks/browser/useKeyEventHandlers';

handlers: {
'Enter': (e) => {},
'Escape': (e) => {},
// ...
}

useLocalStorage

import useLocalStorage from '@exodus/react-hooks/browser/useLocalStorage';

useOnClickOutside

import useOnClickOutside from '@exodus/react-hooks/browser/useOnClickOutside';

useOrderedAnimation

import useOrderedAnimation from '@exodus/react-hooks/browser/useOrderedAnimation';

useQueryParam

import useQueryParam from '@exodus/react-hooks/browser/useQueryParam';

From: https://github.com/streamich/react-use/blob/master/src/useSearchParam.ts

useRangeSlider

import useRangeSlider from '@exodus/react-hooks/browser/useRangeSlider';

Based on react-ranger

useScreenEventListener

import useScreenEventListener from 'libraries/react-native-hooks/src/useScreenEventListener';

Based on https://usehooks.com/useEventListener/ but uses useFocusEffect so that the event listener is removed when Screen goes out of focus

Common

useAsync

import useAsync from '@exodus/react-hooks/common/useAsync';

Use to handle any async loading process

const { value, loading, error } = useAsync(() => fetch('something'), []);

useCurrentCallback

import useCurrentCallback from '@exodus/react-hooks/common/useCurrentCallback';

Use to prevent race-conditions in async operations, when you are not sure callback is same in exact moment as on start

const onSearchOrders = useCurrentCallback(
  (isCurrent) => (searchParams) => {
    api.searchOrders(customerId, searchParams).then((results) => {
      if (isCurrent()) {
        setSearchResults(results);
      }
    });
  },
  [customerId]
);

See: https://flufd.github.io/avoiding-race-conditions-use-current-effect https://github.com/Flufd/use-current-effect/blob/master/src/useCurrentCallback.ts

useCurrentEffect

import useCurrentEffect from '@exodus/react-hooks/common/useCurrentEffect';

See: https://flufd.github.io/avoiding-race-conditions-use-current-effect

useCurrentEffect(
  (isCurrent) => {
    api.searchOrders(customerId, searchParams).then((results) => {
      if (isCurrent()) {
        setSearchResults(results);
      }
    });
  },
  [customerId]
);

useDebounceValue

import useDebounceValue from '@exodus/react-hooks/common/useDebounceValue';

https://usehooks.com/useDebounce/

const debouncedValue = useDebounceValue(value, delay);

useThrottleValue

import useThrottleValue from '@exodus/react-hooks/common/useThrottleValue';

https://usehooks.com/useThrottle/

const throttledValue = useThrottleValue(value, delay);

useFirstMount

import useFirstMount from '@exodus/react-hooks/common/useFirstMount';

return true it’s first component mount

const isFirstMount = useFirstMount()

useFuseSearch

import useFuseSearch from '@exodus/react-hooks/common/useFuseSearch';

returns search results using ‘fuse.js’ npm library see https://www.fusejs.io/examples.html for examples how to use it

const results = useFuseSearch(data, query, fuseOptions);

useHover

import useHover from '@exodus/react-hooks/common/useHover';

From https://usehooks.com/useHover/

useHover.native

import useHover.native from '@exodus/react-hooks/common/useHover.native'

Not such thing as hovering in mobile

useInterval

import useInterval from '@exodus/react-hooks/common/useInterval';

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

useInterval(callback, 1000);

useLogRerender

import useLogRerender from '@exodus/react-hooks/common/useLogRerender';

Print which prop is changed, caused the re-render withLogRerender(Component) useLogRerender(‘Component’, props)

useMemoCompare

import useMemoCompare from '@exodus/react-hooks/common/useMemoCompare';

inspired by: https://usehooks.com/useMemoCompare/

Similar to React.useMemo except it allows for custom/deep comparison of dependecies array.

Paremeters
- function evaluate - Function to run when deps changes to calculate the return value.
- array deps - The array of dependencies
- functions array compareFuncs=[] - Optional, used to supply custom comparison functions
for dependencies. The function corresponding to a dependency will be at the same index
in this array as the dependency is in the deps array. As such, dependencies with
custom compare functions will come first, followed by functions that should use
Returns - Memoized version of the result of executing
evaluates since the last time deps changed.

useMergeRefs

import useMergeRefs from '@exodus/react-hooks/common/useMergeRefs';

https://github.com/gregberge/react-merge-refs

const mergeRefs = useMergeRefs([ref1, ref2, ref3]);
mergeRefs(value);

useMountEffect

import useMountEffect from '@exodus/react-hooks/common/useMountEffect';

Shortcut to useEffect without deps that runs once per mount

useMountEffect(() => {
    ...some code for mounted state only
})

useMounted

import useMounted from '@exodus/react-hooks/common/useMounted';

Use to get actual mounted state of component

const isMounted = useMounted();

useNavigationState

import useNavigationState from '@exodus/react-hooks/common/useNavigationState';

Manage app navigation state

const [value, setValue] = useState(); // define storage
 
const { navigationState, setNavigationState, clearNavigationState } = useNavigationState({
  value,
  setValue,
});

usePrevious

import usePrevious from '@exodus/react-hooks/common/usePrevious';

Source: https://usehooks.com/usePrevious .

const previousValue = usePrevious(value);
const hasChanges = previousValue !== value;

useTimeoutFn

import useTimeoutFn from '@exodus/react-hooks/common/useTimeoutFn';

From: https://github.com/streamich/react-use/blob/master/src/useTimeoutFn.ts

const [isReady, clear, set] = useTimeoutFn(callback, 1000);

useUniqueId

import useUniqueId from '@exodus/react-hooks/common/useUniqueId';

Unique id for SVG generator

const id = useUniqueId();

useUpdateEffect

import useUpdateEffect from '@exodus/react-hooks/common/useUpdateEffect';

useEffect that skips first mount

useUpdateEffect(callback, deps);