react-textures

React wrapper around textures

Svg textures

import React from 'react'
import Texture from 'react-textures'

const Header = () =>
    <div> <!-- A container which has width and height -->
        <Texture
            orientation={['diagonal', '3/8', '7/8', '6/8']}
            strokeWidth={1.2}
        >
            <div>
                Header
            </div>
        </Texture>
    </div>

| Prop | PropType | Description | Default | |----------|:-------------|:--------------------|:--------:| | type | string oneOf(['lines', 'circles', 'paths']) | type of pattern | lines | | background | string | Background color | '' | | complement | boolean | Switch the background and foreground | false | | d | string, func| Svg path | s => 'M ${s / 4},${s * 3 / 4}l${s / 4},${-s / 2}l${s / 4},${s / 2}' | | fill | string | Fill color | #343434 | | orientation | array of strings | Angle of lines | ['diagonal'] | | radius | number | Radius of circles | 2 | | shapeRendering | string | Svg shapeRendering | auto | | size | number | size of pattern shape | 20 | | stroke | string | stroke color | #343434 | | strokeWidth | number | stroke width | 2 |