@andrejground/lab

A customizable React component and hooks library. Each component exposes a classNames API so you can override every visual slot to match your own design system.

Installation

npm install @andrejground/lab

pnpm add @andrejground/lab

yarn add @andrejground/lab

Getting Started

Import the styles in the root of your app:

import '@andrejground/lab/style.css';

Then use any component or hook:

import { Select, Dropdown, Popover } from '@andrejground/lab';

What's Inside

Components

• Select - single & multi-select with autocomplete, infinite scroll, keyboard navigation
• Dropdown - nested dropdowns, sections, keyboard navigation
• Popover - flexible positioning, focus trapping, backdrop options
• Tooltip - built on top of Popover

Hooks

• useDebouncedCallback - debounce any callback by a given delay
• useDebouncedValue - debounce a reactive value
• useDelayUnmount - delay unmounting to allow exit animations
• useFocusTrap - trap focus within a container
• useInfiniteScroll - trigger a callback when scrolling near the end of a list
• useLocalStorage - persist state in localStorage
• useMutationObserver - observe DOM mutations on an element
• usePositionObserver - track an element's position on screen
• usePrevValue - access the previous value of a variable
• usePreventBodyScroll - lock body scroll on demand
• useResizeObserver - observe size changes on an element
• useWindowResize - run a callback on window resize

Documentation

Full docs, live examples and API reference at andrejground.com/lab/getting-started/introduction.

Requirements

• React 18.2+ or React 19

License

MIT