Interaction Hooks

The @spa-tools/interaction-hooks package is a small library of specialized hooks aimed at solving interaction scenarios in modern-day React applications.

#### Feature highlights include:

- Time-saving functionality
- Production-tested
- TypeScript First
- Zero Dependencies
- Tree-shakable

#### Hooks in this package:

- useCallOnce
- useDetectKeyDown
- useInfiniteScroll
- useIsHovered
- useIsOverflowed
- useQueryState

#### It's highly advised to first checkout the @spa-tools documentation site for a complete list of features, usage scenarios, guidance, and reference.

Installation

npm install @spa-tools/interaction-hooks

Hooks / Usage

$3

Hook that ensures code runs once and only once no matter how many times your component re-renders.

``jsx
import { useEffect, useState } from 'react';
import { useCallOnce } from '@spa-tools/interaction-hooks';

// this is the function we want to call only once
function logOnce(message: string) {
console.log('This will only log once:', message);
}

export function UseCallOnceHookExample() {
const [time, setTime] = useState(new Date());

// here we setup some code to force a re-render every second
useEffect(() => {
const interval = setInterval(() => {
setTime(new Date());
}, 1000);

return () => clearInterval(interval);
}, []);

// here we use the hook to call the function
// so that it's guaranteed to only execute once
useCallOnce(logOnce, 'Hello, world!');

return

Current time: {time.toLocaleTimeString()}

`jsx
import { useEffect, useRef } from 'react';
import { useDetectKeyDown } from '@spa-tools/interaction-hooks';

function UseDetectKeyDownExample() {
// here we wire up a ref for the submit button that we will auto-click
const submitButtonRef = useRef(null);
// here we ask the hook to set onKeyDownInput1KeyDetected to true
// when the Shift-Ctrl-P keys are pressed
const [onKeyDownInput1, pShiftControlKeysDetected] = useDetectKeyDown('P', ['Shift', 'Control']);
// here we ask the hook to auto-click the submit button when
// the Enter key is pressed
const [onKeyDownInput2] = useDetectKeyDown('Enter', submitButtonRef);

useEffect(() => {
// we simply alert when the Shift-Ctrl-P keys are detected
if (pShiftControlKeysDetected) {
alert('Shift-Ctrl-P detected!');
}
}, [pShiftControlKeysDetected]);

return (


`jsx
import { useCallback, useEffect, useRef, useState } from 'react';
import { useCallEndpoint } from '@spa-tools/api-client';
import { useInfiniteScroll } from '@spa-tools/interaction-hooks';

// here we create a custom hook to fetch recipes from a server
// using the useCallEndpoint hook from the @spa-tools/api-client package
function useGetRecipes() {
return useCallEndpoint(
'https://dummyjson.com/recipes',
{
requestOptions: { recordLimit: 10 },
serverModelOptions: { jsonDataDotPath: 'recipes' },
},
// we pass true to enable appending of new records
true
);
}

function UseInfiniteScrollExample() {
// this will hold the ref to our scroll target, which is just a div that we
// place below our list of recipes to act as a sentinel for scroll intersection
const scrollTargetRef = useRef(null);
const [total, setTotal] = useState(0);
const [count, setCount] = useState(0);
const [getRecipes, recipesResult, isRecipesCallPending] = useGetRecipes();

// anytime our scroll target is intersected for vertical scroll, the hook
// will return true, which is how we know to fetch the next page of recipes
const isScrolling = useInfiniteScroll(scrollTargetRef);

const handleGetRecipes = useCallback(() => {
const recordCount = recipesResult?.data?.length ?? -1;
const totalCount = recipesResult?.total ?? 0;

setCount(recordCount);
setTotal(totalCount);

if (!isRecipesCallPending && recordCount < totalCount) {
getRecipes();
}
}, [getRecipes, isRecipesCallPending, recipesResult?.data?.length, recipesResult?.total]);

useEffect(() => {
if (isScrolling) {
// if the infinite scroll says we're scrolling,
// then we retrieve the next page of recipes
handleGetRecipes();
}
}, [handleGetRecipes, isScrolling]);

return (