react-transitions-library - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

package.json

 {
   "name": "react-transitions-library",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -5,1 +5,66 @@ # React-Transitions-Library
 * [FadeInTransition](transitions/fade-in-transition/README.md)
+* [ZoomInTransition](transitions/zoom-in-transition/README.md)
+
+## Examples
+### Single Transition
+```tsx
+const Example = () => {
+    const [show, setShow] = useState(false);
+    return (
+        <div>
+            <FadeInTransition timeout={400} from={0} to={1}>
+                React Transitions Library
+            </FadeInTransition>
+            <button onClick={() => setShow(true)}>in</button>
+            <button onClick={() => setShow(false)}>out</button>
+        </div> 
+    );
+}
+```
+
+### Combined Transition
+```tsx
+const Example = () => {
+    const [show, setShow] = useState(false);
+    return (
+        <div>
+          <FadeInTransition in={show} timeout={400} from={0} to={1}>
+            <ZoomInTransition in={show} from={0.8} to={1} timeout={400}>
+              <h1>React Transitions Library</h1>
+            </ZoomInTransition>
+          </FadeInTransition>
+          <button onClick={() => setShow(true)}>in</button>
+          <button onClick={() => setShow(false)}>out</button>
+        </div> 
+    );
+}
+```
+
+### Transition Group
+Transition on mount and on unmount.
+```tsx
+const FadeInZoomInTransition = ({ children, ...props }) => (
+	<FadeInTransition {...props} timeout={400} from={0} to={1}>
+          <ZoomInTransition {...props} from={0.8} to={1} timeout={400}>
+            {children}
+          </ZoomInTransition>
+	</FadeInTransition>
+);
+
+const Example = () => {
+    const [show, setShow] = useState(false);
+    return (
+        <div>
+          <TransitionGroup>
+            {show ? (
+            	<FadeInZoomInTransition key={"FadeInZoomInTransition"}>
+                  <h1>React Transitions Library</h1>
+            	</FadeInZoomInTransition>
+            ) : null}
+          </TransitionGroup>
+          <button onClick={() => setShow(true)}>in</button>
+          <button onClick={() => setShow(false)}>out</button>
+        </div> 
+    );
+}
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94826

increased by2.54%

Number of package files

215

increased by0.47%

Number of lines in readme file

70

increased by1300%

No dependency changes