useSSR

GitHub

Custom hook that detects the current environment (Browser, Server, or Native) and capability support (Workers, EventListeners). useful for avoiding hydration mismatches.

Installation

npx sse-hooks add use-ssr

yarn dlx sse-hooks add use-ssr

pnpm dlx sse-hooks add use-ssr

deno run -A npm:sse-hooks add use-ssr

bunx sse-hooks add use-ssr

Usage

example.ts

import { useSSR } from "./{hooks file}";

const { isBrowser, isServer } = useSSR();
if (isServer) {
  return <StaticLoader />;
}
return <ClientComponent />;

API

Parameters

Prop	Default	Type

Returns

Return Value	Default	Type
`return`	-	`UseSSRReturn` Hook return value

Types Aliases

No specific type aliases defined for this component.

Changelog

31af5 — Refactor useBattery hook and remove utility functions

c165d — feat: enhance useRoleGuard and useSSR hooks with additional options and documentation

30da4 — feat: add new hooks and their metadata

2f161 — feat: add useConferenceSystem, useKbd, useMediaQuality, useNetworkInformation, usePortal, useRoleGuard, useScreenShare, useSymbol hooks

useSearchWithSuggestions

A comprehensive hook for building "Command Palette" or "Omnibar" style search interfaces. * It provides "Ghost Text" autocomplete (like Google search), command scoping (like Slack's `/` commands), and keyboard support. It handles the complex logic of parsing input strings to separate commands from queries.

useSymbol

Custom hook for managing ES6 Symbols. Provides utilities to create unique symbols, manage a registry of symbols, and access well-known symbols.