@springtree/eva-suite-react-hooks

EVA Suite React Hooks

This package contains custom React hooks that we use in multiple EVA Suite modules.

Install into you React package

npm i @springtree/eva-suite-react-hooks

Usage

You can use the package like this.

import React from 'react';
import { useDebounce } from '@springtree/eva-suite-react-hooks';

const Example: React.FC = () => {
  const [inputValue, setInputValue] = React.useState<string | undefined>();
  const debouncedInputValue = useDebounce(inputValue, 500);

  return (
    <>
      <input
        type="text"
        value={inputValue ?? ''}
        onChange={(event) => setInputValue(event.target.value)}
      >
      <span>
        {`The debounced value is: ${debouncedValue}`}
      </span>
    </>
  )
}

These are the current hooks:

• useActionOnUnmount => With this hook you can kick of an action with data before the component unmounts
• useBoolean => Handy custom hook which gives you callbacks to either update or toggle a boolean state value
• useDebounce => Debounce any state value with this hook.
• useEnumToArray => Convert enum to an array.
• useEventListener => If you find yourself adding a lot of event listeners using useEffect you might consider using this hook.
• useHandleSWR => Make sure data gets refreshed when you return to it.
• useHandleSWRFamily => Make sure data gets refreshed when you return to it.
• useHasFunctionality => returns if the user may or may not use an EVA functionality.
• useHasFunctionalityWithoutScope => returns if the user may or may not use an unscoped EVA functionality.
• useAllowedFunctionality => check if current user has access to certain functionalities (based on useHasFunctionality and useHasFunctionalityWithoutScope hooks)
• useLocalStorage => Custom hook that works just like useState, but based on localStorage.
• useParseStringToFloat => Parses a string value to a float or undefined.
• useParseStringToInteger => Parses a string valeu to a integer or undefined.
• usePrevious => Get the previous value of a state value.
• useSentry => setup sentry in EVA app
• useUndo => Custom hook for managing undo / redo on state values.
• useWhyDidYouUpdate => This hook makes it easy to see which prop changes are causing a component to re-render.
• useBoundingRectangle => This hook saves and returns the last known bounding box (position and dimensions) of a DOM element. It also updates on resize events.
• useNavigateToChildPath => navigate to a URL, that has the same prefix as the current URL (e.g. /api/users -> /api/users/3).
• useRecoilDebouncedValue => Debounce Recoil state setter.
• useHotjar => Initialize Hotjar for the application based on eva-config.
• useHandle404 => Redirects the user to a 404 page on EntityNotFound errors
• useParsedRouteParam => Gets route params as integer values
• useServiceError => Gets service errors
• useCallService => Helper hook to call a service
• useInterval => Execute callback on interval
• useAppSetting => Get the value of a setting
• useProductIDProperty => Get the configured product id property from app setting
• useProductImageById => Get the url for the primary image of a product based on the EVA ID of the product when you don't have the blob id available

Testing

We try to write tests for every new hook. You can use react-hooks-testing-library to see how you should write your tests. Jest is the testing framework.