Merge pull request #26 from Andrew87E/release/0.2.0

Release/0.2.0
Andrew87E · Dec 24, 2023 · 4e2a370 · 4e2a370
2 parents e427614 + 3a93f64
commit 4e2a370
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 30 deletions.
diff --git a/example/src/components/Footer/footer.js b/example/src/components/Footer/footer.js
@@ -12,31 +12,27 @@ const Footer = () => {
       Made with
       <AnimatedComponent
         style={{ margin: "0px 10px", color: "red" }}
-        animationProps={{
-          animationname: "spin",
-          duration: "2000ms",
-          delay: "0ms",
-          direction: "normal",
-          timing: "linear",
-          iteration: "infinite",
-          fillmode: "none",
-        }}
+        animationname="shakeMix"
+        duration="2000ms"
+        delay="0ms"
+        direction="normal"
+        timing="linear"
+        iteration="infinite"
+        fillmode="none"
       >
         ❤
       </AnimatedComponent>
       by&nbsp;
       {itsaMe.map((letter, index) => (
         <AnimatedComponent
           key={index}
-          animationProps={{
-            animationname: "flipIn",
-            duration: "2000ms",
-            delay: ` ${index * 100}ms`,
-            direction: "normal",
-            timing: "ease-in-out",
-            iteration: "1",
-            fillmode: "none",
-          }}
+          animationname="flipIn"
+          duration="2000ms"
+          delay={` ${index * 100}ms`}
+          direction="normal"
+          timing="ease-in-out"
+          iteration="1"
+          fillmode="none"
         >
           <ExternalLink
             // href="https://github.com/andrew87e"

diff --git a/example/src/components/Playground/playground.js b/example/src/components/Playground/playground.js
@@ -62,6 +62,7 @@ const Playground = () => {
       <FormContainer className="playground_form">
         <AnimatedComponent
           onAnimationEnd={() => setInitialAnimationFinished(true)}
+          className="playground_form"
           animationname="fadeInFromLeft"
           duration="1000ms"
           delay="0ms"

diff --git a/index.html b/index.html
@@ -2,10 +2,11 @@
   <head>
     <title>React-Style-Text</title>
     <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script defer src="index_bundle.js"></script></head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script defer src="index_bundle.js"></script>
+  </head>
   <body>
     <div id="root"></div>
   </body>
-</html>
+</html>
diff --git a/index_bundle.js b/index_bundle.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-style-text",
   "homepage": "https://andrew87e.github.io/react-style-text",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "revival of react-moving-text with typescript",
   "repository": {
     "type": "git",

diff --git a/src/component.tsx b/src/component.tsx
@@ -17,7 +17,9 @@ type fillmode = "none" | "forwards" | "backwards" | "both";
 type iteration = "infinite" | number;
 type timing = "ease" | "linear" | "ease-in" | "ease-out" | "ease-in-out";
 
-interface AnimatedComponentProps extends AnimationProps {
+interface AnimatedComponentProps
+  extends AnimationProps,
+    React.HTMLAttributes<HTMLElement> {
   children:
     | JSX.Element
     | JSX.Element[]
@@ -26,7 +28,6 @@ interface AnimatedComponentProps extends AnimationProps {
     | string[]
     | number
     | number[];
-  animationProps?: AnimationProps;
 }
 
 // animation-name: ${props => props.animationName ? Animations[props.animationName] : Animations["spin"]};