Developers
Start building
Themes/Theme SDK/Modules/ui/Hooks

Hooks

The hooks of @poltura/theme-sdk/ui.

On this page
import { … } from '@poltura/theme-sdk/ui';

useMediaQuery

Whether the browser's viewport matches a media query; false on the server and while hydrating.

useMediaQuery(query: string): boolean

Parameters

  • query: string: A media query as matchMedia takes it, such as (min-width: 768px).

Returns: True once the browser reports a match.

Example

import { useMediaQuery } from '@poltura/theme-sdk/ui';

export function Layout() {
  const wide = useMediaQuery('(min-width: 768px)');
  return <p>{wide ? 'Wide screen' : 'Narrow screen'}</p>;
}

useInView

A reveal-on-scroll flag for an entrance animation; it starts true so content never stays hidden.

useInView(options?: InViewOptions): InView

Parameters

  • options?: InViewOptions: When the element counts as in view, and whether that is permanent.

Returns: A ref for the element and whether it is in view.

Example

import { useInView } from '@poltura/theme-sdk/ui';

export function Reveal({ children }: { children: string }) {
  const { ref, inView } = useInView({ threshold: 0.2 });
  return (
    <div ref={ref} className={inView ? 'opacity-100 transition' : 'opacity-0'}>
      {children}
    </div>
  );
}

useSnapCarousel

Drives a CSS scroll-snap track: autoplay, the active slide and the controls behind dots or thumbnails.

useSnapCarousel(count: number, opts: SnapCarouselOptions): SnapCarousel

Parameters

  • count: number: How many slides the track holds.
  • opts: SnapCarouselOptions: Whether to autoplay and how often.

Returns: The track ref, the active index, a function to go to a slide and the autoplay state.

Example

import { useSnapCarousel } from '@poltura/theme-sdk/ui';

export function Slides({ slides }: { slides: string[] }) {
  const { trackRef, activeIndex, goTo } = useSnapCarousel(slides.length, {
    autoplay: true,
    intervalMs: 5000,
  });
  return (
    <div>
      <div ref={trackRef} className='flex snap-x snap-mandatory overflow-x-auto'>
        {slides.map((slide) => (
          <div key={slide} className='w-full shrink-0 snap-start'>
            {slide}
          </div>
        ))}
      </div>
      <button type='button' onClick={() => goTo(activeIndex + 1)}>
        Next
      </button>
    </div>
  );
}

useRovingTabs

Arrow, Home and End key handling for a tablist whose selected tab alone is in the tab order.

useRovingTabs<Id extends string>(options: RovingTabsOptions<Id>): (event: KeyboardEvent<HTMLButtonElement>, index: number) => void

Parameters

  • options: RovingTabsOptions<Id>: The tabs, what selecting one does and how to find a tab's button.

Returns: A keydown handler for the tab buttons, called with the event and the tab's index.

Example

import { useState } from 'react';
import { useRovingTabs } from '@poltura/theme-sdk/ui';

const tabs = [{ id: 'details' }, { id: 'reviews' }];

export function Tabs() {
  const [active, setActive] = useState('details');
  const onKeyDown = useRovingTabs({
    tabs,
    onSelect: setActive,
    tabDomId: (id) => `tab-${id}`,
  });
  return (
    <div role='tablist'>
      {tabs.map((tab, index) => (
        <button
          key={tab.id}
          id={`tab-${tab.id}`}
          role='tab'
          type='button'
          aria-selected={tab.id === active}
          tabIndex={tab.id === active ? 0 : -1}
          onKeyDown={(event) => onKeyDown(event, index)}
        >
          {tab.id}
        </button>
      ))}
    </div>
  );
}
Last updated