@sebastienrousseau/crypto-react

React hooks and context provider for client-side cryptographic operations with zero boilerplate.

Contents

Getting started

• Install — installation via pnpm, npm, or yarn
• Requirements — runtime floor and environment prerequisites
• Quick Start — minimal working usage sample

The Crypto Service ecosystem

• The Crypto Service ecosystem — full 14-package suite overview

Package reference

• Reference & Usage — features, configuration, and capabilities
• Examples — runnable sample code

Operational

• Development — build, lint, format, and test targets
• Security — vulnerability disclosure and cryptographic invariants
• Documentation — TypeDoc API docs and ecosystem guides
• Stability guarantees — SemVer axis and release policy
• License

Install

pnpm add @sebastienrousseau/crypto-react
# or
npm install @sebastienrousseau/crypto-react
# or
yarn add @sebastienrousseau/crypto-react
Copy

Back to Top

Requirements

• Node.js: ^22.0.0 or >=24.0.0 (active and maintenance LTS releases)
• Package Manager: pnpm >=9 (recommended) or npm >=10
• TypeScript: >=5.0 (when compiling with TypeScript)

Back to Top

Quick Start

import {
  CryptoProvider,
  useKeypair,
  useEncrypt,
  useHash,
  useSignature,
} from "@sebastienrousseau/crypto-react";

function App() {
  return (
    <CryptoProvider defaultKey="deadbeef...64-hex-chars">
      <MyComponent />
    </CryptoProvider>
  );
}

function MyComponent() {
  const { generate, publicKey } = useKeypair("ed25519");
  const { encrypt, decrypt } = useEncrypt();
  const { hash, digest } = useHash("sha3-256");
  const { sign, verify } = useSignature();

  return (
    <div>
      <button onClick={() => generate()}>Generate Ed25519 Key Pair</button>
      {publicKey && <code>{publicKey}</code>}
    </div>
  );
}
Copy

Back to Top

The Crypto Service ecosystem

Crypto Service provides a complete cryptography stack across 14 specialized packages:

Back to Top

Overview

crypto-react provides React hooks for client-side cryptographic operations. It wraps @sebastienrousseau/crypto-lib in a reactive API with hooks for key generation, symmetric encryption, hashing, and digital signatures. A CryptoProvider component supplies shared configuration (default key, server URL, API key) to all hooks via React context.

Back to Top

Wrap your component tree with <CryptoProvider> to supply shared configuration to all hooks.

<CryptoProvider
  defaultKey="a1b2c3d4...64-hex-chars"
  serverUrl="https://crypto.example.com"
  apiKey="my-api-key"
>
  <App />
</CryptoProvider>
Copy

Access the context from any child via useCryptoContext().

Back to Top

Back to Top

import { useKeypair } from "@sebastienrousseau/crypto-react";

function KeygenPage() {
  const { publicKey, generate, isGenerating } = useKeypair("ed25519");

  return (
    <div>
      <button onClick={() => generate()} disabled={isGenerating}>
        Generate Ed25519
      </button>
      {publicKey && <code>{publicKey.slice(0, 64)}...</code>}
    </div>
  );
}
Copy

import { useEncrypt } from "@sebastienrousseau/crypto-react";

function EncryptPage() {
  const { encrypt, decrypt, ciphertext, plaintext, isProcessing } =
    useEncrypt();

  return (
    <div>
      <button onClick={() => encrypt("secret message")} disabled={isProcessing}>
        Encrypt
      </button>
      {ciphertext && (
        <button onClick={() => decrypt(ciphertext)} disabled={isProcessing}>
          Decrypt
        </button>
      )}
      {plaintext && <p>Decrypted: {plaintext}</p>}
    </div>
  );
}
Copy

import { useHash } from "@sebastienrousseau/crypto-react";

function HashPage() {
  const { hash, digest, isHashing } = useHash("sha3-256");

  return (
    <div>
      <button onClick={() => hash("Hello")} disabled={isHashing}>
        SHA3-256
      </button>
      {digest && <code>{digest}</code>}
    </div>
  );
}
Copy

import { useKeypair, useSignature } from "@sebastienrousseau/crypto-react";

function SignPage() {
  const { publicKey, privateKey, generate } = useKeypair("ed25519");
  const { sign, verify, signature, isValid, isProcessing } = useSignature();

  return (
    <div>
      <button onClick={() => generate()}>Generate Keys</button>
      {privateKey && (
        <button
          onClick={() => sign(privateKey, "my message")}
          disabled={isProcessing}
        >
          Sign
        </button>
      )}
      {signature && publicKey && (
        <button
          onClick={() => verify(publicKey, "my message", signature)}
          disabled={isProcessing}
        >
          Verify
        </button>
      )}
      {isValid !== null && <p>Valid: {isValid ? "Yes" : "No"}</p>}
    </div>
  );
}
Copy

Back to Top

All examples are self-contained TypeScript files in the examples/ directory. Run any example with:

npx ts-node examples/<name>.ts
Copy

Back to Top

Back to Top

Development

pnpm --filter @sebastienrousseau/crypto-react run build
pnpm --filter @sebastienrousseau/crypto-react run test
pnpm --filter @sebastienrousseau/crypto-react run lint
pnpm --filter @sebastienrousseau/crypto-react run format
Copy

All 14 packages in the Crypto Service workspace maintain a 100% coverage floor across statements, branches, functions, and lines.

Back to Top

Security

Report vulnerabilities privately via GitHub Security Advisories or according to SECURITY.md. Never report security issues publicly.

All cryptographic operations leverage audited primitives, enforce constant-time execution where applicable, and zero sensitive key material upon disposal.

Back to Top

Documentation

• Full Suite Documentation
• API Reference (TypeDoc)
• Developer Guide
• Security Policy
• Architecture & Design

Back to Top

Stability guarantees

Versions advance strictly one step at a time on the 0.0.x line (v0.0.1 → v0.0.2 → v0.0.3 ... → v0.0.999 → v0.1.0). Work for every release iteration begins on a dedicated feat/v<version> branch.

All 14 packages in the workspace move in lockstep. Public API signatures, cipher output formats, and serialization schemas are strictly versioned. Breaking changes to serialized formats or algorithm defaults are considered major breaking changes. Minimum toolchain upgrades (e.g. Node.js LTS floor) are governed by POLICIES.md.

Back to Top

License

Dual-licensed under Apache 2.0 or MIT, at your option.

Copyright (c) 2022-2026 Sebastien Rousseau and The Crypto Service Suite contributors.

Back to Top