React Hookv1.0.0 • Strict TypeScript

useGlide()

The primary hook to inspect active transitions, mutate configuration dynamically, monitor lifecycle states, and programmatically orchestrate navigation.

TypeScript Types CLI Commands 69+ Transitions Interactive Studio

ES Module Import

import { useGlide } from '@/components/glidecn';

Signature & State

Call useGlide() in any client component rendered inside <GlideCNProvider> to read transition state and trigger runtime changes.

Signature

const {
  currentTransition,
  setTransition,
  config,
  setConfig,
  animationState,
  reducedMotion,
  transitionDefinition,
} = useGlide();

const {  currentTransition,  setTransition,  config,  setConfig,  animationState,  reducedMotion,  transitionDefinition,} = useGlide();

useGlide() Return Object

currentTransition

string

The machine name of the currently active transition preset (e.g. "slide", "circular-portal").

setTransition

(name: string) => void

Imperatively switches the active transition before or during route navigation.

config

Required<TransitionConfig>

The fully merged active configuration object (duration, delay, ease, direction, stagger, custom).

setConfig

(config: TransitionConfig) => void

Dynamically updates transition timing, easing, or directional parameters at runtime.

animationState

"idle" | "entering" | "exiting" | "complete"

Current lifecycle phase of the page transition.

reducedMotion

boolean

Whether reduced motion accessibility mode is currently active.

transitionDefinition

TransitionDefinition | null

Direct reference to the registered transition definition metadata and variant builders.

Return Property Guides

Detailed explanations and code examples for each property and mutator returned by useGlide().

Real-World Recipes

Practical patterns for multi-step wizards, direction orchestration, and preference controllers.

components/StepControls.tsx

import { useGlide } from '@/components/glidecn';
import { useRouter } from 'next/navigation';

export function StepControls({ step }: { step: number }) {
  const { setTransition, setConfig } = useGlide();
  const router = useRouter();

  const handleNext = () => {
    setTransition('slide');
    setConfig({ direction: 'left' });
    router.push(`/wizard/step-${step + 1}`);
  };

  const handleBack = () => {
    setTransition('slide');
    setConfig({ direction: 'right' });
    router.push(`/wizard/step-${step - 1}`);
  };

  return (
    <div className="flex gap-4">
      <button onClick={handleBack}>Back</button>
      <button onClick={handleNext}>Next</button>
    </div>
  );
}

import { useGlide } from '@/components/glidecn';import { useRouter } from 'next/navigation';export function StepControls({ step }: { step: number }) {  const { setTransition, setConfig } = useGlide();  const router = useRouter();  const handleNext = () => {    setTransition('slide');    setConfig({ direction: 'left' });    router.push(`/wizard/step-${step + 1}`);  };  const handleBack = () => {    setTransition('slide');    setConfig({ direction: 'right' });    router.push(`/wizard/step-${step - 1}`);  };  return (    <div className="flex gap-4">      <button onClick={handleBack}>Back</button>      <button onClick={handleNext}>Next</button>    </div>  );}

← <Page> Segment useTransitionConfig() Hook →