or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

development-tools.mdevent-handling.mdindex.mdlifecycle-management.mdreference-management.mdstate-management.mdtiming-utilities.mdutility-hooks.md
tile.json

index.mddocs/

Fluent UI React Hooks

A comprehensive collection of React hooks designed for modern React applications, offering utilities that extend beyond what React provides natively. Originally built for Fluent UI React components, these hooks are designed for high reusability across any React application.

Package Information

  • Package Name: @fluentui/react-hooks
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @fluentui/react-hooks

Core Imports

import { 
  useBoolean, 
  useConst, 
  useEventCallback, 
  useId, 
  useMergedRefs 
} from "@fluentui/react-hooks";

For CommonJS:

const { 
  useBoolean, 
  useConst, 
  useEventCallback, 
  useId, 
  useMergedRefs 
} = require("@fluentui/react-hooks");

Basic Usage

import { useBoolean, useId, useEventCallback } from "@fluentui/react-hooks";

function MyComponent() {
  // Boolean state management with stable callbacks
  const [isVisible, { setTrue: show, setFalse: hide, toggle }] = useBoolean(false);
  
  // Unique ID generation
  const buttonId = useId("my-button");
  
  // Stable event callback
  const handleClick = useEventCallback(() => {
    console.log("Button clicked");
    toggle();
  });

  return (
    <div>
      <button id={buttonId} onClick={handleClick}>
        {isVisible ? "Hide" : "Show"}
      </button>
      {isVisible && <div>Content is visible!</div>}
    </div>
  );
}

Architecture

The Fluent UI React Hooks library is organized around several key categories:

  • State Management: Hooks for managing boolean states, constant values, and controlled/uncontrolled patterns
  • Event Handling: Stable callback references and DOM event attachment utilities
  • Lifecycle Management: Component mount/unmount lifecycle hooks with proper cleanup
  • Reference Management: Utilities for merging refs and creating ref-based effects
  • Timing Utilities: Safe timeout and interval management with automatic cleanup
  • Development Tools: Warning systems and test utilities for better developer experience

Capabilities

State Management

Essential hooks for managing component state with stable references and optimized performance.

function useBoolean(initialState: boolean): [boolean, IUseBooleanCallbacks];
function useConst<T>(initialValue: T | (() => T)): T;
function useControllableValue<TValue, TElement extends HTMLElement>(
  controlledValue: TValue | undefined,
  defaultUncontrolledValue: TValue | undefined
): Readonly<[TValue | undefined, (update: React.SetStateAction<TValue | undefined>) => void]>;

State Management

Event Handling

Hooks for creating stable event callbacks and managing DOM event listeners with automatic cleanup.

function useEventCallback<Args extends unknown[], Return>(
  fn: (...args: Args) => Return
): (...args: Args) => Return;
function useOnEvent<TElement extends Element, TEvent extends Event>(
  element: React.RefObject<TElement> | TElement | Window | Document | undefined | null,
  eventName: string,
  callback: (ev: TEvent) => void,
  useCapture?: boolean
): void;

Event Handling

Lifecycle Management

Hooks for handling component lifecycle events with proper cleanup and timing control.

function useMount(callback: () => void): void;
function useUnmount(callback: () => void): void;
function useForceUpdate(): () => void;
function usePrevious<T>(value: T): T | undefined;

Lifecycle Management

Reference Management

Utilities for working with React refs, including merging multiple refs and creating effect-based refs.

function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObjectFunction<T>;
function useRefEffect<T>(
  callback: (value: T) => (() => void) | void,
  initial?: T | null
): RefCallback<T>;

Reference Management

Timing Utilities

Safe wrappers for setTimeout and setInterval with automatic cleanup on component unmount.

function useSetTimeout(): UseSetTimeoutReturnType;
function useSetInterval(): UseSetIntervalReturnType;

Timing Utilities

Utility Hooks

Additional utility hooks for unique ID generation, target element resolution, and async operations.

function useId(prefix?: string, providedId?: string): string;
function useTarget<TElement extends HTMLElement>(
  target: Target | undefined,
  hostElement?: React.RefObject<TElement | null>
): Readonly<[React.RefObject<Element | MouseEvent | Point | Rectangle | null>, Window | undefined]>;
function useAsync(): Async;

Utility Hooks

Development Tools

Development-focused hooks for warnings, testing, and debugging support.

function useWarnings<P extends {}>(options: IWarningOptions<P>): void;

Development Tools

Core Types

// Boolean state management
interface IUseBooleanCallbacks {
  setTrue: () => void;
  setFalse: () => void;
  toggle: () => void;
}

// Reference management
type RefObjectFunction<T> = React.RefObject<T> & ((value: T) => void);
type RefCallback<T> = ((value: T | null) => void) & React.RefObject<T>;

// Timing utilities
interface UseSetTimeoutReturnType {
  setTimeout: (callback: () => void, duration: number) => number;
  clearTimeout: (id: number) => void;
}

interface UseSetIntervalReturnType {
  setInterval: (callback: () => void, duration: number) => number;
  clearInterval: (id: number) => void;
}

// Controllable values
type ChangeCallback<
  TElement extends HTMLElement,
  TValue,
  TEvent extends React.SyntheticEvent<TElement> | undefined
> = (ev: TEvent, newValue: TValue | undefined) => void;

// Target resolution
type Target = Element | string | MouseEvent | Point | Rectangle | null | React.RefObject<Element>;