Package Exports

react-image-list-distort

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-image-list-distort) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Image List Distort Component

Creates a threejs canvas which shows and distorts an image when you hover a listitem that wraps an image tag.

Demo

preview image

Installation

npm install react-image-list-distort

Basic Usage

import ImageDistort from "react-image-list-distort";

// You do not have to use ul/li tags, and you can insert other siblings.
// What's important is the classnames and their hierarchy.
<ul className="myListRoot">
  <li className="myListItem">
    <img src="..." />
  </li>
  <li className="myListItem">
    <img src="..." />
  </li>
</ul>

<ImageDistort
  styles={{ zIndex: 10 }}
  listRoot={".myListRoot"}
  itemRoot={".myListItem"}
  options={{
    strength: 0.2,
    effect: "stretch",
    geometry: {
      shape: "circle",
      radius: 0.5,
      segments: 128
    }
  }}
></ImageDistort>;

Props

{
  Object;
}
[(styles = {})]; // object with custom styles
{
  String;
}
itemRoot; // selector for the toplevel list item which holds the image
{
  String;
}
listRoot; // Wrapper for the listItems in the shape of a css class selector.
{
  Object;
}
[options]; // Object for option settings
{
  Number;
}
[(options.strength = 0.25)]; // How powerful the distort is
{
  String;
}
[(options.effect = "")]; // A string defining what extra effect to apply. Defaults to "redshift", can also pass "stretch"
{
  Object;
}
[options.geometry]; // Object containing all options regarding the shape that holds the image
{
  String;
}
[(options.geometry.shape = "circle")]; // A string defining the shape of the geometry. Defaults to "circle", can also pass "plane". If circle then the image should be square.
{
  Number;
}
[(options.geometry.radius = 0.6)]; // A number defining the radius(size) of the shape. Only applicable when shape is 'circle'
{
  Number;
}
[(options.geometry.segments = 64)]; // Defines the number of segments of the shape when the shape is 'circle
{
  Number;
}
[(options.geometry.width = 1)]; // Defines the width of the shape when the shape is 'plane'
{
  Number;
}
[(options.geometry.height = 1)]; // Defines the height of the shape when the shape is 'plane'
{
  Number;
}
[(options.geometry.segmentsWidth = 32)]; // Defines the number of segments on the X-axis of the shape when the shape is 'plane'
{
  Number;
}
[(options.geometry.segmentsHeight = 32)]; // Defines the number of segments on the Y-axis of the shape when the shape is 'plane'