hdrify-react

React component for displaying HDR images from hdrify. Accepts HdrifyImage (returned by readHdr, readExr, readJpegGainMap) and renders with configurable tone mapping and exposure.

Related packages: hdrify (core library) · hdrify-cli (CLI tool)

An online demo is available at https://hdrify.benhouston3d.com — HDR, EXR, and Ultra HDR viewer and converter built with this component; try it in your browser.

Installation

pnpm add hdrify-react hdrify

Usage

import { HdrifyCanvas, type HdrifyImage } from 'hdrify-react';
import { readExr } from 'hdrify';

const hdrifyImage: HdrifyImage = readExr(buffer);

<HdrifyCanvas
  hdrifyImage={hdrifyImage}
  toneMapping="neutral"
  exposure={1.0}
  className="max-w-full"
/>

Props

| Prop | Type | Description | |------|------|-------------| | hdrifyImage | HdrifyImage | Image from readHdr, readExr, or readJpegGainMap | | toneMapping | 'aces' \| 'reinhard' \| 'neutral' \| 'agx' | Tone mapper to use | | exposure | number | Exposure value (1.0 = nominal) | | className | string | Optional CSS class for the canvas | | forwardedRef | RefObject<HTMLCanvasElement \| null> | Optional ref for canvas access (e.g. toBlob) |

License

MIT

Author

Ben Houston, Sponsored by Land of Assets