@webring-kit/react

React wrappers for Webring Kit custom elements.

This package provides typed React components that render the underlying Webring Kit Web Components while keeping React usage ergonomic.

Install

pnpm add @webring-kit/react

npm install @webring-kit/react

React is a peer dependency and must be provided by the consuming app.

Usage

import { WebringNav } from "@webring-kit/react";

export function Footer() {
  return (
    <footer>
      <WebringNav
        src="/rings/example.json"
        site="https://alice.example.com"
        layout="nav"
        theme="inherit"
        random
      />
    </footer>
  );
}

Components

import {
  WebringBadge,
  WebringList,
  WebringNav
} from "@webring-kit/react";

WebringNav

<WebringNav
  src="/rings/example.json"
  site="https://alice.example.com"
  random
/>

WebringList

<WebringList src="/rings/example.json" />

WebringBadge

<WebringBadge src="/rings/example.json" />

Notes

The React package depends on @webring-kit/element, which defines browser custom elements. In SSR-capable React frameworks, render these wrappers only from a client-side boundary unless your framework explicitly supports custom elements during server rendering.

For Next.js, prefer a Client Component or the helpers from @webring-kit/next.

Related packages

• @webring-kit/element for native custom elements.
• @webring-kit/next for Next.js helpers.
• @webring-kit/core for non-UI logic.