https://github.com/ayan4m1/react-geopattern
GeoPattern wrapper for React
https://github.com/ayan4m1/react-geopattern
geopattern react
Last synced: over 1 year ago
JSON representation
GeoPattern wrapper for React
- Host: GitHub
- URL: https://github.com/ayan4m1/react-geopattern
- Owner: ayan4m1
- License: mit
- Created: 2021-01-25T00:47:25.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-24T15:36:47.000Z (over 1 year ago)
- Last Synced: 2025-03-13T14:08:05.865Z (over 1 year ago)
- Topics: geopattern, react
- Language: TypeScript
- Homepage:
- Size: 1.32 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-geopattern
[](https://www.npmjs.com/package/react-geopattern)
[](https://codecov.io/gh/ayan4m1/react-geopattern)
Use [GeoPattern](https://github.com/btmills/geopattern) from [React](https://github.com/facebook/react).
## features
- Written in TypeScript
- Adds less than 200 bytes at runtime
- Supports CommonJS or ESM
- Extensive unit testing
- Zero-configuration caching of generated patterns
## prerequisites
- Node.js 16+
- React 18
## installation
> npm install --save geopattern@1 react-geopattern
## usage
This package provides one primary hook, `useGeoPattern`. The first two arguments are the same as those of `GeoPattern.generate`, namely an input string and an options object. The third argument is optional and allows you to override the caching behavior by providing your own instance of `Map`.
The most direct way of rendering the returned `Pattern` object is to call .toDataUrl() on it. Use the result in your CSS via the `style` prop or another prop that your style framework exposes (e.g. `sx` in Material-UI).
## examples
Simplest usage:
```jsx
import { useGeoPattern } from 'react-geopattern';
export default function TestComponent() {
const pattern = useGeoPattern('input-string');
return
Test;
}
```
With custom GeoPattern options:
```jsx
import { useGeoPattern } from 'react-geopattern';
export default function TestComponent() {
const pattern = useGeoPattern('input-string', {
// any options that GeoPattern accepts
color: '#ff0000'
});
return
Test;
}
```
With self-managed pattern cache:
```jsx
import { useMemo } from 'react';
import { useGeoPattern } from 'react-geopattern';
export default function TestComponent() {
// you can invalidate the cache as needed with useMemo()
const cache = useMemo(() => new Map(), []);
const pattern = useGeoPattern('input-string', undefined, cache);
return
Test;
}
```