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.
Installation
npm install react-image-list-distort
Basic Usage
; // 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: 02 effect: "stretch" geometry: shape: "circle" radius: 05 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;optionsstrength = 025; // How powerful the distort is String;optionseffect = ""; // A string defining what extra effect to apply. Defaults to "redshift", can also pass "stretch" Object;optionsgeometry; // Object containing all options regarding the shape that holds the image String;optionsgeometryshape = "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;optionsgeometryradius = 06; // A number defining the radius(size) of the shape. Only applicable when shape is 'circle' Number;optionsgeometrysegments = 64; // Defines the number of segments of the shape when the shape is 'circle Number;optionsgeometrywidth = 1; // Defines the width of the shape when the shape is 'plane' Number;optionsgeometryheight = 1; // Defines the height of the shape when the shape is 'plane' Number;optionsgeometrysegmentsWidth = 32; // Defines the number of segments on the X-axis of the shape when the shape is 'plane' Number;optionsgeometrysegmentsHeight = 32; // Defines the number of segments on the Y-axis of the shape when the shape is 'plane'