React-Trianglify

Installation

npm install --save @joshwilkerson/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 |

Example

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

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

export default App;