Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@vx/pattern
Advanced tools
@vx/pattern - npm Package Compare versions
Comparing version 0.0.182 to 0.0.183
| { | ||
| "name": "@vx/pattern", | ||
| "version": "0.0.182", | ||
| "version": "0.0.183", | ||
| "description": "vx pattern", | ||
@@ -17,3 +17,4 @@ "sideEffects": false, | ||
| "prepublish": "npm run build", | ||
| "test": "jest" | ||
| "test": "jest", | ||
| "docs": "cd ./docs && ../../../node_modules/.bin/react-docgen ../src/patterns | ../../../scripts/buildDocs.sh" | ||
| }, | ||
@@ -20,0 +21,0 @@ "repository": { |
241
Readme.md
| # @vx/pattern | ||
| ``` | ||
| npm install --save @vx/pattern | ||
| ``` | ||
| <a title="@vx/pattern npm downloads" href="https://www.npmjs.com/package/@vx/pattern"> | ||
| <img src="https://img.shields.io/npm/dm/@vx/pattern.svg?style=flat-square" /> | ||
| </a> | ||
@@ -11,3 +11,3 @@ Inspired by: http://riccardoscalco.github.io/textures/ | ||
| ``` js | ||
| ```js | ||
| import { AreaClosed } from '@vx/shape'; | ||
@@ -17,15 +17,15 @@ 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> | ||
| ); | ||
| return ( | ||
| <svg> | ||
| <PatternLines | ||
| id="lines" | ||
| height={5} | ||
| width={5} | ||
| stroke={'black'} | ||
| strokeWidth={1} | ||
| orientation={['diagonal']} | ||
| /> | ||
| <AreaClosed fill="url('#lines')" /> | ||
| </svg> | ||
| ); | ||
| }; | ||
@@ -40,3 +40,2 @@ ``` | ||
| ## Pre-Made Patterns | ||
@@ -48,10 +47,4 @@ | ||
| ``` js | ||
| <PatternCircles | ||
| id="circles" | ||
| height={6} | ||
| width={6} | ||
| stroke={'black'} | ||
| strokeWidth={1} | ||
| /> | ||
| ```js | ||
| <PatternCircles id="circles" height={6} width={6} stroke={'black'} strokeWidth={1} /> | ||
| ``` | ||
@@ -63,10 +56,4 @@ | ||
| ``` js | ||
| <PatternHexagons | ||
| id="hexagons" | ||
| height={3} | ||
| size={8} | ||
| stroke={'red'} | ||
| strokeWidth={1} | ||
| /> | ||
| ```js | ||
| <PatternHexagons id="hexagons" height={3} size={8} stroke={'red'} strokeWidth={1} /> | ||
| ``` | ||
@@ -78,3 +65,3 @@ | ||
| ``` js | ||
| ```js | ||
| <PatternLines | ||
@@ -94,19 +81,173 @@ id="lines" | ||
| ``` js | ||
| <PatternWaves | ||
| id="waves" | ||
| height={4} | ||
| width={4} | ||
| stroke={'blue'} | ||
| strokeWidth={1} | ||
| /> | ||
| ```js | ||
| <PatternWaves id="waves" height={4} width={4} stroke={'blue'} strokeWidth={1} /> | ||
| ``` | ||
| ## Source For Components | ||
| + [`<PatternCircles />`](https://github.com/hshoff/vx/blob/master/packages/vx-pattern/src/patterns/Circles.js) | ||
| + [`<PatternHexagons />`](https://github.com/hshoff/vx/blob/master/packages/vx-pattern/src/patterns/Hexagons.js) | ||
| + [`<PatternLines />`](https://github.com/hshoff/vx/blob/master/packages/vx-pattern/src/patterns/Lines.js) | ||
| + [`<PatternPath />`](https://github.com/hshoff/vx/blob/master/packages/vx-pattern/src/patterns/Path.js) | ||
| + [`<PatternPattern />`](https://github.com/hshoff/vx/blob/master/packages/vx-pattern/src/patterns/Pattern.js) | ||
| + [`<PatternPath />`](https://github.com/hshoff/vx/blob/master/packages/vx-pattern/src/patterns/Waves.js) | ||
| ## Installation | ||
| ``` | ||
| npm install --save @vx/pattern | ||
| ``` | ||
| ## Components | ||
| - [Circles](#circles-) | ||
| - [Hexagons](#hexagons-) | ||
| - [Lines](#lines-) | ||
| - [Path](#path-) | ||
| - [Pattern](#pattern-) | ||
| - [Waves](#waves-) | ||
| ## API | ||
| <h3 id="circles-"><Circles /></h3> | ||
| <a id="#Circles__background" name="Circles__background" href="#Circles__background">#</a> *Circles*.**background**<string> | ||
| <a id="#Circles__className" name="Circles__className" href="#Circles__className">#</a> *Circles*.**className**<string> | ||
| <a id="#Circles__complement" name="Circles__complement" href="#Circles__complement">#</a> *Circles*.**complement**<bool> <table><tr><td><strong>Default</strong></td><td>false</td></td></table> | ||
| <a id="#Circles__fill" name="Circles__fill" href="#Circles__fill">#</a> *Circles*.**fill**<string> | ||
| <a id="#Circles__height" name="Circles__height" href="#Circles__height">#</a> *Circles*.**height**<number> `required` | ||
| <a id="#Circles__id" name="Circles__id" href="#Circles__id">#</a> *Circles*.**id**<string> `required` | ||
| <a id="#Circles__radius" name="Circles__radius" href="#Circles__radius">#</a> *Circles*.**radius**<number> <table><tr><td><strong>Default</strong></td><td>2</td></td></table> | ||
| <a id="#Circles__stroke" name="Circles__stroke" href="#Circles__stroke">#</a> *Circles*.**stroke**<string> | ||
| <a id="#Circles__strokeDasharray" name="Circles__strokeDasharray" href="#Circles__strokeDasharray">#</a> *Circles*.**strokeDasharray**<string> | ||
| <a id="#Circles__strokeWidth" name="Circles__strokeWidth" href="#Circles__strokeWidth">#</a> *Circles*.**strokeWidth**<number> | ||
| <a id="#Circles__width" name="Circles__width" href="#Circles__width">#</a> *Circles*.**width**<number> `required` | ||
| <h3 id="hexagons-"><Hexagons /></h3> | ||
| <a id="#Hexagons__background" name="Hexagons__background" href="#Hexagons__background">#</a> *Hexagons*.**background**<string> | ||
| <a id="#Hexagons__className" name="Hexagons__className" href="#Hexagons__className">#</a> *Hexagons*.**className**<string> | ||
| <a id="#Hexagons__fill" name="Hexagons__fill" href="#Hexagons__fill">#</a> *Hexagons*.**fill**<string> | ||
| <a id="#Hexagons__height" name="Hexagons__height" href="#Hexagons__height">#</a> *Hexagons*.**height**<number> `required` | ||
| <a id="#Hexagons__id" name="Hexagons__id" href="#Hexagons__id">#</a> *Hexagons*.**id**<string> `required` | ||
| <a id="#Hexagons__shapeRendering" name="Hexagons__shapeRendering" href="#Hexagons__shapeRendering">#</a> *Hexagons*.**shapeRendering**<string> | ||
| <a id="#Hexagons__size" name="Hexagons__size" href="#Hexagons__size">#</a> *Hexagons*.**size**<number> <table><tr><td><strong>Default</strong></td><td>3</td></td></table> | ||
| <a id="#Hexagons__stroke" name="Hexagons__stroke" href="#Hexagons__stroke">#</a> *Hexagons*.**stroke**<string> | ||
| <a id="#Hexagons__strokeDasharray" name="Hexagons__strokeDasharray" href="#Hexagons__strokeDasharray">#</a> *Hexagons*.**strokeDasharray**<string> | ||
| <a id="#Hexagons__strokeLinecap" name="Hexagons__strokeLinecap" href="#Hexagons__strokeLinecap">#</a> *Hexagons*.**strokeLinecap**<string> | ||
| <a id="#Hexagons__strokeWidth" name="Hexagons__strokeWidth" href="#Hexagons__strokeWidth">#</a> *Hexagons*.**strokeWidth**<number> | ||
| <a id="#Hexagons__width" name="Hexagons__width" href="#Hexagons__width">#</a> *Hexagons*.**width**<number> `required` | ||
| <h3 id="lines-"><Lines /></h3> | ||
| <a id="#Lines__background" name="Lines__background" href="#Lines__background">#</a> *Lines*.**background**<string> | ||
| <a id="#Lines__className" name="Lines__className" href="#Lines__className">#</a> *Lines*.**className**<string> | ||
| <a id="#Lines__height" name="Lines__height" href="#Lines__height">#</a> *Lines*.**height**<number> `required` | ||
| <a id="#Lines__id" name="Lines__id" href="#Lines__id">#</a> *Lines*.**id**<string> `required` | ||
| <a id="#Lines__orientation" name="Lines__orientation" href="#Lines__orientation">#</a> *Lines*.**orientation**<array> <table><tr><td><strong>Default</strong></td><td>['vertical']</td></td></table> | ||
| <a id="#Lines__shapeRendering" name="Lines__shapeRendering" href="#Lines__shapeRendering">#</a> *Lines*.**shapeRendering**<string> <table><tr><td><strong>Default</strong></td><td>'auto'</td></td></table> | ||
| <a id="#Lines__stroke" name="Lines__stroke" href="#Lines__stroke">#</a> *Lines*.**stroke**<string> `required` | ||
| <a id="#Lines__strokeDasharray" name="Lines__strokeDasharray" href="#Lines__strokeDasharray">#</a> *Lines*.**strokeDasharray**<string> | ||
| <a id="#Lines__strokeLinecap" name="Lines__strokeLinecap" href="#Lines__strokeLinecap">#</a> *Lines*.**strokeLinecap**<string> <table><tr><td><strong>Default</strong></td><td>'square'</td></td></table> | ||
| <a id="#Lines__strokeWidth" name="Lines__strokeWidth" href="#Lines__strokeWidth">#</a> *Lines*.**strokeWidth**<number> `required` | ||
| <a id="#Lines__width" name="Lines__width" href="#Lines__width">#</a> *Lines*.**width**<number> `required` | ||
| <h3 id="path-"><Path /></h3> | ||
| <a id="#Path__background" name="Path__background" href="#Path__background">#</a> *Path*.**background**<string> | ||
| <a id="#Path__className" name="Path__className" href="#Path__className">#</a> *Path*.**className**<string> | ||
| <a id="#Path__fill" name="Path__fill" href="#Path__fill">#</a> *Path*.**fill**<string> <table><tr><td><strong>Default</strong></td><td>'transparent'</td></td></table> | ||
| <a id="#Path__height" name="Path__height" href="#Path__height">#</a> *Path*.**height**<number> `required` | ||
| <a id="#Path__id" name="Path__id" href="#Path__id">#</a> *Path*.**id**<string> `required` | ||
| <a id="#Path__path" name="Path__path" href="#Path__path">#</a> *Path*.**path**<string> | ||
| <a id="#Path__shapeRendering" name="Path__shapeRendering" href="#Path__shapeRendering">#</a> *Path*.**shapeRendering**<string> <table><tr><td><strong>Default</strong></td><td>'auto'</td></td></table> | ||
| <a id="#Path__stroke" name="Path__stroke" href="#Path__stroke">#</a> *Path*.**stroke**<string> | ||
| <a id="#Path__strokeDasharray" name="Path__strokeDasharray" href="#Path__strokeDasharray">#</a> *Path*.**strokeDasharray**<string> | ||
| <a id="#Path__strokeLinecap" name="Path__strokeLinecap" href="#Path__strokeLinecap">#</a> *Path*.**strokeLinecap**<string> <table><tr><td><strong>Default</strong></td><td>'square'</td></td></table> | ||
| <a id="#Path__strokeWidth" name="Path__strokeWidth" href="#Path__strokeWidth">#</a> *Path*.**strokeWidth**<number> | ||
| <a id="#Path__width" name="Path__width" href="#Path__width">#</a> *Path*.**width**<number> `required` | ||
| <h3 id="pattern-"><Pattern /></h3> | ||
| <a id="#Pattern__children" name="Pattern__children" href="#Pattern__children">#</a> *Pattern*.**children**<union(arrayOf|node)> `required` | ||
| <a id="#Pattern__height" name="Pattern__height" href="#Pattern__height">#</a> *Pattern*.**height**<number> `required` | ||
| <a id="#Pattern__id" name="Pattern__id" href="#Pattern__id">#</a> *Pattern*.**id**<string> `required` | ||
| <a id="#Pattern__width" name="Pattern__width" href="#Pattern__width">#</a> *Pattern*.**width**<number> `required` | ||
| <h3 id="waves-"><Waves /></h3> | ||
| <a id="#Waves__background" name="Waves__background" href="#Waves__background">#</a> *Waves*.**background**<string> | ||
| <a id="#Waves__className" name="Waves__className" href="#Waves__className">#</a> *Waves*.**className**<string> | ||
| <a id="#Waves__fill" name="Waves__fill" href="#Waves__fill">#</a> *Waves*.**fill**<string> | ||
| <a id="#Waves__height" name="Waves__height" href="#Waves__height">#</a> *Waves*.**height**<number> `required` | ||
| <a id="#Waves__id" name="Waves__id" href="#Waves__id">#</a> *Waves*.**id**<string> `required` | ||
| <a id="#Waves__shapeRendering" name="Waves__shapeRendering" href="#Waves__shapeRendering">#</a> *Waves*.**shapeRendering**<string> | ||
| <a id="#Waves__stroke" name="Waves__stroke" href="#Waves__stroke">#</a> *Waves*.**stroke**<string> | ||
| <a id="#Waves__strokeDasharray" name="Waves__strokeDasharray" href="#Waves__strokeDasharray">#</a> *Waves*.**strokeDasharray**<string> | ||
| <a id="#Waves__strokeLinecap" name="Waves__strokeLinecap" href="#Waves__strokeLinecap">#</a> *Waves*.**strokeLinecap**<string> | ||
| <a id="#Waves__strokeWidth" name="Waves__strokeWidth" href="#Waves__strokeWidth">#</a> *Waves*.**strokeWidth**<number> | ||
| <a id="#Waves__width" name="Waves__width" href="#Waves__width">#</a> *Waves*.**width**<number> `required` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by19.9%
49401
- Number of lines in readme file
- increased by133.02%
247
No dependency changes