@planningcenter/react-trianglify

React-Trianglify

Installation

npm install --save @planningcenter/react-trianglify

or

yarn add @planningcenter/react-trianglify

Props

Prop	Type	Default	Notes
width	number	500	Specify the width in pixels of the pattern to generate.
height	number	300	Specify the height in pixels of the pattern to generate.
cellSize	number	50	Specify the size in pixels of the mesh used to generate triangles.
variance	number	0.75	Decimal value between 0 and 1. Specify the amount of randomness used when generating triangles.
seed	string	null	Seeds the random number generator to create repeatable patterns.
xColors	false, string or array of CSS-formatted colors	"random"	Valid string values are 'random', or the name of a colorbrewer palette (i.e. 'YlGnBu' or 'RdBu'). When set to 'random', a gradient will be randomly selected from the colorbrewer library. Valid array values should specify the color stops in any CSS format (i.e. ['#000000', '#4CAFE8', '#FFFFFF']).
yColors	False, string or array of CSS-formatted colors	"match"	When set to 'match' the x-axis color gradient will be used on both axes. Otherwise, accepts the same options as xColors.
colorSpace	string	"lab"	Supported values are rgb, hsv, hsl, hsi, lab and hcl.
fill	boolean	true	Specifies whether the polygons generated by Trianglify should be filled in.
strokeWidth	number	0	Specify the width of the strokes used to outline the polygons.
className	string	" "	append classes to SVG wrapper div

For more detailed information on Trianglify's expected props, click here.

Example

import React from "react";
import Trianglify from "@planningcenter/react-trianglify";

function App() {
  return (
    <Trianglify height={200} width={350} variance={0.5} />
  )
}