Hooks & Utilities

Custom React hooks and utility functions available through separate entry points for optimal tree-shaking.

useDebounce

Debounces a value update by a specified delay. Useful for search inputs, API calls, etc.

Instant: (empty)

Debounced (500ms): (empty)

import { useDebounce } from 'fluxo-ui/hooks';

const [search, setSearch] = useState('');
const debouncedSearch = useDebounce(search, 500);

// debouncedSearch only updates 500ms after the user stops typing

useMobile

Returns true when viewport width is below 768px. Automatically updates on resize.

🖥️

Desktop View

isMobile = false

Resize your browser window to see this change

import { useMobile } from 'fluxo-ui/hooks';

const isMobile = useMobile();

return isMobile ? <MobileLayout /> : <DesktopLayout />;

useClickOutside

Detects clicks outside a referenced element. Commonly used for closing dropdowns, modals, and popups.

Outside clicks detected: 0

import { useClickOutside } from 'fluxo-ui/hooks';

const ref = useRef<HTMLDivElement>(null);
const [open, setOpen] = useState(false);

useClickOutside(ref, () => setOpen(false), open);

useKeyboard

Registers global keyboard event handlers. Supports enabling/disabling and auto-cleanup.

Keyboard handling enabled

Use arrow keys to move the blue dot:

import { useKeyboard } from 'fluxo-ui/hooks';

useKeyboard({
  ArrowUp: () => moveUp(),
  ArrowDown: () => moveDown(),
  Escape: () => close(),
}, enabled);

withFieldLabel

A higher-order component that wraps any input component with a FieldLabel.

withFieldLabel

Higher-order component that wraps any input component with a FieldLabel, adding label, required, error, and hint props.

Email Address*

We'll never share your email

Username

Disabled Field

import { withFieldLabel } from 'fluxo-ui/utils';
import { TextInput } from 'fluxo-ui';

const LabeledTextInput = withFieldLabel(TextInput);

<LabeledTextInput
  label="Email Address"
  required
  hint="We'll never share your email"
  error={error}
  placeholder="you@example.com"
/>

Utility Functions

Pure utility functions for common operations like deep property access, immutable updates, and nil checks.

Utility Functions

Common utility functions for data manipulation, validation, and more.

getFieldValue

Object: {"user":{"name":"Alice","address":{"city":"NYC","zip":"10001"}}}

="NYC"

setFieldValue (immutable)

{"user":{"name":"Bob","address":{"city":"NYC","zip":"10001"}}}

isNil

isNil(null)true

isNil(undefined)true

isNil(0)false

isNil('')false

isNil(false)false

getPercentageChange

getPercentageChange(120, 100) = 20%

removeNilValues

Input: { a: 1, b: null, c: undefined, d: "hello", e: 0 }

Output: {"a":1,"d":"hello","e":0}

import { getFieldValue, setFieldValue, debounce, isNil, getPercentageChange } from 'fluxo-ui/utils';

// Deep property access
getFieldValue(obj, 'user.address.city'); // "NYC"

// Immutable deep set
const next = setFieldValue(obj, 'user.name', 'Jane');

// Percentage change
getPercentageChange(120, 100); // 20

// Nil check
isNil(null); // true
isNil(0);    // false

// Async debounce
const search = debounce(async (q) => fetch(url + q), 300);

Import

// Hooks
import { useDebounce, useMobile } from 'fluxo-ui/hooks';

// Utilities
import { withFieldLabel } from 'fluxo-ui/utils';

Features

Hooks

Custom React hooks for debouncing, responsive detection, keyboard, click-outside, and positioning.

Utilities

Pure utility functions for deep property access, immutable updates, nil checking, and debouncing.

TypeScript

Full type safety with generic hooks and properly typed utility functions.

Tree-Shakeable

Import only what you need from separate entry points for hooks and utils.

HOC Pattern

withFieldLabel wraps any input component to add label, error, and hint support.

Zero Dependencies

All hooks and utilities are self-contained with no external dependencies.