> ## Documentation Index
> Fetch the complete documentation index at: https://autorender.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Render optimized, responsive images and video in React with `<ARImage>` and upload files with the Autorender uploader widget.

The `@autorender/react` SDK gives React two building blocks: `<ARImage>` and `<ARVideo>` components that render optimized, responsive media from an Autorender delivery URL, and an `<AutorenderUploader>` widget for uploading files from the browser.

## Prerequisites

* An Autorender account with a workspace ID — [create one in the dashboard](https://app.autorender.io)
* A React project (Vite, Create React App, Next.js, or similar)

## Guide

<Steps>
  <Step title="Install the package.">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @autorender/react
      ```

      ```bash yarn theme={null}
      yarn add @autorender/react
      ```

      ```bash pnpm theme={null}
      pnpm add @autorender/react
      ```

      ```bash bun theme={null}
      bun add @autorender/react
      ```
    </CodeGroup>
  </Step>

  <Step title="Set up the provider.">
    Wrap your app with `AutoRenderProvider` so child components can read your workspace configuration.

    ```tsx App.tsx {8} theme={null}
    import { AutoRenderProvider } from '@autorender/react/viewtag';

    function App() {
      return (
        <AutoRenderProvider
          baseUrl="https://assets.autorender.io"
          workspace="LOKVTtKVGb"
          defaults={{}}
        >
          <YourComponents />
        </AutoRenderProvider>
      );
    }
    ```
  </Step>

  <Step title="Render your first image.">
    Use `<ARImage>` in place of `<img>` for transforms, responsive `srcset`, and lazy loading.

    ```tsx ProductImage.tsx {6} theme={null}
    import { ARImage } from '@autorender/react/viewtag';

    function ProductImage() {
      return (
        <ARImage
          src="products/chair.jpg"
          width={400}
          height={400}
          alt="Chair"
          transformations={{ fit: 'cover' }}
          responsive={true}
          lazy={true}
          sizes="(min-width: 800px) 50vw, 100vw"
        />
      );
    }
    ```

    This renders an `<img>` resized to **400×400 px**, cropped to fill, with a responsive `srcset` and native lazy loading.
  </Step>
</Steps>

## Examples

### Complete transform example

```tsx AdvancedImage.tsx theme={null}
import { ARImage } from '@autorender/react/viewtag';

function AdvancedImage() {
  return (
    <ARImage
      src="hero.jpg"
      width={1200}
      height={800}
      alt="Hero image"
      transformations={{
        // Size & crop
        w: 1200,
        h: 800,
        fit: 'cover',
        ar: '16:9',
        position: 'center',

        // Transform
        r: 0,
        z: 1.2,
        flip: 'h',
        br: 20,

        // Format & quality
        f: 'auto',
        q: 'auto',

        // Effects
        improve: true,
        sharpen: 50,
        blur: 0,

        // Layers
        layers: [
          {
            type: 'image',
            imagePath: 'logo.png',
            width: 200,
            placement: 'north-east',
            opacity: 80,
          },
          {
            type: 'text',
            text: 'Autorender',
            fontFamily: 'arial',
            fontSize: 24,
            fontColor: 'FFFFFF',
            placement: 'south',
          }
        ],
        blend: 'overlay',
      }}
      responsive={true}
      lazy={true}
      className="product-image"
    />
  );
}
```

### Video component (Video.js)

```tsx ProductVideo.tsx theme={null}
import { ARVideo } from '@autorender/react/viewtag';

function ProductVideo() {
  return (
    <ARVideo
      src="docs/skateboarding.mp4"
      width={720}
      height={405}
      controls
      preload="metadata"
      transformations={{ w: 720, h: 405 }}
    />
  );
}
```

`<ARVideo>` accepts MP4, HLS (`.m3u8`), and DASH (`.mpd`) sources.

### Upload widget

Pass the API key from an environment variable — the widget runs in the browser, so use a public-prefixed key scoped to uploads. Never hardcode the key.

```tsx App.tsx {6} theme={null}
import { AutorenderUploader } from '@autorender/react';
import '@autorender/react/styles';

function App() {
  return (
    <AutorenderUploader
      apiKey={process.env.VITE_AUTORENDER_API_KEY}  {/* NEXT_PUBLIC_AUTORENDER_API_KEY for Next.js, REACT_APP_AUTORENDER_API_KEY for CRA */}
      type="inline"
      allowMultiple
      theme="system"
      sources={['local', 'camera']}
      onSuccess={({ files }) => console.log('Uploaded', files)}
    />
  );
}
```

For imperative access (calling `.destroy()` or `.reset()`), use the `useAutorenderUploader` hook:

```tsx App.tsx {5} theme={null}
import { AutorenderUploader, useAutorenderUploader } from '@autorender/react';

function App() {
  const uploaderRef = useAutorenderUploader({
    apiKey: import.meta.env.VITE_AUTORENDER_API_KEY,
    type: 'inline',
    onSuccess: ({ files }) => console.log('Uploaded', files),
  });

  return (
    <AutorenderUploader
      ref={uploaderRef}
      apiKey={import.meta.env.VITE_AUTORENDER_API_KEY}
      type="inline"
      onSuccess={({ files }) => console.log('Uploaded', files)}
    />
  );
}
```

## API reference

### `<AutorenderUploader />`

React component that wraps the uploader.

**Props:** all `CreateUploaderOptions` except `target`, which the component handles.

### `<AutoRenderProvider />`

React context provider that makes the AR instance available to child components.

**Props:**

* `baseUrl?: string` — base URL (default `'https://assets.autorender.io'`)
* `workspace: string` — your workspace ID
* `defaults?: { f?: string, q?: string | number }` — default transformations
* `enableDPR?: boolean` — device-pixel-ratio handling (default `true`)
* `enableResponsive?: boolean` — responsive images (default `true`)

### `<ARImage />`

React component that wraps `<img>` with Autorender transformations.

**Props:**

* `src: string` — image source path (required)
* `width?: number` — image width in pixels
* `height?: number` — image height in pixels
* `transformations?: TransformOptions` — transformation options
* `responsive?: boolean` — responsive images (default `true`)
* `lazy?: boolean` — lazy loading (default `true`)
* `sizes?: string` — `sizes` attribute for responsive images
* `preset?: string` — named preset mapped to a `t_<preset>` URL segment (e.g. `preset="thumbnail"` → `t_thumbnail`)

### `useAutorenderUploader(options)`

Hook that returns a ref to the uploader instance for imperative access (calling `.destroy()` or `.reset()`). Pass the ref to `<AutorenderUploader>` to populate it.

**Returns:** `MutableRefObject<UploaderInstance | null>`

## Next steps

<CardGroup cols={2}>
  <Card title="Image transformations" icon="wand-magic-sparkles" iconType="solid" href="/docs/transformations/introduction">
    Every parameter you can pass to `transformations`.
  </Card>

  <Card title="Direct upload API" icon="cloud-arrow-up" iconType="solid" href="/docs/api-reference/direct-upload">
    The upload endpoint behind the widget.
  </Card>

  <Card title="Video transformations" icon="film" iconType="solid" href="/docs/video/introduction">
    Resize, trim, and thumbnail video for `<ARVideo>`.
  </Card>

  <Card title="All SDKs" icon="cubes" iconType="solid" href="/docs/resources/sdks">
    Front-end and backend SDKs for every stack.
  </Card>
</CardGroup>