npm package: @springtree/eva-suite-react-hooks
Description: Shared React custom hooks library for the EVA Admin suite modules
Author: Tim Kapitein
Latest version: 1.29.0

# 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.

```typescript
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](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-action-on-unmount) => 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](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-debounce) => Debounce any state value with this hook.
- useEnumToArray => Convert enum to an array.
- [useEventListener](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-event-listener) => If you find yourself adding a lot of event listeners using useEffect you might consider using this hook.
- [useHandleSWR](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-handle-swr) => Make sure data gets refreshed when you return to it.
- [useHandleSWRFamily](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-handle-swr) => Make sure data gets refreshed when you return to it.
- [useHasFunctionality](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-has-functionality) => returns if the user may or may not use an EVA functionality.
- [useHasFunctionalityWithoutScope](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-has-functionality-without-scope) => returns if the user may or may not use an unscoped EVA functionality.
- [useAllowedFunctionality](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-allowed-functionalities) => 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](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-previous) => Get the previous value of a state value.
- [useSentry](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-sentry) => setup sentry in EVA app
- [useUndo](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-undo) => Custom hook for managing undo / redo on state values.
- [useWhyDidYouUpdate](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-why-did-you-update) => This hook makes it easy to see which prop changes are causing a component to re-render.
- [useBoundingRectangle](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-bounding-rectangle) => 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](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-recoil-debounced-value) => Debounce Recoil state setter.
- [useHotjar](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-hotjar) => Initialize Hotjar for the application based on eva-config.
- [useHandle404](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-handle-404) => Redirects the user to a 404 page on `EntityNotFound` errors
- [useParsedRouteParam](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-parsed-route-param) => Gets route params as integer values
- [useServiceError](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-service-error) => Gets service errors
- [useCallService](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-call-service) => Helper hook to call a service
- [useInterval](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-interval) => Execute callback on interval
- [useAppSetting](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-app-setting) => Get the value of a setting
- [useProductIDProperty](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-product-id-property) => Get the configured product id property from app setting
- [useProductImageById](https://github.com/springtreesolutions/eva-suite-react-hooks/tree/master/src/hooks/use-product-image-by-id) => 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](https://react-hooks-testing-library.com/) to see how you should write your tests. Jest is the testing framework.