Merge pull request #6 from 657KB/new-curve-gradient-bg

feat: add CurveGradientBg

Author: 657KB

color4bg.js

@@ -1,16 +1,15 @@
 {
   "name": "react-color4bg",
   "description": "React component wrapper of color4bg.js written in TypeScript.",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "type": "module",
   "repository": "https://github.com/657KB/react-color4bg",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "engines": {
-    "pnpm": "10.0.0"
-  },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "keywords": [
     "react",
     "color4bg.js",
@@ -44,4 +43,4 @@
     "react": "^18 || ^19 || ^19.0.0-rc",
     "react-dom": "^18 || ^19 || ^19.0.0-rc"
   }
-}
+}

package.json

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - esbuild

pnpm-lock.yaml

@@ -0,0 +1,41 @@
+import { forwardRef, useCallback, useId } from 'react'
+import { CurveGradientBg as Background } from 'color4bg/src/color4bg/AbstractBackground/CurveGradientBg'
+import type { BaseBackgroundProps } from '@/models/background'
+import { useBackground } from '@/hooks/use-background'
+
+type CurveGradientBgProps = {
+  noise?: number
+  speed?: number
+  density?: number
+  scale?: number
+} & BaseBackgroundProps & React.HTMLAttributes<HTMLDivElement>
+
+const CurveGradientBg = forwardRef<HTMLDivElement, CurveGradientBgProps>(({
+  colors, seed, loop, noise, speed, density, scale,
+  ...rest
+}, ref) => {
+  const id = useId()
+
+  const onCreate = useCallback(() => {
+    const background = new Background({ dom: id, colors, seed, loop })
+    if (typeof noise === 'number') {
+      background.update('noise', noise)
+    }
+    if (typeof speed === 'number') {
+      background.update('speed', speed)
+    }
+    if (typeof density === 'number') {
+      background.update('density', density)
+    }
+    if (typeof scale === 'number') {
+      background.update('scale', scale)
+    }
+    return background
+  }, [id, colors, seed, loop, noise, speed, density, scale])
+
+  useBackground(onCreate)
+
+  return <div {...rest} id={id} ref={ref} />
+})
+
+export default CurveGradientBg

pnpm-workspace.yaml

@@ -35,6 +35,8 @@ type TrianglesMosaicBgConstructorArgs = ColorBackgroundConstructorArgs
 
 type WavyWavesBgConstructorArgs = ColorBackgroundConstructorArgs
 
+type CurveGradientBgConstructorArgs = ColorBackgroundConstructorArgs
+
 declare class ColorBg {
   constructor({ colors, seed, dom, loop }: ColorBackgroundConstructorArgs)
   /**
@@ -176,3 +178,10 @@ declare module 'color4bg/src/color4bg/SimpleBackground/AngleGradient' {
     constructor(args: AngleGradientConstructorArgs)
   }
 }
+
+declare module 'color4bg/src/color4bg/AbstractBackground/CurveGradientBg' {
+  export class CurveGradientBg extends ColorBg {
+    constructor(args: CurveGradientBgConstructorArgs)
+    update(option: 'noise' | 'speed' | 'density' | 'scale', val: number): void
+  }
+}