preact-stickerbook

Easily create collage apps that are accessible by default.

Demo

Local development

To run and test the library localy, simply:

1. Clone the repo: git clone [email protected]:wethegit/preact-stickerbook.git
2. Install dependencies: npm i
3. Start the dev server: npm run dev

Table of contents

• Basic usage
• Stickerbook
  • Props
• Sticker
  • Props
• useStickerbook
  • Props
  • Return
• Helpers
  • exportStickerbook
  • reorderSticker
  • addSticker
  • deleteSticker
  • patchSticker

Basic usage

This is the most simplistic way of using it, it's an artboard with the stickers.

Most likely you will want more control, you will want to generate downloads, add and remove stickers, and more. Check out the full demo on Codepen and also the complete implementation in the Playground.

import { h, render } from "preact"
import { Stickerbook, Sticker } from "@wethegit/preact-stickerbook"

const App = () => {
  const stickers = [
    {
      id: "my-id-1",
      image: "https://media.giphy.com/media/10mgrhuEWNasNO/giphy.gif",
      order: 0,
    },
  ]

  return (
    <Stickerbook outputWidth={500} outputHeight={500}>
      {stickers.map(({ id, ...sticker }) => (
        <Sticker key={id} id={id} {...sticker} />
      ))}
    </Stickerbook>
  )
}

render(<App />, document.body)

Stickerbook

Your main artboard. Responsible for containing and providing the Stickers with a context and all the required references so they can properly scale and translate. Apart from the Stickers, the Stickerbook can also have backgrounds, foregrounds and a frame.

Props

Type: StickerbookProps

Sticker

All of the elements that form the collage.

Props

Type: StickerProps.

useStickerbook

A hook that provides the Stickerbook context and all the handlers to manipulate the stickers.

Props

Type: UseStickerbookProps

Return

Type: UseStickerbookReturn

Helpers

exportStickerbook

Returns a representation of the stickerbook in the chosen format.

Type: ExportStickerbookOptions

reorderSticker

Returns a reordered copy of the provided stickers array.

Type: ReorderStickerOptions

addSticker

Returns a copy of the provided stickers array with the new sticker containing the required required id and id fields.

Type: AddStickerOptions

deleteSticker

Returns a copy of the provided stickers array without the selected sticker.

Type: DeleteStickerOptions

patchSticker

Returns a copy of the provided stickers array with the updated ("patched") sticker in place.

Type: PatchStickerOptions