It's a CANVAS PARTY!
Tags: npm, javascript, webgl, htmlcanvas
Published: 2022-12-03 20:28:36

### Introducing Canvas Party, a NPM package i made a while back.

## table of content
2. [Overview](#overview)
2. [Basic Usage](#basic-usage)
3. [Frameworks integration ](#frameworks-integration)
    - [with React](#with-react)
    - [with Vue](#with-vue)
4. [Basic Usage](#basic-usage)
5. [Why i made it?](#why-i-made-it)
6. [Summary](#summary)
 
## Overview
Canvas Party is an HTML canvas animations library. It was created for adding highly interactive backgrounds with ease. It has full support for both Vue and React and a documentation guide with examples.
Check out the [Canvas Party website](https://canvas-party.vercel.app) here.


### Installation 
To install simply run this command at the root directory of your project.

#### **With npm:**
``` bash
$ npm install canvas-party
```
#### **With yarn**
``` bash
$ yarn add canvas-party
```
If you are using a JavaScript framework see the [Frameworks integration](#frameworks-integration).

### Basic usage 
To add Canvas Party to your app first import the `useCanvasParty` function from `canvas-party`, this function 
will receive two arguments: 
1. Wrapper element in which the canvas will append to.
2. Options object that will specify the `type` and 
optional customizations.
 
This will return an object with a custom canvas element and some methods related to it.

``` js 
import { useCanvasParty } from 'canvas-party'

const wrapper = document.createElement('div')

const canvasParty = useCanvasParty(wrapper, {
  type: 'confetti',
  options: {
    colors: ['#A3F7B5', '#EB5160', '#B0F2B4'],
    count: 450,
  },
})

wrapper.appendChild(canvasParty.canvas)
```



## Frameworks Integration
Canvas party has full support for both Vue and React.

## With React 
### installation
``` bash 
$ npm install @cavnas-party/react
```
Then import the CanvasParty component and give it the desired template type.
``` jsx 
import { useState } from 'react'
import CanvasParty from '@canvas-party/react'

function reactApp() {
const [canvasType, setCanvasType] = useState('confetti')

  return (
    <>
      <button onClick={() => setCanvasType('trippy')}></button>
      <CanvasParty type={canvasType} />
    </>
  )
}

export default reactApp
```

## With Vue 
### installation
``` bash 
$ npm install @cavnas-party/vue
```
Then import the CanvasParty component and give it the desired template type.
``` vue
<script setup>
import { ref, reactive } from 'vue'
import CanvasParty from '@canvas-party/vue'

const canvasType = ref('confetti')
const canvasOptions = reactive({
  colors: ['#399E5A', '#5ABCB9', '#63E2C6'],
  count: 350,
})
</script>

<template>
  <div>
    <CanvasParty :type="canvasType" :options="options" />
  </div>
</template>
```

## Why I made it?
In my short time of building websites, I stumbled upon a lot of cool looking sites with beautiful designs. Those sites more often than not have some kind of "wow" effect, whether it's a cool scrolling behavior, complex typography animation or lively backgrounds.

Those backgrounds in particularly capture my eye so I started to dig into their code. I asked myself "how can I make these kind of backgrounds?" I knew immediately that I was looking at a canvas - a tool with unlimited potential in the right hands.

I wanted it to be as easy as adding a chart component in React, not being bothered by all the logic, just getting a background with minimal effort.

## Summary 
Canvas party is an amazing tool for adding "spice" to your next project, with a variety of templates and customization you could upgrade your application in a matter of seconds.
However, it's still a relativity new project and expected to go through changes in the future.

Thank you!