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} />
)
}