Skip to Content
TechnicalHooks

Hooks Reference

All hooks live in src/hooks/. Every exported hook should have a JSDoc block.

Naming Convention

  • File: camelCase — e.g., useNavBehavior.ts
  • Export: matches filename — export function useNavBehavior()
  • Pattern: use{Domain}{Action}

useCourseSlide

File: useCourseSlide.ts

Manages course slide state. Exposes activeSlide, index. Actions: goTo, goPrev, goNext.

Signature

function useCourseSlide(): { activeSlide: number; goTo: (index: number) => void; goPrev: () => void; goNext: () => void; }

Return Value

{ activeSlide: number; goTo: (index: number) => void; goPrev: () => void; goNext: () => void; }

Example

// TODO: Add usage example
const result = useCourseSlide();

useNavBehavior

File: useNavBehavior.ts

Manages nav behavior state. Exposes scrolled, activeSection, drawerOpen, href. Actions: setDrawerOpen, scrollTo.

Signature

function useNavBehavior(): { scrolled: boolean; activeSection: string | null; drawerOpen: boolean; setDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>; scrollTo: (href: string) => void; }

Return Value

{ scrolled: boolean; activeSection: string | null; drawerOpen: boolean; setDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>; scrollTo: (href: string) => void; }

Example

// TODO: Add usage example
const result = useNavBehavior();

usePanelHeight

File: usePanelHeight.ts

Manages panel height state based on activeSlide and expanded. Exposes height, el, index. Actions: measureRef.

Signature

function usePanelHeight(activeSlide: number, expanded: boolean): { height: number | undefined; measureRef: (el: HTMLDivElement | null, index: number) => void; }

Parameters

NameTypeRequiredDescription
activeSlidenumberYesTODO
expandedbooleanYesTODO

Return Value

{ height: number | undefined; measureRef: (el: HTMLDivElement | null, index: number) => void; }

Example

// TODO: Add usage example
const result = usePanelHeight(activeSlide, expanded);

useRenInteraction

File: useRenInteraction.ts

Manages ren interaction state. Exposes phase. Actions: onEnter, onLeave, onToggle.

export type RenPhase = 'fan' | 'burst' | 'retract';

Signature

function useRenInteraction(): { phase: RenPhase; onEnter: () => void; onLeave: () => void; onToggle: () => void; }

Return Value

{ phase: RenPhase; onEnter: () => void; onLeave: () => void; onToggle: () => void; }

Example

// TODO: Add usage example
const result = useRenInteraction();

useTestimonialSlide

File: useTestimonialSlide.ts

Manages testimonial slide state based on testimonials. Exposes activeIndex, isHovered, idx, v, current. Actions: goTo, goPrev, goNext, setHovered.

Signature

function useTestimonialSlide(testimonials: Testimonial[]): { activeIndex: number; isHovered: boolean; goTo: (idx: number) => void; goPrev: () => void; goNext: () => void; setHovered: (v: boolean) => void; current: Testimonial; }

Parameters

NameTypeRequiredDescription
testimonialsTestimonial[]YesTODO

Return Value

{ activeIndex: number; isHovered: boolean; goTo: (idx: number) => void; goPrev: () => void; goNext: () => void; setHovered: (v: boolean) => void; current: Testimonial; }

Example

// TODO: Add usage example
const result = useTestimonialSlide(testimonials);

useThemeSync

File: useThemeSync.ts

Manages theme sync state.

Signature

function useThemeSync(): void

Return Value

This hook returns nothing.

Example

// TODO: Add usage example
const result = useThemeSync();

useTypewriterDemo

File: useTypewriterDemo.ts

Manages typewriter demo state. Exposes phase, isMobile, shownLines, promptLines.

export type TypewriterPhase = 'typing' | 'thinking' | 'response';

Signature

function useTypewriterDemo(): { phase: TypewriterPhase; isMobile: boolean; shownLines: string[]; promptLines: string[]; }

Return Value

{ phase: TypewriterPhase; isMobile: boolean; shownLines: string[]; promptLines: string[]; }

Example

// TODO: Add usage example
const result = useTypewriterDemo();
API ReferenceComponents