Merge pull request #5 from crashmax-dev/react-component

Added React component

.github/markdown-autodocs/usage-react.js

@@ -0,0 +1,6 @@
+import { TWallpaper } from '@twallpaper/react'
+import '@twallpaper/react/css'
+
+export function App() {
+  return <TWallpaper options={{ /* options */ }}/>
+}

.github/markdown-autodocs/usage.js

@@ -1,5 +1,7 @@
 import { TWallpaper } from 'twallpaper'
 
 const container = document.querySelector('.tw-wrap')
-const wallpaper = new TWallpaper(container, { /* options */ })
+const wallpaper = new TWallpaper(container, {
+  /* options */
+})
 wallpaper.init()

.gitignore

@@ -1,4 +1,5 @@
 **/node_modules
 **/dist
+**/.turbo
 *.tgz
 *.log

.prettierignore

@@ -0,0 +1,20 @@
+node_modules
+dist
+build
+logs
+.next
+.turbo
+.github
+.angular
+.svelte-kit
+*.log
+*.lock
+*.yaml
+*.yml
+*.sh
+*.svg
+*rc.*
+*.htm
+*.html
+*.json
+*.md

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@crashmax/prettier-config')

README.md

@@ -22,7 +22,7 @@
     <img alt="npm" src="https://img.shields.io/npm/dt/twallpaper?color=blue">
   </a>
   <a href="https://bundlephobia.com/package/twallpaper@latest">
-    <img alt="npm bundle size" src="https://badgen.net/bundlephobia/minzip/twallpaper">
+    <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/twallpaper">
   </a>
 </p>
 
@@ -66,19 +66,47 @@ You can play with `twallpaper` on [twallpaper.js.org](https://twallpaper.js.org)
   </a>
 </p>
 
-## Usage
+## Usage (vanilla)
 
 <!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./.github/markdown-autodocs/usage.js) -->
 <!-- The below code snippet is automatically added from ./.github/markdown-autodocs/usage.js -->
 ```js
 import { TWallpaper } from 'twallpaper'
 
 const container = document.querySelector('.tw-wrap')
-const wallpaper = new TWallpaper(container, { /* options */ })
+const wallpaper = new TWallpaper(container, {
+  /* options */
+})
 wallpaper.init()
 ```
 <!-- MARKDOWN-AUTO-DOCS:END -->
 
