@vx/pattern

@vx/pattern

Inspired by: http://riccardoscalco.github.io/textures/

Example

import { AreaClosed } from '@vx/shape';
import { PatternLines } from '@vx/pattern';

const PatternArea = () => {
  return (
    <svg>
      <PatternLines
        id="lines"
        height={5}
        width={5}
        stroke={'black'}
        strokeWidth={1}
        orientation={['diagonal']}
      />
      <AreaClosed fill="url('#lines')" />
    </svg>
  );
};

The Definition Caveat

Like gradients, patterns are "defined." When you put down a <PatternXYZ />, it's putting a <pattern/> attribute in the SVG.

It's often better to think of these as variable definitions rather than true DOM elements. When you use fill="url('#pattern')" you're referencing the pattern's id: pattern.

Pre-Made Patterns

PatternsCircles

<PatternCircles id="circles" height={6} width={6} stroke={'black'} strokeWidth={1} />

PatternsHexagons

<PatternHexagons id="hexagons" height={3} size={8} stroke={'red'} strokeWidth={1} />

PatternsLines

<PatternLines
  id="lines"
  height={5}
  width={5}
  stroke={'black'}
  strokeWidth={1}
  orientation={['diagonal']}
/>

PatternsWaves

<PatternWaves id="waves" height={4} width={4} stroke={'blue'} strokeWidth={1} />

Installation

npm install --save @vx/pattern

Components

• Circles
• Hexagons
• Lines
• Path
• Pattern
• Waves

API

<Circles />

# Circles.background<string>

# Circles.className<string>

# Circles.complement<bool>

Default

false

# Circles.fill<string>

# Circles.height<number> required

# Circles.id<string> required

# Circles.radius<number>

Default

2

# Circles.stroke<string>

# Circles.strokeDasharray<string>

# Circles.strokeWidth<number>

# Circles.width<number> required

<Hexagons />

# Hexagons.background<string>

# Hexagons.className<string>

# Hexagons.fill<string>

# Hexagons.height<number> required

# Hexagons.id<string> required

# Hexagons.shapeRendering<string>

# Hexagons.size<number>

Default

3

# Hexagons.stroke<string>

# Hexagons.strokeDasharray<string>

# Hexagons.strokeLinecap<string>

# Hexagons.strokeWidth<number>

# Hexagons.width<number> required

<Lines />

# Lines.background<string>

# Lines.className<string>

# Lines.height<number> required

# Lines.id<string> required

# Lines.orientation<array>

Default

['vertical']

# Lines.shapeRendering<string>

Default

'auto'

# Lines.stroke<string> required

# Lines.strokeDasharray<string>

# Lines.strokeLinecap<string>

Default

'square'

# Lines.strokeWidth<number> required

# Lines.width<number> required

<Path />

# Path.background<string>

# Path.className<string>

# Path.fill<string>

Default

'transparent'

# Path.height<number> required

# Path.id<string> required

# Path.path<string>

# Path.shapeRendering<string>

Default

'auto'

# Path.stroke<string>

# Path.strokeDasharray<string>

# Path.strokeLinecap<string>

Default

'square'

# Path.strokeWidth<number>

# Path.width<number> required

<Pattern />

# Pattern.children<union(arrayOf|node)> required

# Pattern.height<number> required

# Pattern.id<string> required

# Pattern.width<number> required

<Waves />

# Waves.background<string>

# Waves.className<string>

# Waves.fill<string>

# Waves.height<number> required

# Waves.id<string> required

# Waves.shapeRendering<string>

# Waves.stroke<string>

# Waves.strokeDasharray<string>

# Waves.strokeLinecap<string>

# Waves.strokeWidth<number>

# Waves.width<number> required

Changelog

v0.0.189

:boom: Breaking Changes

• [shape] <Arc /> and <Pie pieValue={} /> props now check for !== undefined. Before 0 wouldn't set the prop to 0 because if (0) is false. This is only a breaking change if you were passing 0 before and happy with <Arc /> treating that as undefined and using d3.arc() defaults. #464
• [zoom] make wheel event active by default. fixes Chrome 73 scroll intervention warning. #456
  • To keep the default behavior before Chrome 73 and remove console warnings in Chrome 73, remove:

    <MyComponent
    - onWheel={zoom.handleWheel}
    />
    

  • To make the onWheel events passive, add:

    <Zoom
    + passive={true}
    >
      {zoom => {
        return (
          <MyComponent
    +      onWheel={zoom.handleWheel}
          /> 
        );
      }}
    </Zoom>
    

:rocket: Enhancements

• [responsive][shape][text][geo] update innerRef propType to include PropType.object. #446

:bug: Bug Fix

• [text] move Babel dependencies to dev only. #461
• [shape] <Arc /> now respects 0 as an allowed prop value. #464
• [shape] <Pie /> pieValue now respects 0 as an allowed prop value. #464

:memo: Documentation

• [docs] update docs. #446
• [glyph] fixes outdated @vx/glyph examples in the readme docs. #454

:house: Internal

• [internal] fix jest code coverage, update jest, move to babel.config.js + jest.config.js. #439
• [internal] babel preset env target explorer => ie. #446
• [internal] babel preset env target remove ucandroid. #446
• [shape] add more <Arc /> tests. #464
• [shape] convert Arc.test from CRLF => LF. #464

:trophy: Contributors

• hshoff
• milesj

Changes:
 - @vx/annotation: 0.0.184 => 0.0.189
 - @vx/axis: 0.0.184 => 0.0.189
 - @vx/bounds: 0.0.182 => 0.0.189
 - @vx/boxplot: 0.0.183 => 0.0.189
 - @vx/brush: 0.0.182 => 0.0.189
 - @vx/chord: 0.0.183 => 0.0.189
 - @vx/clip-path: 0.0.183 => 0.0.189
 - @vx/curve: 0.0.182 => 0.0.189
 - @vx/demo: 0.0.188 => 0.0.189
 - @vx/drag: 0.0.183 => 0.0.189
 - @vx/event: 0.0.182 => 0.0.189
 - @vx/geo: 0.0.187 => 0.0.189
 - @vx/glyph: 0.0.183 => 0.0.189
 - @vx/gradient: 0.0.183 => 0.0.189
 - @vx/grid: 0.0.184 => 0.0.189
 - @vx/group: 0.0.183 => 0.0.189
 - @vx/heatmap: 0.0.183 => 0.0.189
 - @vx/hierarchy: 0.0.183 => 0.0.189
 - @vx/legend: 0.0.183 => 0.0.189
 - @vx/marker: 0.0.184 => 0.0.189
 - @vx/mock-data: 0.0.185 => 0.0.189
 - @vx/network: 0.0.183 => 0.0.189
 - @vx/pattern: 0.0.183 => 0.0.189
 - @vx/point: 0.0.182 => 0.0.189
 - @vx/responsive: 0.0.188 => 0.0.189
 - @vx/scale: 0.0.182 => 0.0.189
 - @vx/shape: 0.0.184 => 0.0.189
 - @vx/stats: 0.0.183 => 0.0.189
 - @vx/text: 0.0.183 => 0.0.189
 - @vx/threshold: 0.0.184 => 0.0.189
 - @vx/tooltip: 0.0.184 => 0.0.189
 - @vx/voronoi: 0.0.183 => 0.0.189
 - @vx/vx: 0.0.188 => 0.0.189
 - @vx/zoom: 0.0.185 => 0.0.189