Skip to content

steelkiwi/pattern-builder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pattern builder

Installation & Usage

 npm install react-background-pattern-generator

Include the Component

import React from 'react'
import {BackgroundPatternGenerator, Canvas, Controls} from 'react-background-pattern-generator'
const iconsArray = ['iconSrc']
const backgrounds = ['#FF6900','#FCB900','#7BDCB5',]

const Component = () => {
    return (
        <BackgroundPatternGenerator
    icons={iconsArray}
    backgrounds={backgrounds}
        >
        <Canvas />
        <Controls />
        </BackgroundPatternGenerator>
)
}

The Download Button initiates the download pattern.png file by default. Also you can get base64 string by use onDownload handler.

const Component = () => {
    const handleDownload = (value) => {
        // value = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA.....
    }
    return <BackgroundPatternGenerator onDonwload={handleDownload}>
            <Canvas />
            <Controls />
        </BackgroundPatternGenerator>
    )
}

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

About

React plugin for generation background patterns

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published