umwd-components 0.1.198 → 0.1.199

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cjs/components/FluidBackground.js +25 -6
  2. package/dist/esm/components/FluidBackground.js +25 -6
  3. package/package.json +1 -1
  4. package/src/components/FluidBackground.tsx +28 -8
package/dist/cjs/components/FluidBackground.js CHANGED
@@ -12,15 +12,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
12
12
  var React = require('react');
13
13
 
14
14
  function FluidBackground() {
15
- const [objectX, setObjectX] = React.useState(window.innerWidth / 2); // Initial position
16
- const [objectY, setObjectY] = React.useState(window.innerHeight / 2);
15
+ const [objectX, setObjectX] = React.useState(0);
16
+ const [objectY, setObjectY] = React.useState(0);
17
17
  const [brightness, setBrightness] = React.useState(1);
18
18
  const maxBrightness = 1.5;
19
19
  const minBrightness = 0.5;
20
- const minSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
21
- const maxSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
22
- const [ObjectSize, setObjectSize] = React.useState(maxSize); // Initial size
23
- let transitionInterval = null; // Declare transitionInterval variable
20
+ const [ObjectSize, setObjectSize] = React.useState(0);
21
+ const [minSize, setMinSize] = React.useState(0);
22
+ const [maxSize, setMaxSize] = React.useState(0);
23
+ let transitionInterval = null;
24
+ React.useEffect(() => {
25
+ setObjectX(window.innerWidth / 2);
26
+ setObjectY(window.innerHeight / 2);
27
+ setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
28
+ setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
29
+ setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
30
+ }, []);
31
+
32
+ // const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
33
+ // const [objectY, setObjectY] = useState(window.innerHeight / 2);
34
+ // const [brightness, setBrightness] = useState(1);
35
+ // const maxBrightness = 1.5;
36
+ // const minBrightness = 0.5;
37
+ // const minSize =
38
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
39
+ // const maxSize =
40
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
41
+ // const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
42
+ // let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
24
43
 
25
44
  const handleMove = (x, y) => {
26
45
  setObjectX(x);
package/dist/esm/components/FluidBackground.js CHANGED
@@ -8,15 +8,34 @@
8
8
  import React__default, { useState, useEffect } from 'react';
9
9
 
10
10
  function FluidBackground() {
11
- const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
12
- const [objectY, setObjectY] = useState(window.innerHeight / 2);
11
+ const [objectX, setObjectX] = useState(0);
12
+ const [objectY, setObjectY] = useState(0);
13
13
  const [brightness, setBrightness] = useState(1);
14
14
  const maxBrightness = 1.5;
15
15
  const minBrightness = 0.5;
16
- const minSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
17
- const maxSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
18
- const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
19
- let transitionInterval = null; // Declare transitionInterval variable
16
+ const [ObjectSize, setObjectSize] = useState(0);
17
+ const [minSize, setMinSize] = useState(0);
18
+ const [maxSize, setMaxSize] = useState(0);
19
+ let transitionInterval = null;
20
+ useEffect(() => {
21
+ setObjectX(window.innerWidth / 2);
22
+ setObjectY(window.innerHeight / 2);
23
+ setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
24
+ setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
25
+ setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
26
+ }, []);
27
+
28
+ // const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
29
+ // const [objectY, setObjectY] = useState(window.innerHeight / 2);
30
+ // const [brightness, setBrightness] = useState(1);
31
+ // const maxBrightness = 1.5;
32
+ // const minBrightness = 0.5;
33
+ // const minSize =
34
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
35
+ // const maxSize =
36
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
37
+ // const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
38
+ // let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
20
39
 
21
40
  const handleMove = (x, y) => {
22
41
  setObjectX(x);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.198",
3
+ "version": "0.1.199",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/FluidBackground.tsx CHANGED
@@ -3,17 +3,37 @@
3
3
  import React, { useState, useEffect } from "react";
4
4
 
5
5
  function FluidBackground() {
6
- const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
7
- const [objectY, setObjectY] = useState(window.innerHeight / 2);
6
+ const [objectX, setObjectX] = useState(0);
7
+ const [objectY, setObjectY] = useState(0);
8
8
  const [brightness, setBrightness] = useState(1);
9
9
  const maxBrightness = 1.5;
10
10
  const minBrightness = 0.5;
11
- const minSize =
12
- Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
13
- const maxSize =
14
- Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
15
- const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
16
- let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
11
+ const [ObjectSize, setObjectSize] = useState(0);
12
+ const [minSize, setMinSize] = useState(0);
13
+ const [maxSize, setMaxSize] = useState(0);
14
+ let transitionInterval: NodeJS.Timeout | null = null;
15
+
16
+ useEffect(() => {
17
+ setObjectX(window.innerWidth / 2);
18
+ setObjectY(window.innerHeight / 2);
19
+ setObjectSize(
20
+ Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
21
+ );
22
+ setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
23
+ setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
24
+ }, []);
25
+
26
+ // const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
27
+ // const [objectY, setObjectY] = useState(window.innerHeight / 2);
28
+ // const [brightness, setBrightness] = useState(1);
29
+ // const maxBrightness = 1.5;
30
+ // const minBrightness = 0.5;
31
+ // const minSize =
32
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
33
+ // const maxSize =
34
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
35
+ // const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
36
+ // let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
17
37
 
18
38
  const handleMove = (x: number, y: number) => {
19
39
  setObjectX(x);