https://github.com/steelkiwi/pattern-builder

React plugin for generation background patterns
https://github.com/steelkiwi/pattern-builder

Last synced: 7 days ago
JSON representation

React plugin for generation background patterns

• Host: GitHub
• URL: https://github.com/steelkiwi/pattern-builder
• Owner: steelkiwi
• Created: 2019-11-06T09:37:26.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T00:37:56.000Z (almost 2 years ago)
• Last Synced: 2023-08-03T09:38:17.614Z (over 1 year ago)
• Language: TypeScript
• Size: 4.62 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pattern builder

### Installation & Usage

```js

 npm install react-background-pattern-generator

```

### Include the Component

```js

import React from 'react'

import {BackgroundPatternGenerator, Canvas, Controls} from 'react-background-pattern-generator'

const iconsArray = ['iconSrc']

const backgrounds = ['#FF6900','#FCB900','#7BDCB5',]

const Component = () => {

    return (

        

        

        

        

)

}

```

The Download Button initiates the download pattern.png file by default.

Also you can get base64 string by use onDownload handler.

```js

const Component = () => {

    const handleDownload = (value) => {

        // value = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA.....

    }

    return 

            

            

        

    )

}

```

You can wrap the components in different DOM nodes. Canvas takes the 100% sizes of its parent node by default.

Some classes of basics components are:

* App wrapper - `pb__wrapper`

    * Controls wrapper - `pb__controls`

        * Icons wrapper - `pb__icons-list`

        * Export wrapper - `pb__export`

        * BackgroundPicker wrapper - `pb__backgrounds`

### Props

| Property      | Type          |

| ------------- | ------------- |

| icons:        | string[]      |

| backgrounds:  | string[]      |

| onDownload?:  | (img: string) => void   |

| imageSize?:   | number   |

| imageOffset?: | number   |