Introduction

All the hooks that are frequently used in the EVA Suite Modules are included in the eva-suite-react-hooks repo, and are distributed via NPM in the @springtree/eva-suite-react-hooks package.

Installation

npm install --save @springtree/eva-suite-react-hooks

Usage

You can use the package like this:

import { useState } from 'react';import { useDebounce } from '@springtree/eva-suite-react-hooks';
const Example = () => {  const [inputValue, setInputValue] = 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>    </>  )};
export default Example;

Hooks list

Hook	Description
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
useBoundingRectangle	This hook saves and returns the last known bounding box (position and dimensions) of a DOM element. It also updates on resize events.
useBuildIntentUrl	Hook to use the urlBuilder of the intentBuilder
useDebounce	Debounce any state value with this hook
useEnumToArray	Hook to convert an enum to an array
useEvaLogin	Hook that exposes handy helpers to login to EVA
useEvaMutation	Use this hook to query an EVA service as a mutation (React Query SDK)
useEvaQuery	Use this hook to query an EVA service (React Query SDK)
useEventListener	If you find yourself adding a lot of event listeners using useEffect you might consider using this hook
useHasFunctionality	Returns if the user may or may not use an EVA functionality
useHotjar	Initialize Hotjar for the application based on eva-config
useLocalStorage	Custom hook that works just like useState, but based on localStorage
useNavigateToChildPath	Navigate to a URL, that has the same prefix as the current URL (e.g. /api/users -> /api/users/3)
useParseStringToFloat	Parses a string value to a float or undefined
useParseStringToInteger	Parses a string value to an integer or undefined
usePrevious	Get the previous value of a state value
useRecoilDebouncedValue	Debounce Recoil state setter
useSentry	Setup Sentry in EVA app
useSetRequest	Handles setting the service request with the newRequest only when it exists and is different than the current request
useSetResponseStale	Set service to stale once rendered
useLocale	Use this hook to manage the application locale
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