Easily create collage apps that are accessible by default.

To run and test the library localy, simply:

1. Clone the repo: git clone git@github.com:wethegit/preact-stickerbook.git
2. Install dependencies: npm i
3. Start the dev server: npm run dev

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

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)

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.

Type: StickerbookProps

All of the elements that form the collage.

Type: StickerProps.

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

Type: UseStickerbookProps

Type: UseStickerbookReturn

Returns a representation of the stickerbook in the chosen format.

Type: ExportStickerbookOptions

Returns a reordered copy of the provided stickers array.

Type: ReorderStickerOptions

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

Type: AddStickerOptions

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

Type: DeleteStickerOptions

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

Type: PatchStickerOptions