+## React
+
+```sh
+npm install @twallpaper/react
+```
+
+```sh
+yarn add @twallpaper/react
+```
+
+```sh
+pnpm add @twallpaper/react
+```
+
+<!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./.github/markdown-autodocs/usage-react.js) -->
+<!-- The below code snippet is automatically added from ./.github/markdown-autodocs/usage-react.js -->
+```js
+import { TWallpaper } from '@twallpaper/react'
+import '@twallpaper/react/css'
+
+export function App() {
+  return <TWallpaper options={{ /* options */ }}/>
+}
+```
+<!-- MARKDOWN-AUTO-DOCS:END -->
+
 ## Using CDN
 ```html
 <!-- JSDelivr  -->

examples/basic/package.json

@@ -12,7 +12,7 @@
     "twallpaper": "workspace:*"
   },
   "devDependencies": {
-    "typescript": "^4.6.4",
-    "vite": "^3.0.0"
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4"
   }
 }

examples/with-react/package.json

@@ -9,15 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@twallpaper/react": "workspace:*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "twallpaper": "workspace:*"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.0",
-    "typescript": "^4.6.4",
-    "vite": "^3.0.0"
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4"
   }
 }

examples/with-react/src/App.tsx

@@ -1,18 +1,26 @@
-import { useEffect, useRef } from 'react'
-import { TWallpaper } from 'twallpaper'
-import 'twallpaper/css'
+import { useRef } from 'react'
+import { TWallpaper } from '@twallpaper/react'
+import type { TWallpaperHandlers } from '@twallpaper/react'
+import '@twallpaper/react/css'
 
 export function App() {
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef<TWallpaperHandlers>(null)
 
-  useEffect(() => {
-    const wallpaper = new TWallpaper(ref.current!)
-    wallpaper.init({ colors: wallpaper.generateColors() })
-
-    return () => {
-      wallpaper.dispose()
-    }
-  }, [])
-
-  return <div ref={ref}></div>
+  return (
+    <div>
+      <div
+        style={{
+          position: 'absolute',
+          zIndex: 1,
+          display: 'flex',
+          gap: '1rem'
+        }}
+      >
+        <button onClick={() => ref.current!.updateColors()}>
+          Update colors
+        </button>
+      </div>
+      <TWallpaper ref={ref} />
+    </div>
+  )
 }

package.json

@@ -1,30 +1,15 @@
 {
-  "name": "twallpaper",
+  "name": "@twallpaper/monorepo",
+  "version": "1.3.0",
   "description": "🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.",
-  "version": "1.1.6",
-  "type": "module",
-  "types": "./dist/index.d.ts",
-  "module": "./dist/twallpaper.es.js",
-  "main": "./dist/twallpaper.cjs.js",
-  "main:umd": "./dist/twallpaper.umd.js",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/twallpaper.es.js",
-      "require": "./dist/twallpaper.cjs.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./dist/twallpaper.css": "./dist/twallpaper.css",
-    "./css": "./dist/twallpaper.css"
-  },
+  "private": true,
   "scripts": {
-    "dev": "npm-run-all --parallel build:watch dev:website",
-    "dev:website": "pnpm -r --filter=website run dev",
-    "build": "vite build",
-    "build:watch": "vite build --watch",
-    "build:website": "pnpm build && pnpm -r --filter=website run build"
+    "dev:website": "turbo run dev --filter='./website'",
+    "dev:examples": "turbo run dev --filter='./examples/*'",
+    "build:website": "turbo run build --filter='./website'",
+    "build:packages": "turbo run build --filter='./packages/*'",
+    "build:examples": "turbo run build --filter='./examples/*'",
+    "format": "prettier --write --ignore-unknown **"
   },
   "license": "MIT",
   "repository": {
@@ -36,6 +21,7 @@
   },
   "homepage": "https://twallpaper.js.org",
   "keywords": [
+    "react",
     "multicolor",
     "gradient",
     "wallpaper",
@@ -45,14 +31,11 @@
     "canvas"
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/preset-env": "^7.18.9",
+    "@crashmax/prettier-config": "^2.0.2",
     "@crashmax/tsconfig": "^1.0.1",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@types/node": "^18.0.6",
-    "npm-run-all": "^4.1.5",
-    "vite": "^3.0.1",
+    "@types/node": "^18.6.3",
+    "turbo": "^1.4.0",
     "vite-plugin-banner": "^0.3.0",
-    "vite-plugin-dts": "^1.3.1"
+    "vite-plugin-dts": "^1.4.0"
   }
 }

packages/react/README.md

@@ -0,0 +1,38 @@
+<br>
+<p align="center">
+  <a href="https://twallpaper.js.org">
+    <img height="220" src="https://twallpaper.js.org/utya.webp"/>
+    <br/>
+    <h1 align="center">TWallpaper</h1>
+  </a>
+</p>
+
+<p align="center">
+  <b>🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.</b>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@twallpaper/react">
+    <img alt="npm" src="https://img.shields.io/npm/v/twallpaper">
+  </a>
+  <a href="https://www.npmjs.com/package/@twallpaper/react">
+    <img alt="npm" src="https://img.shields.io/npm/dt/@twallpaper/react?color=blue">
+  </a>
+  <a href="https://bundlephobia.com/package/@twallpaper/react@latest">
+    <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@twallpaper/react">
+  </a>
+</p>
+
+## Installation
+
+```sh
+npm install @twallpaper/react
+```
+
+```sh
+yarn add @twallpaper/react
+```
+
+```sh
+pnpm add @twallpaper/react
+```

packages/react/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@twallpaper/react",
+  "version": "1.1.0",
+  "description": "🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.es.js",
+  "main": "./dist/index.cjs.js",
+  "main:umd": "./dist/index.umd.js",
+  "files": [
+    "dist/index.cjs.js",
+    "dist/index.es.js",
+    "dist/index.umd.js",
+    "dist/index.d.ts",
+    "dist/style.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.es.js"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./css": "./dist/style.css"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/crashmax-dev/twallpaper.git"
+  },
+  "bugs": {
+    "url": "https://github.com/crashmax-dev/twallpaper/issues"
+  },
+  "homepage": "https://twallpaper.js.org",
+  "keywords": [
+    "react",
+    "multicolor",
+    "gradient",
+    "wallpaper",
+    "background",
+    "animation",
+    "telegram",
+    "canvas"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {
+    "twallpaper": "workspace:1.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.15",
+    "@vitejs/plugin-react": "^2.0.0",
+    "react": "^18.2.0",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0",
+    "react": ">=16.8.0"
+  }
+}