# react-svg-textures

> Textures.js ported to React. Fully isomorphic.

Latest version **1.4.7** (published 2018-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-svg-textures
pnpm add react-svg-textures
yarn add react-svg-textures
bun add react-svg-textures
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.7 |
| Published | 2018-03-13 |
| First published | 2018-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 311.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 32 |
| Author | Finn Fitzsimons |
| Maintainers | finnfiddle |
| Keywords | react, textures, svg, component, patterns, isomorphic, react-component |

## Links

- npm: https://www.npmjs.com/package/react-svg-textures
- Repository: https://github.com/finnfiddle/react-svg-textures
- Homepage: https://github.com/finnfiddle/react-svg-textures#readme
- Issues: https://github.com/finnfiddle/react-svg-textures/issues
- npm.io page: https://npm.io/package/react-svg-textures

## Dependencies (4)

- [textures](https://npm.io/package/textures.md) ^1.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0
- [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) ^4.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.4.7 (latest) — 2018-03-13
- 1.4.6 — 2018-03-11
- 1.4.5 — 2018-03-11
- 1.4.4 — 2018-03-02
- 1.4.3 — 2018-02-23
- 1.1.3 — 2018-02-23
- 1.1.2 — 2018-02-23
- 1.0.2 — 2018-02-13
- 1.0.1 — 2018-02-13
- 1.0.0 — 2018-02-13

## README

# react-svg-textures

<!-- [![Travis][build-badge]][build] -->
[![npm version](https://badge.fury.io/js/react-svg-textures.svg)](https://badge.fury.io/js/react-svg-textures)
<!-- [![Coveralls][coveralls-badge]][coveralls] -->

[Textures.js](http://riccardoscalco.github.io/textures/) ported to React. Fully isomorphic.

## Example

```javascript
import React from 'react'
import { render } from 'react-dom';
import { Lines } from 'react-svg-textures';

render((
  <svg width={200} height={200}>
    <Lines
      id='pattern'
      strokeWidth={10}
      stroke='purple'
      size={10}
      orientation='diagonal'
      background='blue'
    />
    <circle cx={100} cy={100} r={5} fill='url(#pattern)' />
  </svg>
), container);
```

## Components

### Lines

```
import { Lines } from 'react-svg-textures`;
```

| Prop | Type |
| --- | ---- |
| size | number |
| strokeWidth | number |
| orientation | string |
| shapeRendering | string |
| stroke | string |
| background | string |
| id | string |

### Circles

```
import { Circles } from 'react-svg-textures`;
```

| Prop | Type |
| ----- | --- |
| size | number |
| strokeWidth | number |
| stroke | string |
| background | string |
| id | string |
| complement | bool |
| radius | number |

### Paths

```
import { Paths } from 'react-svg-textures`;
```

| Prop | Type|
| ----- | ------|
| size: number |
| d | enum( 'squares', 'nylon', 'waves', 'woven', 'caps', 'crosses', 'hexagons') OR function(size) => string |
| strokeWidth | number |
| shapeRendering | string |
| stroke | string |
| background | string |
| id | string |

<!-- [build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo -->

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

<!-- [coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo -->

---
_Source: https://npm.io/package/react-svg-textures · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._