PhotoSynth Component for React

This component provides a declarative interface to the PhotoSynth service for rendering images.

Installation

npm i photosynth-react

Setup

A PhotoSynth key is required and may be passed to the component as the prop psKey or set with the environment variable REACT_APP_PHOTOSYNTH_KEY. The latter is preferred to avoid passing in the psKey prop to every instance.

Sign up for a free key at https://temperal.co/

Image Optimization Props

| Name | Range | Default | Type | Description | -------- | ------- | ------- | ----- | ---------- | | adaptiveHistogram | 0 - 100 | | int | Adaptive histogram level of brightening | blur | 0.02 - 20.0 | | float | Blur strength | brightness | 0.0 - 20.0 | | float | Brightness multiplier | cropBottomPercent | 1 - 99 | | int | Crop bottom percentage | cropLeftPercent | 1 - 99 | | int | Crop left percentage | cropRightPercent | 1 - 99 | | int | Crop right percentage | cropTopPercent | 1 - 99 | | int | Crop top percentage | format | | webp | FormatType | "avif", "gif", "jpeg", "png", "tiff", "webp" | gamma | 1.0 - 3.0 | 1 | float | Gamma | greyscale | | falsy | boolean | Greyscale (true/false) | height | 1 - 5000 | | int | Generated image height | hue | 0.0 - 180.0 | | float | Hue shift | lightness | 0.0 - 200.0 | | float | Lightness addition | normalizeLower | 1 - 99 | | int | Normalization lower percentile threshold | normalizeUpper | 1 - 99 | | int | Normalization upper percentile threshold | psKey | | | string | PhotoSynth key (Required if REACT_APP_PHOTOSYNTH_KEY not set) | rotate | -360 - +360 | | float | Rotation degrees | saturation | 0.0 - 20.0 | | float | Saturation level | sharpen | 0.1 - 10.0 | | float | Sharpening level | sourceUrl | | | string | URL of the source image (Required) | width | 1 - 5000 | | int | Generated image width (autosizes if omitted)

Other Props

| Name | Range | Default | Type | Description | -------- | ------- | ------- | ----- | ---------- | | bypass | | falsy | boolean | Load sourceUrl directly without using PhotoSynth | cacheBust | | falsy | boolean, string | If true, bust the cache with random query param. If string, use value as the param value. | cssStyle | | | object| CSS style passed to underlying <div> or <img> | onClick | | | func | click handler | renderElement | | "img" | "div", "img" | Element that the image is rendered with

The optional cssStyle may be provided to customize the element's behavior. The value is merged with the default:

{
  backgroundPosition: "center",
  backgroundRepeat: "no-repeat",
  backgroundSize: "contain",
  height: "100%",
  minHeight: "50px",
  width: "100%",
}

Example

import { PhotoSynth } from "photosynth-react";
...

  <PhotoSynth
    adaptiveHistogram={2}
    blur={0.02}
    brightness={1.0}
    cropBottomPercent={10}
    sourceUrl="https://some.domain/path/to/picture"
    cssStyle={{
      backgroundSize: "cover"
    }}
  />

Note that when width is omitted, the image auto sizes to its container's width.

Usage with other frameworks

The generateUrl() method is exposed and accepts an object with the same keys as documented above. The resulting URL may be passed as the src attribute of the <img> tag or the CSS value background-image: "url(GENERATED_URL)".

Help

Please contact support at https://temperal.co with error details.