react-geopattern
TypeScript icon, indicating that this package has built-in type declarations

2.0.5 • Public • Published

react-geopattern

Package Version codecov

Use GeoPattern from 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<string, Pattern>.

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:

import { useGeoPattern } from 'react-geopattern';

export default function TestComponent() {
  const pattern = useGeoPattern('input-string');

  return <div style={{ 'background-image': pattern.toDataUrl() }}>Test</div>;
}

With custom GeoPattern options:

import { useGeoPattern } from 'react-geopattern';

export default function TestComponent() {
  const pattern = useGeoPattern('input-string', {
    // any options that GeoPattern accepts
    color: '#ff0000'
  });

  return <div style={{ 'background-image': pattern.toDataUrl() }}>Test</div>;
}

With self-managed pattern cache:

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 <div style={{ 'background-image': pattern.toDataUrl() }}>Test</div>;
}

Readme

Keywords

none

Package Sidebar

Install

npm i react-geopattern

Weekly Downloads

31

Version

2.0.5

License

MIT

Unpacked Size

5.67 kB

Total Files

6

Last publish

Collaborators

  • ayan4m1