@pixzle/react

React components for Pixzle.

Installation

npm i @pixzle/react

Usage

PixzleImage

import { PixzleImage } from '@pixzle/react';

Using manifest URL

<PixzleImage
  manifest="https://example.com/manifest.json"
  image="https://example.com/fragment.png"
/>

Using manifest URL with multiple images

{/* #1 */}
<PixzleImage
  manifest="https://example.com/manifest.json"
  image="https://example.com/fragment1.png"
  // imageIndex={0}
/>

{/* #2 */}
<PixzleImage
  manifest="https://example.com/manifest.json"
  image="https://example.com/fragment2.png"
  imageIndex={1}
/>

{/* #3 */}
<PixzleImage
  manifest="https://example.com/manifest.json"
  image="https://example.com/fragment3.png"
  imageIndex={2}
/>

Using manifest data

<PixzleImage
  manifestData={manifestData}
  image="https://example.com/fragment.png"
/>

Using explicit parameters

<PixzleImage
  blockSize={2}
  seed={72411}
  imageInfo={{ w: 500, h: 500 }}
  image="https://example.com/fragment.png"
/>