@tuzzle/react

React bindings for Tuzzle media: a provider, an image component, and hooks built on @tuzzle/url.

bun add @tuzzle/react @tuzzle/url react

Usage

import { TuzzleImage, TuzzleProvider, useTuzzleImage, useUpload } from '@tuzzle/react'

function App() {
  return (
    <TuzzleProvider cdnUrl="https://cdn.tzzl.io" space="acme">
      <Avatar />
    </TuzzleProvider>
  )
}

function Avatar() {
  // Transform props are applied; remaining props pass through to <img>.
  return <TuzzleImage src="users/42.jpg" width={96} height={96} resize="fill" gravity="face" alt="avatar" loading="lazy" />
}

Hooks

const src = useTuzzleImage('photos/hero.jpg', { width: 1200, format: 'webp' })

const { upload, status, progress, error, data } = useUpload()
await upload(file, signedUploadUrl) // XHR-based, reports progress 0–100

useTuzzle() returns { url, image, config } for direct URL building.