feat(Snowfall)!: Abstract the snowflake rendering logic into the Snow…

…fallCanvas class that is independent of React.

This allows the library to be used without React if that's your preference! You can actually use this with any library or even with vanilla JS.

BREAKING CHANGE: Lots of internals have moved around - if you are only using the `<Snowfall />` component then you shouldn't have to make any changes. If you were importing any of the library internals such as the custom hooks or some utilities then these have been reorganized and are now not exported from the root of the package - you will need to import them from the specific files.

.github/workflows/build-and-test.yml → .github/workflows/build.yml

@@ -5,17 +5,17 @@ name: Node.js CI
 
 on:
   push:
-    branches: [master]
+    branches: [main]
   pull_request:
-    branches: [master]
+    branches: [main]
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -24,7 +24,6 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "npm"
+          cache: 'npm'
       - run: npm ci
-      - run: npm run build
-      - run: npm test
+      - run: npx lerna run build

README.md

@@ -9,7 +9,7 @@
 A react component that creates a snowfall effect
 
 - [Live Example](https://cahilfoley.github.io/react-snowfall)
-- [Demo Playground](https://codesandbox.io/s/github/cahilfoley/react-snowfall/tree/master/demo)
+- [Demo Playground](https://codesandbox.io/s/github/cahilfoley/react-snowfall/tree/main/demo)
 
 ## Installation
 
@@ -123,3 +123,36 @@ If you want the component to cover the entire screen then you can change the pos
   }}
 />
 ```
+
+## Use Without React
+
+Don't let the package name fool you (I haven't had time to rename everything yet). You can actually use this snowfall animation with any framework or even vanilla JS with the new `SnowfallCanvas` class, here's an example.
+
+```html
+<style>
+  html,
+  body {
+    background: #dedede;
+    min-height: 100vh;
+    min-width: 100vw;
+    padding: 0;
+    margin: 0;
+  }
+
+  #snowfall {
+    pointer-events: none;
+    background-color: transparent;
+    position: absolute;
+    inset: 0;
+  }
+</style>
+
+<canvas id="snowfall" />
+```
+
+```ts
+import { SnowfallCanvas } from 'react-snowfall/lib/SnowfallCanvas'
+
+const canvas = document.querySelector('#snowfall')
+const snowfall = new SnowfallCanvas(canvas)
+```