Photosynth-react NPM

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.

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
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.
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)
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

An additional prop 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%",
  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)".