access-hood Documentation

Zero-dependency, client-side access hood for React. It provides a lightweight visual gate that asks for a password once and stores an obfuscated flag in localStorage to reveal gated content on subsequent visits.

Installation

Install in your project:

npm install access-hood

Quick start

Wrap protected content with AccessHood. Users enter a shared password once per browser:

import React from "react";
import { AccessHood } from "access-hood";

export const Demo = () => {
  return (
    <AccessHood
      password="demo-password"
      passwordHint="Ask the team lead"
      metadata={
          title: "Protected Preview",
          description: "This is a protected preview"
        }
      theme={{
        buttonBackground: "#2563eb",
        buttonBorder: "#1e3a8a",
        buttonText: "#ffffff",
        containerBorder: "#e2e8f0",
        hintText: "#475569",
        errorText: "#dc2626",
      }}
    >
      <main>
        <h1>Private content</h1>
        <p>Visible after entering the password once.</p>
      </main>
    </AccessHood>
  );
};

Features

Client-side visual gate

Shows a minimal password form until unlocked. No network calls or server required.

<AccessHood password="my-shared-password">{content}</AccessHood>

One-time unlock per browser

On success, an obfuscated key/value derived from the password is stored in localStorage, so the content stays unlocked for subsequent visits.

Theming

Override colors via the theme prop or compute styles with getStyles for reuse.

import { getStyles } from "access-hood";
const styles = getStyles({ buttonBackground: "#2563eb" });

Metadata

Set document.title when the gate mounts using the optional metadata prop.

<AccessHood metadata={{ title: "Protected Preview" }}>...</AccessHood>

TypeScript-first and zero-dependency

Ships types and no runtime dependencies. Uses Web Crypto when available with a tiny deterministic fallback.

Notes and limitations

Client-side only; gating is purely visual. Do not ship sensitive data unless authorized server-side.
SSR: The gate renders on the client. Initial server render returns nothing; the form appears after hydration.
Changing the password or clearing site data resets the gate.

API Reference

Exports

AccessHood — React component that renders the gate and your children when unlocked
getStyles — helper to compute the inline styles used by the component
AccessHoodTheme — TypeScript type for theme overrides

AccessHood props

children: React.ReactNode — Content to show after access is granted
password: string — Required shared password to unlock
passwordHint?: string — Optional hint rendered under the form
metadata?: { title?: string; description?: string } — Optional metadata; sets document.title if provided
theme?: Partial<AccessHoodTheme> — Optional theme overrides for colors