react-identiface

Github style deterministic avatar generator using unique identifier for React application . SVG format, SSR-safe, zero runtime deps.

import { Identiface } from "react-identiface";

<Identiface identifier="user_name" />;

Examples

Props

Prop	Type	Default
identifier	string (required)	-
size	number	100
background	string (any CSS color)	"#ffffff"
shape	"square" | "circle" | "triangle" | "diamond"	"square"
className	string	-
style	React.CSSProperties	-
ariaLabel	string (accessible label override)	identifier

Why this is SSR-friendly

Instead, this package ships a small (~100 line) pure-JS MD5 implementation (src/md5.ts) with no dependency on Web Crypto or Node's crypto module. It's synchronous, so:

• The component computes its hash and full SVG markup in a single render pass - no loading state, no useEffect.
• Server-rendered HTML and client-rendered HTML are byte-identical, so there's no hydration mismatch.
• It works the same in Node SSR, edge runtimes, static export, and the browser, since it doesn't touch any runtime-specific crypto API.

How the pattern is generated

1. md5(identifier) -> 16 bytes (0-255 each).
2. The first 3 bytes become the foreground color: rgb(r, g, b).
3. The 16 bytes are chunked into non-overlapping groups of 3, discarding any leftover (5 chunks of 3 = 15 bytes used, 1 discarded).
4. Each 3-byte chunk [a, b, c] is mirrored into a 5-wide row [a, b, c, b, a], then all 5 rows are flattened into a 25-cell grid. (replaces mirror_row/1 + build_grid/1)
5. A cell is "filled" (painted with the foreground color) when its byte value is even.
6. Each filled cell's grid position (row, col) maps directly onto an SVG <rect> inside a 0 0 100 100 viewBox, so size is purely a presentational scale-factor (width/height on the outer <svg>) and never affects the underlying pattern math.

.

Shapes

• square - the full grid, no clipping
• circle - grid clipped to an inscribed circle.
• triangle / diamond - grid clipped to the respective polygon.

All shapes clip the same underlying background + grid, so the same identifier still produces a recognizably-related avatar across shapes.

Building

npm install
npm run build