├── tests
    ├── .eslintrc
    ├── index-test.js
    ├── lines.test.js
    ├── circles.test.js
    ├── paths.test.js
    └── selection.test.js
├── .gitignore
├── src
    ├── index.js
    ├── selection.js
    ├── Lines.js
    ├── Circles.js
    └── Paths.js
├── nwb.config.js
├── demo
    └── src
    │   └── index.js
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── .eslintrc
├── package.json
└── README.md


/tests/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "mocha": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /coverage
2 | /demo/dist
3 | /es
4 | /lib
5 | /node_modules
6 | /umd
7 | npm-debug.log*
8 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Circles from './Circles';
 2 | import Lines from './Lines';
 3 | import Paths from './Paths';
 4 | 
 5 | export default {
 6 |   Circles,
 7 |   Lines,
 8 |   Paths,
 9 | };
10 | 


--------------------------------------------------------------------------------
/nwb.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   type: 'react-component',
 3 |   npm: {
 4 |     esModules: true,
 5 |     umd: {
 6 |       global: 'ReactSvgTextures',
 7 |       externals: {
 8 |         react: 'React'
 9 |       }
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | import {render} from 'react-dom'
 3 | 
 4 | import Example from '../../src'
 5 | 
 6 | class Demo extends Component {
 7 |   render() {
 8 |     return <div>
 9 |       <h1>react-svg-textures Demo</h1>
10 |       <Example/>
11 |     </div>
12 |   }
13 | }
14 | 
15 | render(<Demo/>, document.querySelector('#demo'))
16 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | 
 3 | language: node_js
 4 | node_js:
 5 |   - 8
 6 | 
 7 | before_install:
 8 |   - npm install codecov.io coveralls
 9 | 
10 | after_success:
11 |   - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
12 |   - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
13 | 
14 | branches:
15 |   only:
16 |     - master
17 | 


--------------------------------------------------------------------------------
/tests/index-test.js:
--------------------------------------------------------------------------------
 1 | // import expect from 'expect'
 2 | // import React from 'react'
 3 | // import {render, unmountComponentAtNode} from 'react-dom'
 4 | 
 5 | // import Component from 'src/'
 6 | 
 7 | // describe('Component', () => {
 8 | //   let node
 9 | 
10 | //   beforeEach(() => {
11 | //     node = document.createElement('div')
12 | //   })
13 | 
14 | //   afterEach(() => {
15 | //     unmountComponentAtNode(node)
16 | //   })
17 | 
18 | //   it('displays a welcome message', () => {
19 | //     render(<Component/>, node, () => {
20 | //       expect(node.innerHTML).toContain('Welcome to React components')
21 | //     })
22 | //   })
23 | // })
24 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Prerequisites
 2 | 
 3 | [Node.js](http://nodejs.org/) >= v4 must be installed.
 4 | 
 5 | ## Installation
 6 | 
 7 | - Running `npm install` in the component's root directory will install everything you need for development.
 8 | 
 9 | ## Demo Development Server
10 | 
11 | - `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
12 | 
13 | ## Running Tests
14 | 
15 | - `npm test` will run the tests once.
16 | 
17 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
18 | 
19 | - `npm run test:watch` will run the tests on every change.
20 | 
21 | ## Building
22 | 
23 | - `npm run build` will build the component for publishing to npm and also bundle the demo app.
24 | 
25 | - `npm run clean` will delete built resources.
26 | 


--------------------------------------------------------------------------------
/tests/lines.test.js:
--------------------------------------------------------------------------------
 1 | import expect from 'expect'; // eslint-disable-line
 2 | import React from 'react';
 3 | import { shallow, configure } from 'enzyme';
 4 | import Adapter from 'enzyme-adapter-react-16';
 5 | 
 6 | import Lines from '../src/Lines';
 7 | 
 8 | configure({ adapter: new Adapter() });
 9 | 
10 | describe('Lines', () => {
11 | 
12 |   it('kitchensink', () => {
13 |     const actual = shallow(<Lines
14 |       strokeWidth={10}
15 |       stroke='purple'
16 |       size={10}
17 |       orientation='diagonal'
18 |       shapeRendering='foo'
19 |       background='blue'
20 |       id='bar'
21 |     />);
22 |     expect(actual.containsMatchingElement(<defs><pattern id='bar' patternUnits='userSpaceOnUse' width={10} height={10}><rect width={10} height={10} fill='blue' /><path d='M 0,10 l 10,-10 M -2.5,2.5 l 5,-5 M 7.5,12.5 l 5,-5' strokeWidth={10} shapeRendering='foo' stroke='purple' strokeLinecap='square' /></pattern></defs>)).toBe(true);
23 |   });
24 | 
25 | });
26 | 
27 | 


--------------------------------------------------------------------------------
/src/selection.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import camel from 'lodash.camelcase';
 3 | 
 4 | const rand = () =>
 5 |   (`${Math.random().toString(36)}00000000000000000`).replace(/[^a-z]+/g, '').slice(0, 5);
 6 | 
 7 | export default class Selection {
 8 | 
 9 |   children = []
10 |   attrs = {}
11 | 
12 |   constructor(tagName) {
13 |     this.tagName = tagName;
14 |     return this;
15 |   }
16 | 
17 |   append(tagName) {
18 |     const child = new Selection(tagName);
19 |     this.children.push(child);
20 |     return child;
21 |   }
22 | 
23 |   attr(key, value) {
24 |     this.attrs[camel(key)] = value;
25 |     return this;
26 |   }
27 | 
28 |   toReact(components) {
29 |     const children = this.children.map(child => child.toReact(components));
30 |     const the = { component: components[this.tagName] };
31 |     return this.tagName ? (
32 |       <the.component {...this.attrs} key={this.attrs.id || rand()}>
33 |         {children}
34 |       </the.component>
35 |     ) : children[0];
36 |   }
37 | 
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 | 
3 | Copyright (c) 2018 Finn Fitzsimons
4 | 
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 | 
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 | 
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/tests/circles.test.js:
--------------------------------------------------------------------------------
 1 | import expect from 'expect'; // eslint-disable-line
 2 | import React from 'react';
 3 | import { shallow, configure } from 'enzyme';
 4 | import Adapter from 'enzyme-adapter-react-16';
 5 | 
 6 | import Circles from '../src/Circles';
 7 | 
 8 | configure({ adapter: new Adapter() });
 9 | 
10 | describe('Circles', () => {
11 | 
12 |   it('kitchensink', () => {
13 |     const actual = shallow(<Circles
14 |       strokeWidth={10}
15 |       stroke='purple'
16 |       size={10}
17 |       background='blue'
18 |       id='bar'
19 |       complement
20 |       radius={20}
21 |     />);
22 |     expect(actual.containsMatchingElement(<defs><pattern id='bar' patternUnits='userSpaceOnUse' width={10} height={10}><rect width={10} height={10} fill='blue' /><circle cx={5} cy={5} r={20} fill='#343434' stroke='purple' strokeWidth={10} /><circle cx={0} cy={0} r={20} fill='#343434' stroke='purple' strokeWidth={10} /><circle cx={0} cy={10} r={20} fill='#343434' stroke='purple' strokeWidth={10} /><circle cx={10} cy={0} r={20} fill='#343434' stroke='purple' strokeWidth={10} /><circle cx={10} cy={10} r={20} fill='#343434' stroke='purple' strokeWidth={10} /></pattern></defs>)).toBe(true);
23 |   });
24 | 
25 | });
26 | 
27 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb",
 3 |   "parser": "babel-eslint",
 4 |   "rules": {
 5 |     "brace-style": [2, "stroustrup", {"allowSingleLine": true}],
 6 |     "camelcase": 1,
 7 |     "comma-dangle": ["error", {
 8 |       "arrays": "always-multiline",
 9 |       "objects": "always-multiline",
10 |       "imports": "always-multiline",
11 |       "exports": "always-multiline",
12 |       "functions": "never"
13 |     }],
14 |     "consistent-return": 0,
15 |     "func-names": 0,
16 |     "function-paren-newline": 1,
17 |     "jsx-a11y/img-has-alt": 0,
18 |     "jsx-a11y/img-redundant-alt": 1,
19 |     "jsx-quotes": [2, "prefer-single"],
20 |     "object-curly-spacing": 2,
21 |     "new-cap": 0,
22 |     "no-case-declarations": 0,
23 |     "no-confusing-arrow": 0,
24 |     "no-fallthrough": 0,
25 |     "no-nested-ternary": 1,
26 |     "no-param-reassign": 0,
27 |     "no-shadow": 0,
28 |     "no-underscore-dangle": [1, {"allowAfterThis": true}],
29 |     "no-useless-escape": 1,
30 |     "padded-blocks": 0,
31 |     "prefer-rest-params": 0,
32 |     "prefer-template": 1,
33 |     "radix": 0,
34 |     "react/jsx-no-bind": 1,
35 |     "react/require-default-props": 0,
36 |     "react/no-unused-prop-types": 0,
37 |     "react/jsx-filename-extension": 0,
38 |     "react/no-did-mount-set-state": 1,
39 |     "react/prefer-stateless-function": 0,
40 |     "spaced-comment": 0,
41 |     "strict": 0,
42 |   },
43 |   "globals": {
44 |     "describe": true,
45 |     "it": true,
46 |     "assert": true,
47 |     "before": true,
48 |     "jsdom": true
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-svg-textures",
 3 |   "version": "1.4.7",
 4 |   "description": "Textures.js ported to React. Fully isomorphic.",
 5 |   "main": "lib/index.js",
 6 |   "module": "es/index.js",
 7 |   "keywords": [
 8 |     "react",
 9 |     "textures",
10 |     "svg",
11 |     "component",
12 |     "patterns",
13 |     "isomorphic",
14 |     "react-component"
15 |   ],
16 |   "files": [
17 |     "css",
18 |     "es",
19 |     "lib",
20 |     "umd"
21 |   ],
22 |   "scripts": {
23 |     "build": "nwb build-react-component",
24 |     "clean": "nwb clean-module && nwb clean-demo",
25 |     "start": "nwb serve-react-demo",
26 |     "test": "nwb test-react",
27 |     "test:coverage": "nwb test-react --coverage",
28 |     "test:watch": "nwb test-react --server",
29 |     "prepublish": "npm run build"
30 |   },
31 |   "dependencies": {
32 |     "lodash.camelcase": "^4.3.0",
33 |     "lodash.isequal": "^4.5.0",
34 |     "prop-types": "^15.6.0",
35 |     "textures": "^1.2.0"
36 |   },
37 |   "peerDependencies": {
38 |     "react": "16.x"
39 |   },
40 |   "devDependencies": {
41 |     "babel-eslint": "^8.2.1",
42 |     "enzyme": "^3.3.0",
43 |     "enzyme-adapter-react-16": "^1.1.1",
44 |     "eslint": "^4.17.0",
45 |     "eslint-config-airbnb": "^16.1.0",
46 |     "eslint-plugin-babel": "^4.1.2",
47 |     "eslint-plugin-import": "^2.8.0",
48 |     "eslint-plugin-jsx-a11y": "^6.0.3",
49 |     "eslint-plugin-react": "^7.6.1",
50 |     "nwb": "0.21.x",
51 |     "react": "^16.2.0",
52 |     "react-dom": "^16.2.0"
53 |   },
54 |   "author": "Finn Fitzsimons <fitzsimons.finn@gmail.com>",
55 |   "license": "MIT",
56 |   "repository": "https://github.com/finnfiddle/react-svg-textures"
57 | }
58 | 


--------------------------------------------------------------------------------
/tests/paths.test.js:
--------------------------------------------------------------------------------
 1 | import expect from 'expect'; // eslint-disable-line
 2 | import React from 'react';
 3 | import { shallow, configure } from 'enzyme';
 4 | import Adapter from 'enzyme-adapter-react-16';
 5 | 
 6 | import Paths from '../src/Paths';
 7 | 
 8 | configure({ adapter: new Adapter() });
 9 | 
10 | describe('Paths', () => {
11 | 
12 |   it('static d', () => {
13 |     const actual = shallow(<Paths
14 |       strokeWidth={10}
15 |       stroke='purple'
16 |       size={10}
17 |       background='blue'
18 |       id='bar'
19 |       complement
20 |       radius={20}
21 |       shapeRendering='foo'
22 |       d='squares'
23 |     />);
24 |     expect(actual.containsMatchingElement(<defs><pattern id='bar' patternUnits='userSpaceOnUse' width={10} height={10}><rect width={10} height={10} fill='blue' /><path d='M 2.5 2.5 l 5 0 l 0 5 l -5 0 Z' fill='transparent' stroke='purple' strokeWidth={10} strokeLinecap='square' shapeRendering='foo' /></pattern></defs>)).toBe(true);
25 |   });
26 | 
27 |   it('func d', () => {
28 |     const actual = shallow(<Paths
29 |       strokeWidth={10}
30 |       stroke='purple'
31 |       size={10}
32 |       background='blue'
33 |       id='bar'
34 |       complement
35 |       radius={20}
36 |       shapeRendering='foo'
37 |       d={s => `M 0,${(s * 3) / 4} l ${s / 2},${-s / 2} l ${s / 2},${s / 2}`}
38 |     />);
39 |     expect(actual.containsMatchingElement(<defs><pattern id='bar' patternUnits='userSpaceOnUse' width={10} height={10}><rect width={10} height={10} fill='blue' /><path d='M 0,7.5 l 5,-5 l 5,5' fill='transparent' stroke='purple' strokeWidth={10} strokeLinecap='square' shapeRendering='foo' /></pattern></defs>)).toBe(true);
40 |   });
41 | 
42 | });
43 | 
44 | 


--------------------------------------------------------------------------------
/tests/selection.test.js:
--------------------------------------------------------------------------------
 1 | import expect from 'expect'; // eslint-disable-line
 2 | import React from 'react';
 3 | import textures from 'textures';
 4 | import { shallow, configure } from 'enzyme';
 5 | import Adapter from 'enzyme-adapter-react-16';
 6 | 
 7 | import Selection from '../src/selection';
 8 | 
 9 | const COMPONENTS = {
10 |   defs: 'defs',
11 |   g: 'g',
12 |   circle: 'circle',
13 |   rect: 'rect',
14 |   pattern: 'pattern',
15 |   path: 'path',
16 | };
17 | 
18 | configure({ adapter: new Adapter() });
19 | 
20 | describe('selection', () => {
21 | 
22 |   it('lines thicker', () => {
23 |     const t = textures.lines().thicker();
24 |     const selection = new Selection();
25 |     t(selection);
26 |     const actual = shallow(selection.toReact(COMPONENTS));
27 |     expect(actual.containsMatchingElement(<defs><pattern patternUnits='userSpaceOnUse' width={10} height={10}><path d='M 0,10 l 10,-10 M -2.5,2.5 l 5,-5 M 7.5,12.5 l 5,-5' strokeWidth={2} shapeRendering='auto' stroke='#343434' strokeLinecap='square' /></pattern></defs>)).toBe(true);
28 |   });
29 | 
30 |   it('kitchensink', () => {
31 |     const t = textures.lines()
32 |       .orientation('diagonal')
33 |       .size(40)
34 |       .strokeWidth(26)
35 |       .stroke('darkorange')
36 |       .background('firebrick');
37 |     const selection = new Selection();
38 |     t(selection);
39 |     const actual = shallow(selection.toReact(COMPONENTS));
40 |     expect(actual.containsMatchingElement(<defs><pattern patternUnits='userSpaceOnUse' width={40} height={40}><rect width={40} height={40} fill='firebrick' /><path d='M 0,40 l 40,-40 M -10,10 l 20,-20 M 30,50 l 20,-20' strokeWidth={26} shapeRendering='auto' stroke='darkorange' strokeLinecap='square' /></pattern></defs>)).toBe(true);
41 |   });
42 | 
43 | });
44 | 
45 | 


--------------------------------------------------------------------------------
/src/Lines.js:
--------------------------------------------------------------------------------
 1 | import { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import textures from 'textures';
 4 | import isEqual from 'lodash.isequal';
 5 | 
 6 | import Selection from './selection';
 7 | 
 8 | export default class Lines extends Component {
 9 | 
10 |   static displayName = 'Lines'
11 | 
12 |   static propTypes = {
13 |     size: PropTypes.number,
14 |     strokeWidth: PropTypes.number,
15 |     orientation: PropTypes.string,
16 |     shapeRendering: PropTypes.string,
17 |     stroke: PropTypes.string,
18 |     background: PropTypes.string,
19 |     id: PropTypes.string,
20 |     components: PropTypes.shape({
21 |       defs: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
22 |       g: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
23 |       circle: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
24 |       rect: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
25 |       pattern: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
26 |       path: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
27 |     }),
28 |   }
29 | 
30 |   static defaultProps = {
31 |     components: {
32 |       defs: 'defs',
33 |       g: 'g',
34 |       circle: 'circle',
35 |       rect: 'rect',
36 |       pattern: 'pattern',
37 |       path: 'path',
38 |     },
39 |   }
40 | 
41 |   state = {
42 |     pattern: null,
43 |   }
44 | 
45 |   componentWillMount() {
46 |     this.generate();
47 |   }
48 | 
49 |   componentDidUpdate(oldProps) {
50 |     if (!isEqual(oldProps, this.props)) this.generate();
51 |   }
52 | 
53 |   generate() {
54 |     const t = textures.lines();
55 |     [
56 |       'size',
57 |       'strokeWidth',
58 |       'orientation',
59 |       'shapeRendering',
60 |       'stroke',
61 |       'background',
62 |       'id',
63 |     ].forEach((key) => {
64 |       if (this.props[key]) t[key](this.props[key]);
65 |     });
66 |     const selection = new Selection();
67 |     t(selection);
68 | 
69 |     this.setState({
70 |       pattern: selection.toReact(this.props.components),
71 |     });
72 |   }
73 | 
74 |   render() {
75 |     return this.state.pattern;
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/Circles.js:
--------------------------------------------------------------------------------
 1 | import { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import textures from 'textures';
 4 | import isEqual from 'lodash.isequal';
 5 | 
 6 | import Selection from './selection';
 7 | 
 8 | export default class Circles extends Component {
 9 | 
10 |   static displayName = 'Circles'
11 | 
12 |   static propTypes = {
13 |     size: PropTypes.number,
14 |     strokeWidth: PropTypes.number,
15 |     stroke: PropTypes.string,
16 |     fill: PropTypes.string,
17 |     background: PropTypes.string,
18 |     id: PropTypes.string,
19 |     complement: PropTypes.bool,
20 |     radius: PropTypes.number,
21 |     components: PropTypes.shape({
22 |       defs: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
23 |       g: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
24 |       circle: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
25 |       rect: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
26 |       pattern: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
27 |       path: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
28 |     }),
29 |   }
30 | 
31 |   static defaultProps = {
32 |     components: {
33 |       defs: 'defs',
34 |       g: 'g',
35 |       circle: 'circle',
36 |       rect: 'rect',
37 |       pattern: 'pattern',
38 |       path: 'path',
39 |     },
40 |   }
41 | 
42 |   state = {
43 |     pattern: null,
44 |   }
45 | 
46 |   componentWillMount() {
47 |     this.generate();
48 |   }
49 | 
50 |   componentDidUpdate(oldProps) {
51 |     if (!isEqual(oldProps, this.props)) this.generate();
52 |   }
53 | 
54 |   generate() {
55 |     const t = textures.circles();
56 |     [
57 |       'size',
58 |       'strokeWidth',
59 |       'stroke',
60 |       'fill',
61 |       'background',
62 |       'id',
63 |       'complement',
64 |       'radius',
65 |     ].forEach((key) => {
66 |       if (this.props[key]) t[key](this.props[key]);
67 |     });
68 |     const selection = new Selection();
69 |     t(selection);
70 | 
71 |     this.setState({
72 |       pattern: selection.toReact(this.props.components),
73 |     });
74 |   }
75 | 
76 |   render() {
77 |     return this.state.pattern;
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/Paths.js:
--------------------------------------------------------------------------------
 1 | import { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import textures from 'textures';
 4 | import isEqual from 'lodash.isequal';
 5 | 
 6 | import Selection from './selection';
 7 | 
 8 | export default class Paths extends Component {
 9 | 
10 |   static displayName = 'Paths'
11 | 
12 |   static propTypes = {
13 |     size: PropTypes.number,
14 |     strokeWidth: PropTypes.number,
15 |     d: PropTypes.oneOfType([
16 |       PropTypes.oneOf([
17 |         'squares',
18 |         'nylon',
19 |         'waves',
20 |         'woven',
21 |         'caps',
22 |         'crosses',
23 |         'hexagons',
24 |       ]),
25 |       PropTypes.func,
26 |     ]),
27 |     shapeRendering: PropTypes.string,
28 |     stroke: PropTypes.string,
29 |     background: PropTypes.string,
30 |     id: PropTypes.string,
31 |     components: PropTypes.shape({
32 |       defs: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
33 |       g: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
34 |       circle: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
35 |       rect: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
36 |       pattern: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
37 |       path: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
38 |     }),
39 |   }
40 | 
41 |   static defaultProps = {
42 |     components: {
43 |       defs: 'defs',
44 |       g: 'g',
45 |       circle: 'circle',
46 |       rect: 'rect',
47 |       pattern: 'pattern',
48 |       path: 'path',
49 |     },
50 |   }
51 | 
52 |   state = {
53 |     pattern: null,
54 |   }
55 | 
56 |   componentWillMount() {
57 |     this.generate();
58 |   }
59 | 
60 |   componentDidUpdate(oldProps) {
61 |     if (!isEqual(oldProps, this.props)) this.generate();
62 |   }
63 | 
64 |   generate() {
65 |     const t = textures.paths();
66 |     [
67 |       'size',
68 |       'strokeWidth',
69 |       'shapeRendering',
70 |       'stroke',
71 |       'background',
72 |       'id',
73 |       'd',
74 |     ].forEach((key) => {
75 |       if (this.props[key]) t[key](this.props[key]);
76 |     });
77 |     const selection = new Selection();
78 |     t(selection);
79 | 
80 |     this.setState({
81 |       pattern: selection.toReact(this.props.components),
82 |     });
83 |   }
84 | 
85 |   render() {
86 |     return this.state.pattern;
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-svg-textures :star:
  2 | 
  3 | > [Textures.js](http://riccardoscalco.github.io/textures/) in React made simple :zap:. **react-svg-textures** is a port of the [Textures.js](http://riccardoscalco.github.io/textures/) library as React components with multiple options via props for easy usage!
  4 | <!-- [![Travis][build-badge]][build] -->
  5 | [![npm version](https://badge.fury.io/js/react-svg-textures.svg)](https://badge.fury.io/js/react-svg-textures)
  6 | <!-- [![Coveralls][coveralls-badge]][coveralls] -->
  7 | 
  8 | ## Installation
  9 | 
 10 | **Using Yarn:**
 11 | 
 12 | ```text
 13 | yarn add react-svg-textures
 14 | ```
 15 | 
 16 | **Using NPM:**
 17 | 
 18 | ```text
 19 | npm install react-svg-textures
 20 | ```
 21 | 
 22 | ## Usage
 23 | 
 24 | ```javascript
 25 | import React from 'react';
 26 | import { Lines } from 'react-svg-textures';
 27 | 
 28 | const Texture = () => (
 29 |   <svg width={200} height={200}>
 30 |     <Lines
 31 |       id='pattern'
 32 |       strokeWidth={10}
 33 |       stroke='purple'
 34 |       size={10}
 35 |       orientation='diagonal'
 36 |       background='blue'
 37 |     />
 38 |     <circle cx={100} cy={100} r={5} fill='url(#pattern)' />
 39 |   </svg>
 40 | );
 41 | 
 42 | export default Texture;
 43 | ```
 44 | 
 45 | ## Available Props Options
 46 | 
 47 | ```javascript
 48 | import PropTypes from 'prop-types';
 49 | import { Lines, Circles, Paths } from 'react-svg-textures';
 50 | 
 51 | Lines.propTypes = {
 52 | 
 53 |     // size must be a number
 54 |     size: PropTypes.number,
 55 | 
 56 |     // strokeWidth must be a number
 57 |     strokeWidth: PropTypes.number,
 58 | 
 59 |     // orientation must be a string
 60 |     orientation: PropTypes.string,
 61 | 
 62 |     // shapeRendering must be a string
 63 |     shapeRendering: PropTypes.string,
 64 | 
 65 |     // stroke must be a string
 66 |     stroke: PropTypes.string,
 67 | 
 68 |     // background must be a string
 69 |     background: PropTypes.string,
 70 | 
 71 |     // id must be a string
 72 |     id: PropTypes.string
 73 | 
 74 | };
 75 | 
 76 | Circles.propTypes = {
 77 | 
 78 |     // size must be a number
 79 |     size: PropTypes.number,
 80 | 
 81 |     // strokeWidth must be a number
 82 |     strokeWidth: PropTypes.number,
 83 | 
 84 |     // stroke must be a string
 85 |     stroke: PropTypes.string,
 86 | 
 87 |     // background must be a string
 88 |     background: PropTypes.string,
 89 | 
 90 |     // id must be a string
 91 |     id: PropTypes.string,
 92 | 
 93 |     // complement must be a boolean
 94 |     complement: PropTypes.bool,
 95 | 
 96 |     // radius must be a number
 97 |     radius: PropTypes.number
 98 | 
 99 | };
100 | 
101 | Paths.propTypes = {
102 | 
103 |     // size must be a number
104 |     size: PropTypes.number,
105 | 
106 |     // d must be 'squares', 'nylon', 'waves', 'woven', 'caps', 'crosses' or 'hexagons'
107 |     d: PropTypes.oneOf([
108 |         'squares',
109 |         'nylon',
110 |         'waves',
111 |         'woven',
112 |         'caps',
113 |         'crosses',
114 |         'hexagons'
115 |     ])
116 | 
117 |     // strokeWidth must be a number
118 |     strokeWidth: PropTypes.number,
119 | 
120 |     // shapeRendering must be a string
121 |     shapeRendering: PropTypes.string,
122 | 
123 |     // stroke must be a string
124 |     stroke: PropTypes.string,
125 | 
126 |     // background must be a string
127 |     background: PropTypes.string,
128 | 
129 |     // id must be a string
130 |     id: PropTypes.string,
131 | 
132 | };
133 | ```
134 | 
135 | ## License
136 | 
137 | MIT License
138 | 
139 | Copyright (c) 2018 Finn Fitzsimons
140 | 
141 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
142 | 
143 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
144 | 
145 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
146 | 


--------------------------------------------------------------------------------