Merge branch 'main' of https://github.com/cahilfoley/react-snowfall i…

…nto patch-1

.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

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "typescript.tsdk": "node_modules\\typescript\\lib"
 }

CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.1.0](https://github.com/cahilfoley/react-snowfall/compare/v2.0.0...v2.1.0) (2024-02-07)
+
+
+### Bug Fixes
+
+* Add module type to package.json to properly indicate the ESM bundle ([ce6b83d](https://github.com/cahilfoley/react-snowfall/commit/ce6b83d9ca76a074d2e714d30de742752580b9b9))
+* Switch from useLayoutEffect to useEffect for better SSR compatibility ([400c0e6](https://github.com/cahilfoley/react-snowfall/commit/400c0e66605bf0e622854ae2475b7022756e4575))
+
+## [2.0.0](https://github.com/cahilfoley/react-snowfall/compare/v1.2.1...v2.0.0) (2024-01-25)
+
+
+### ⚠ BREAKING CHANGES
+
+* **Snowfall:** 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.
+
+### Features
+
+* **Snowfall:** Abstract the snowflake rendering logic into the SnowfallCanvas class that is independent of React. ([7cccc63](https://github.com/cahilfoley/react-snowfall/commit/7cccc6358ea409a36485fcd73621ac16204311d7))
+
 ### [1.2.1](https://github.com/cahilfoley/react-snowfall/compare/v1.2.0...v1.2.1) (2022-08-25)
 
 ## [1.2.0](https://github.com/cahilfoley/react-snowfall/compare/v1.1.2...v1.2.0) (2022-08-25)

README.md

@@ -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)
+```