@tuzzle/react

@tuzzle/react wraps @tuzzle/url and @tuzzle/chooser into idiomatic React components and hooks.

npm install @tuzzle/react

Provider

Wrap your app once with the CDN host and space so children can build URLs without repeating config.

import { TuzzleProvider } from '@tuzzle/react'

export default function App({ children }) {
  return (
    <TuzzleProvider cdnUrl="https://cdn.tzzl.io" space="a1b2c3">
      {children}
    </TuzzleProvider>
  )
}

TuzzleImage

Renders an <img> with the transform options applied to the URL. Any extra props pass through to the element.

import { TuzzleImage } from '@tuzzle/react'

<TuzzleImage src="image-01HQ..." width={400} height={300} format="webp" quality={80} alt="Cover" loading="lazy" />

Choosing files

Use TuzzleChooserButton for a ready-made button, or TuzzleChooser for controlled open state.

import { TuzzleChooser, TuzzleChooserButton } from '@tuzzle/react'

<TuzzleChooserButton space="a1b2c3" cdnUrl="https://cdn.tzzl.io" onSelect={insert}>
  Choose media
</TuzzleChooserButton>

// or controlled
function Picker() {
  const [open, setOpen] = useState(false)
  return <TuzzleChooser space="a1b2c3" cdnUrl="https://cdn.tzzl.io" open={open} onOpenChange={setOpen} onSelect={insert} />
}

The chooser accepts every @tuzzle/chooser option (multiple, upload, accept, theme, auth, …).

Hooks

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

const src = useTuzzleImage('image-01HQ...', { width: 400, format: 'webp' })

const { upload, progress, status } = useUpload()
await upload(file, uploadUrl) // uploadUrl from a presigned/direct upload endpoint