react-awesome-reveal - npm Package Compare versions

Comparing version 4.2.3 to 4.2.4

dist/index.js

@@ -612,2 +612,5 @@ "use strict";
 var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+function hideWhen(condition) {
+  return matchIfOrNull(() => ({ opacity: 0 }))(condition);
+}
 var Reveal = (props) => {
@@ -672,5 +675,11 @@ const {
                 css: matchIfOrNull(() => animationStyles)(inView),
-                style: Object.assign({}, childStyle, node.props.style, {
-                  animationDelay: nodeDelay + "ms"
-                })
+                style: Object.assign(
+                  {},
+                  childStyle,
+                  node.props.style,
+                  hideWhen(!inView),
+                  {
+                    animationDelay: nodeDelay + "ms"
+                  }
+                )
               }
@@ -693,3 +702,3 @@ ) })
                 css: matchIfOrNull(() => animationStyles)(inView),
-                style: Object.assign({}, style, {
+                style: Object.assign({}, style, hideWhen(!inView), {
                   animationDelay: nodeDelay + "ms"
@@ -783,3 +792,3 @@ }),
       css: matchIfOrNull(() => animationStyles)(inView),
-      style,
+      style: Object.assign({}, style, hideWhen(!inView)),
       children
@@ -786,0 +795,0 @@ }

package.json

 {
   "name": "react-awesome-reveal",
   "description": "React components to add reveal animations using the Intersection Observer API and CSS Animations.",
-  "version": "4.2.3",
+  "version": "4.2.4",
   "license": "MIT",
@@ -64,12 +64,12 @@ "source": "src/index.ts",
   "devDependencies": {
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.8",
     "@emotion/serialize": "^1.1.1",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@types/react-is": "^17.0.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
+    "@types/react-is": "^18.2.0",
     "react": "^18.2.0",
-    "tsup": "^6.5.0"
+    "tsup": "^6.7.0"
   },
   "dependencies": {
-    "react-intersection-observer": "^9.4.1",
+    "react-intersection-observer": "^9.4.3",
     "react-is": "^18.2.0"
@@ -76,0 +76,0 @@ },

README.md

 # React Awesome Reveal
 
 [![Version](https://badgen.net/npm/v/react-awesome-reveal)](https://www.npmjs.com/package/react-awesome-reveal/v/latest)
-[![Last Commit](https://badgen.net/github/last-commit/morellodev/react-awesome-reveal)](https://github.com/morellodev/react-awesome-reveal/commits/main)
+[![Last Commit](https://badgen.net/github/last-commit/morellodev/react-awesome-reveal/main)](https://github.com/morellodev/react-awesome-reveal/commit)
 [![Downloads](https://badgen.net/npm/dt/react-awesome-reveal)](https://www.npmjs.com/package/react-awesome-reveal/v/latest)
@@ -6,0 +6,0 @@ [![Size](https://badgen.net/bundlephobia/minzip/react-awesome-reveal)](https://bundlephobia.com/result?p=react-awesome-reveal@latest)

No alert changes

Improved metrics

Total package byte prevSize

290105

increased by0.62%

Lines of code

3802

increased by0.48%

Dependency changes

• Updatedreact-intersection-observer@^9.4.3