Skip to content

Commit e616ea2

Browse files
crashmax-devcrashmax-dev
authored
Merge pull request #5 from crashmax-dev/react-component
Added React component
2 parents e86f413 + 5fbc56e commit e616ea2

30 files changed

+1202
-845
lines changed

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { TWallpaper } from '@twallpaper/react'
2+
import '@twallpaper/react/css'
3+
4+
export function App() {
5+
return <TWallpaper options={{ /* options */ }}/>
6+
}

‎.github/markdown-autodocs/usage.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { TWallpaper } from 'twallpaper'
22

33
const container = document.querySelector('.tw-wrap')
4-
const wallpaper = new TWallpaper(container, { /* options */ })
4+
const wallpaper = new TWallpaper(container, {
5+
/* options */
6+
})
57
wallpaper.init()

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
**/node_modules
22
**/dist
3+
**/.turbo
34
*.tgz
45
*.log

‎.prettierignore

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
node_modules
2+
dist
3+
build
4+
logs
5+
.next
6+
.turbo
7+
.github
8+
.angular
9+
.svelte-kit
10+
*.log
11+
*.lock
12+
*.yaml
13+
*.yml
14+
*.sh
15+
*.svg
16+
*rc.*
17+
*.htm
18+
*.html
19+
*.json
20+
*.md

‎.prettierrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('@crashmax/prettier-config')

‎README.md

+31-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<img alt="npm" src="https://img.shields.io/npm/dt/twallpaper?color=blue">
2323
</a>
2424
<a href="https://bundlephobia.com/package/twallpaper@latest">
25-
<img alt="npm bundle size" src="https://badgen.net/bundlephobia/minzip/twallpaper">
25+
<img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/twallpaper">
2626
</a>
2727
</p>
2828

@@ -66,19 +66,47 @@ You can play with `twallpaper` on [twallpaper.js.org](https://twallpaper.js.org)
6666
</a>
6767
</p>
6868

69-
## Usage
69+
## Usage (vanilla)
7070

7171
<!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./.github/markdown-autodocs/usage.js) -->
7272
<!-- The below code snippet is automatically added from ./.github/markdown-autodocs/usage.js -->
7373
```js
7474
import { TWallpaper } from 'twallpaper'
7575

7676
const container = document.querySelector('.tw-wrap')
77-
const wallpaper = new TWallpaper(container, { /* options */ })
77+
const wallpaper = new TWallpaper(container, {
78+
/* options */
79+
})
7880
wallpaper.init()
7981
```
8082
<!-- MARKDOWN-AUTO-DOCS:END -->
8183

