coonlink-random-duck

Load PSD layers (or plain PNG sources), serve a random one over HTTP, and use it in React. Pure-JS PNG encoder (zlib), no native dependencies.

Install

npm i coonlink-random-duck

For .psd support install the optional parser too:

npm i @webtoon/psd

Usage

Node.js

const { loadPsdLayers, createServer, randomLayer } = require('coonlink-random-duck');

// 1. From a PSD file (needs @webtoon/psd)
const layers = await loadPsdLayers('./duck.psd');

// or from plain PNG sources — no PSD parser needed:
// const layers = [pngBuffer1, pngBuffer2, 'https://.../duck.png'];

// 2. Serve them
const { server, base } = await createServer(layers, { port: 3000, open: true });
// → http://127.0.0.1:3000/        (click = next layer)
// → http://127.0.0.1:3000/random  (raw random PNG)

// 3. Or just take a random one
const layer = randomLayer(layers); // Buffer (or the URL string, if any)

Options for createServer:

await createServer(layers, {
  host: '0.0.0.0',
  port: 3000,
  open: true   // open the page in the default browser (best-effort)
});

React

Works with any sources (URLs / Blobs / Uint8Array / Buffer / ArrayBuffer) — the PSD parser is only needed in Node.

import { RandomLayer, useRandomLayer } from 'coonlink-random-duck/react';

// Ready-made component (click = next layer)
<RandomLayer layers={pngBuffersOrUrls} />

// Or the hook
function Duck() {
  const { url, index, total, next } = useRandomLayer(sources);
  return url ? <img src={url} onClick={next} alt={`layer ${index}`} /> : null;
}

Options:

useRandomLayer(sources, {
  start: 0,            // initial index
  random: false,       // start on a random layer instead
  shuffleOnNext: true // next() picks a random layer (preserve order if false)
});

RandomLayer accepts the same options plus any <img> props (style, className, alt, ...) and onClick, which is called before advancing.

Notes

• loadPsdLayers is Node-only and uses @webtoon/psd (optional dependency). If the parser can't be installed or the layer API differs, just pass ready PNG buffers / URLs / Blobs instead.
• createServer accepts the same sources: PNG Buffers / Blobs / Uint8Array in Node, plus URL strings (fetched on demand per request).
• The PNG encoder in the core is pure JS (zlib) — no native dependencies.