@usenavii/react

A thin React component on top of @usenavii/core. Memoized; renders the engine output as a data-URI <img> so the SVG is treated as opaque by the browser.

Install

npm i @usenavii/react

@usenavii/core is bundled in; you don't install it separately unless you also use the engine directly.

Usage

import { Navii } from '@usenavii/react';

export function UserChip({ user }) {
  return (
    <Navii
      seed={user.id}
      size={48}
      title={user.name}
      animated
      className="rounded-full"
    />
  );
}

Props

Extends AvatarOptions (see core docs) plus:

Prop	Type	Description
`seed`	string	Required. See the seed rule.
`className`	string	Class applied to the `<img>` element.
`style`	CSSProperties	Inline style on the `<img>`.
`alt`	string	Alt text. Falls back to `title` if omitted.

Memoization

The component memoizes the data-URI on seed + all option props via useMemo. This runs on both the server (SSR) and client (hydration), so output is byte-identical between the two renders. Subsequent renders with unchanged props reuse the cached URI without re-running the engine.

If you're rendering a list, ensure your seeds are stable across renders (e.g. user.id, not idx + Date.now()) — otherwise every render rebuilds every avatar.

Re-exports

All @usenavii/core top-level exports are re-exported for convenience: createAvatar, selectAvatar, renderAvatar, plus the types AvatarSpec, AvatarOptions, Palette.