React Showcase
Client-side data fetching and mutation flows with CrossConnection in React apps.
React Hook: Health Status
ts
1import { useEffect, useState } from "react";2import { createCrossConnection } from "cross-connection";34const api = createCrossConnection({5 baseURL: "https://api.example.com",6 retry: { retries: 2, baseDelayMs: 120, maxDelayMs: 1200 },7});89export function HealthCard() {10 const [status, setStatus] = useState("loading");1112 useEffect(() => {13 api.get<{ ok: boolean }>("/health")14 .then((res) => setStatus(res.data.ok ? "ok" : "degraded"))15 .catch(() => setStatus("down"));16 }, []);1718 return <p>API status: {status}</p>;19}
Mutation Helper
ts
1import { createCrossConnection } from "cross-connection";23const api = createCrossConnection({4 security: { redactHeaders: ["authorization", "x-api-key"] },5});67export async function createProject(name: string) {8 const res = await api.post("/projects", { name }, {9 headers: { authorization: "Bearer token" },10 });1112 return res.data;13}
- Use a shared client instance to centralize retry and security behavior.
- Keep API calls in dedicated hooks or services for clean component boundaries.
- Apply interceptors once near app bootstrap for auth and tracing.