Shared hooks, helpers, and small utilities for Geeks React applications.
yarn add @geeks-react-components/utils
# or
npm install @geeks-react-components/utilsPeer dependencies: react (>=18), react-dom (>=18), styled-components (^6), axios (>=1.4). Install them in your project if not already present.
| Hook | Description |
|---|---|
| useAxios | Data fetching with axios |
| useSWRAxios | Data fetching with SWR + axios |
| useCombinedRefs | Combine multiple refs (e.g. forwardRef + local) |
| useKeyPress | React to key press events |
| useMediaQuery | Match media queries (e.g. breakpoints) |
| useOuterClickNotifier | Detect clicks outside an element |
| useStorage | Sync state with localStorage/sessionStorage (with Storage context) |
| useUpdateEffect | useEffect that skips the first render |
| useWindowSize | Current window width/height |
| Helper | Description |
|---|---|
| debounce | Debounce function calls |
| localStorage | Local storage helpers |
| sessionStorage | Session storage helpers |
| cookieStorage | Cookie read/write helpers |
| parseToDate | Parse values to Date |
| positionalSpacing | Spacing/layout helpers |
| ReactHelper | React-specific utilities |
| stringHelpers | String utilities |
| updateNestedValue | Update nested object values |
| Component | Description |
|---|---|
| InjectClassName | Inject a class name into a child |
| PreviewContent | Preview/placeholder content wrapper |
Exports TypeScript types such as GetComponentProps, HTMLProps, Omit, WithStyle for use across packages and apps.
import {
useAxios,
useMediaQuery,
useWindowSize,
debounce,
useStorage,
} from '@geeks-react-components/utils';
// Hooks
const { data, loading, error } = useAxios('/api/users');
const isMobile = useMediaQuery('(max-width: 768px)');
const { width, height } = useWindowSize();
// Helpers
const debouncedSearch = debounce((q) => fetchSearch(q), 300);yarn build– Build the packageyarn test– Run testsyarn lint– Lint sourceyarn watch– Build in watch mode
MIT © Geeks Ltd