web-api-hooks

Key features

• 🌳 Bundler-friendly with tree shaking support
• 📚 Well-documented and type-safe interfaces
• ⚛️ Zero-config server-side rendering capability
• 📦 Self-contained, free of runtime dependencies

Usage

import { useGeolocation, useLocalStorage } from 'web-api-hooks';

Sandbox

Reference

Table of Contents

• Sensors

• Storage

• Scheduling

Sensors

useColorSchemePreference

Examples

function Component() {
  const preferDarkMode = useColorSchemePreference() === 'dark';
  // ...
}

useDeviceMotion

Examples

function Component() {
  const { acceleration, rotationRate, interval } = useDeviceMotion();
  // ...
}

function Component() {
  const { alpha, beta, gamma } = useDeviceOrientation();
  // ...
}

function Component() {
  const documentReadiness = useDocumentReadiness();
  if (documentReadiness === 'interactive') {
    // You may interact with any element of the document from now
  }
  // ...
}

useDocumentVisibility

Examples

function Component() {
  const documentVisibility = useDocumentVisibility();
  if (documentVisibility === 'hidden') {
    // Reduce resource utilization to aid background page performance
  }
  // ...
}

useFocus

Examples

function Component() {
  const [isFocused, bindFocus] = useFocus();
  // ...
  return <ElementToObserve {...bindFocus} />;
}

Examples

function Component() {
  const geolocation = useGeolocation();
  if (geolocation) {
    const { coords } = geolocation;
  }
  // ...
}

function Component() {
  const [isHovered, bindHover] = useHover();
  // ...
  return <ElementToObserve {...bindHover} />;
}

function Component() {
  const preferredLanguages = useLanguagePreferences();
  // ...
}

useMedia

Parameters

• query string Media query to parse.

Examples

function Component() {
  const isWidescreen = useMedia('(min-aspect-ratio: 16/9)');
  // ...
}

useMotionPreference

Examples

function Component() {
  const preferReducedMotion = useMotionPreference() === 'reduce';
  // ...
}

useMouseCoords

Examples

function Component() {
  const [mouseX, mouseY] = useMouseCoords();
  // ...
}

function Component() {
  const isOnline = useNetworkAvailability();
  // ...
}

function Component() {
  const networkInformation = useNetworkInformation();
  if (networkInformation) {
    const { effectiveType, downlink, rtt, saveData } = networkInformation;
  }
  // ...
}

Examples

function Component() {
  const ref = useRef < HTMLElement > null;
  const [width, height] = useSize(ref);
  // ...
  return <ElementToObserve ref={ref} />;
}

function Component() {
  const viewportScale = useViewportScale();
  // ...
}

function Component() {
  const [viewportScrollX, viewportScrollY] = useViewportScrollCoords();
  // ...
}

function Component() {
  const [viewportWidth, viewportHeight] = useViewportSize();
  // ...
}

function Component() {
  const [windowScrollX, windowScrollY] = useWindowScrollCoords();
  // ...
}

function Component() {
  const [windowWidth, windowHeight] = useWindowSize();
  // ...
}

Parameters

• key string Identifier to associate the stored value with.
• initialValue (T | function (): T | null) Value used when no item exists with the given key. Lazy initialization is available by using a function which returns the desired value. (optional, default null)
• errorCallback function (error: (DOMException | TypeError)): void? Method to execute in case of an error, e.g. when the storage quota has been exceeded or trying to store a circular data structure.

Examples

function Component() {
  const [visitCount, setVisitCount] =
    useLocalStorage < number > ('visitCount', 0);
  useEffect(() => {
    setVisitCount((count) => count + 1);
  }, []);
  // ...
}

Parameters

• key string Identifier to associate the stored value with.
• initialValue (T | function (): T | null) Value used when no item exists with the given key. Lazy initialization is available by using a function which returns the desired value. (optional, default null)
• errorCallback function (error: (DOMException | TypeError)): void? Method to execute in case of an error, e.g. when the storage quota has been exceeded or trying to store a circular data structure.

Examples

function Component() {
  const [name, setName] = useSessionStorage < string > ('name', 'Anonymous');
  // ...
}

Examples

function Component() {
  useEventListener(window, 'error', () => {
    console.log('A resource failed to load.');
  });
  // ...
}

function Component() {
  useInterval(() => {
    // Custom logic to execute each second
  }, 1000);
  // ...
}

const geolocation = useGeolocation(geolocationOptions);
// ...