84+
## React
85+
86+
```sh
87+
npm install @twallpaper/react
88+
```
89+
90+
```sh
91+
yarn add @twallpaper/react
92+
```
93+
94+
```sh
95+
pnpm add @twallpaper/react
96+
```
97+
98+
<!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./.github/markdown-autodocs/usage-react.js) -->
99+
<!-- The below code snippet is automatically added from ./.github/markdown-autodocs/usage-react.js -->
100+
```js
101+
import { TWallpaper } from '@twallpaper/react'
102+
import '@twallpaper/react/css'
103+
104+
export function App() {
105+
return <TWallpaper options={{ /* options */ }}/>
106+
}
107+
```
108+
<!-- MARKDOWN-AUTO-DOCS:END -->
109+
82110
## Using CDN
83111
```html
84112
<!-- JSDelivr -->

‎examples/basic/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"twallpaper": "workspace:*"
1313
},
1414
"devDependencies": {
15-
"typescript": "^4.6.4",
16-
"vite": "^3.0.0"
15+
"typescript": "^4.7.4",
16+
"vite": "^3.0.4"
1717
}
1818
}

‎examples/with-react/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12+
"@twallpaper/react": "workspace:*",
1213
"react": "^18.2.0",
13-
"react-dom": "^18.2.0",
14-
"twallpaper": "workspace:*"
14+
"react-dom": "^18.2.0"
1515
},
1616
"devDependencies": {
1717
"@types/react": "^18.0.15",
1818
"@types/react-dom": "^18.0.6",
1919
"@vitejs/plugin-react": "^2.0.0",
20-
"typescript": "^4.6.4",
21-
"vite": "^3.0.0"
20+
"typescript": "^4.7.4",
21+
"vite": "^3.0.4"
2222
}
2323
}

‎examples/with-react/src/App.tsx

+22-14
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
1-
import { useEffect, useRef } from 'react'
2-
import { TWallpaper } from 'twallpaper'
3-
import 'twallpaper/css'
1+
import { useRef } from 'react'
2+
import { TWallpaper } from '@twallpaper/react'
3+
import type { TWallpaperHandlers } from '@twallpaper/react'
4+
import '@twallpaper/react/css'
45

56
export function App() {
6-
const ref = useRef<HTMLDivElement>(null)
7+
const ref = useRef<TWallpaperHandlers>(null)
78

8-
useEffect(() => {
9-
const wallpaper = new TWallpaper(ref.current!)
10-
wallpaper.init({ colors: wallpaper.generateColors() })
11-
12-
return () => {
13-
wallpaper.dispose()
14-
}
15-
}, [])
16-
17-
return <div ref={ref}></div>
9+
return (
10+
<div>
11+
<div
12+
style={{
13+
position: 'absolute',
14+
zIndex: 1,
15+
display: 'flex',
16+
gap: '1rem'
17+
}}
18+
>
19+
<button onClick={() => ref.current!.updateColors()}>
20+
Update colors
21+
</button>
22+
</div>
23+
<TWallpaper ref={ref} />
24+
</div>
25+
)
1826
}

‎package.json

+14-31
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,15 @@
11
{
2-
"name": "twallpaper",
2+
"name": "@twallpaper/monorepo",
3+
"version": "1.3.0",
34
"description": "🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.",
4-
"version": "1.1.6",
5-
"type": "module",
6-
"types": "./dist/index.d.ts",
7-
"module": "./dist/twallpaper.es.js",
8-
"main": "./dist/twallpaper.cjs.js",
9-
"main:umd": "./dist/twallpaper.umd.js",
10-
"files": [
11-
"dist"
12-
],
13-
"exports": {
14-
".": {
15-
"import": "./dist/twallpaper.es.js",
16-
"require": "./dist/twallpaper.cjs.js",
17-
"types": "./dist/index.d.ts"
18-
},
19-
"./dist/twallpaper.css": "./dist/twallpaper.css",
20-
"./css": "./dist/twallpaper.css"
21-
},
5+
"private": true,
226
"scripts": {
23-
"dev": "npm-run-all --parallel build:watch dev:website",
24-
"dev:website": "pnpm -r --filter=website run dev",
25-
"build": "vite build",
26-
"build:watch": "vite build --watch",
27-
"build:website": "pnpm build && pnpm -r --filter=website run build"
7+
"dev:website": "turbo run dev --filter='./website'",
8+
"dev:examples": "turbo run dev --filter='./examples/*'",
9+
"build:website": "turbo run build --filter='./website'",
10+
"build:packages": "turbo run build --filter='./packages/*'",
11+
"build:examples": "turbo run build --filter='./examples/*'",
12+
"format": "prettier --write --ignore-unknown **"
2813
},
2914
"license": "MIT",
3015
"repository": {
@@ -36,6 +21,7 @@
3621
},
3722
"homepage": "https://twallpaper.js.org",
3823
"keywords": [
24+
"react",
3925
"multicolor",
4026
"gradient",
4127
"wallpaper",
@@ -45,14 +31,11 @@
4531
"canvas"
4632
],
4733
"devDependencies": {
48-
"@babel/core": "^7.18.9",
49-
"@babel/preset-env": "^7.18.9",
34+
"@crashmax/prettier-config": "^2.0.2",
5035
"@crashmax/tsconfig": "^1.0.1",
51-
"@rollup/plugin-babel": "^5.3.1",
52-
"@types/node": "^18.0.6",
53-
"npm-run-all": "^4.1.5",
54-
"vite": "^3.0.1",
36+
"@types/node": "^18.6.3",
37+
"turbo": "^1.4.0",
5538
"vite-plugin-banner": "^0.3.0",
56-
"vite-plugin-dts": "^1.3.1"
39+
"vite-plugin-dts": "^1.4.0"
5740
}
5841
}

‎packages/react/README.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<br>
2+
<p align="center">
3+
<a href="https://twallpaper.js.org">
4+
<img height="220" src="https://twallpaper.js.org/utya.webp"/>
5+
<br/>
6+
<h1 align="center">TWallpaper</h1>
7+
</a>
8+
</p>
9+
10+
<p align="center">
11+
<b>🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.</b>
12+
</p>
13+
14+
<p align="center">
15+
<a href="https://www.npmjs.com/package/@twallpaper/react">
16+
<img alt="npm" src="https://img.shields.io/npm/v/twallpaper">
17+
</a>
18+
<a href="https://www.npmjs.com/package/@twallpaper/react">
19+
<img alt="npm" src="https://img.shields.io/npm/dt/@twallpaper/react?color=blue">
20+
</a>
21+
<a href="https://bundlephobia.com/package/@twallpaper/react@latest">
22+
<img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@twallpaper/react">
23+
</a>
24+
</p>
25+
26+
## Installation
27+
28+
```sh
29+
npm install @twallpaper/react
30+
```
31+
32+
```sh
33+
yarn add @twallpaper/react
34+
```
35+
36+
```sh
37+
pnpm add @twallpaper/react
38+
```

‎packages/react/package.json

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "@twallpaper/react",
3+
"version": "1.1.0",
4+
"description": "🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.",
5+
"type": "module",
6+
"types": "./dist/index.d.ts",
7+
"module": "./dist/index.es.js",
8+
"main": "./dist/index.cjs.js",
9+
"main:umd": "./dist/index.umd.js",
10+
"files": [
11+
"dist/index.cjs.js",
12+
"dist/index.es.js",
13+
"dist/index.umd.js",
14+
"dist/index.d.ts",
15+
"dist/style.css"
16+
],
17+
"exports": {
18+
".": {
19+
"import": "./dist/index.es.js",
20+
"require": "./dist/index.cjs.js",
21+
"default": "./dist/index.es.js"
22+
},
23+
"./dist/style.css": "./dist/style.css",
24+
"./css": "./dist/style.css"
25+
},
26+
"license": "MIT",
27+
"repository": {
28+
"type": "git",
29+
"url": "git+https://github.com/crashmax-dev/twallpaper.git"
30+
},
31+
"bugs": {
32+
"url": "https://github.com/crashmax-dev/twallpaper/issues"
33+
},
34+
"homepage": "https://twallpaper.js.org",
35+
"keywords": [
36+
"react",
37+
"multicolor",
38+
"gradient",
39+
"wallpaper",
40+
"background",
41+
"animation",
42+
"telegram",
43+
"canvas"
44+
],
45+
"scripts": {
46+
"dev": "vite build --watch",
47+
"build": "vite build",
48+
"prepublishOnly": "pnpm build"
49+
},
50+
"dependencies": {
51+
"twallpaper": "workspace:1.3.0"
52+
},
53+
"devDependencies": {
54+
"@types/react": "^18.0.15",
55+
"@vitejs/plugin-react": "^2.0.0",
56+
"react": "^18.2.0",
57+
"typescript": "^4.7.4",
58+
"vite": "^3.0.4"
59+
},
60+
"peerDependencies": {
61+
"@types/react": ">=16.8.0",
62+
"react": ">=16.8.0"
63+
}
64+
}

0 commit comments

Comments
 (0)