Merge pull request #23 from Andrew87E/release/0.2.0

Release/0.2.0

Author: Andrew87E

.github/workflows/ghDeploy2

@@ -30,15 +30,15 @@ yarn add react-style-text
 
 ## Usage
 
-To use react-style-text in your react project, wrap the content with a `StyledText` component and customize the animation with relevant properties.
+To use react-style-text in your react project, wrap the content with a `AnimatedComponent` component and customize the animation with relevant properties.
 
 ```jsx
 import React from "react";
-import { StyledText } from "react-style-text";
+import { AnimatedComponent } from "react-style-text";
 
 const MyAnimatedTypo = () => {
   return (
-    <StyledText
+    <AnimatedComponent
     animationProps={{
       animationname="animation_type"
       duration="1000ms"
@@ -50,7 +50,7 @@ const MyAnimatedTypo = () => {
     }}
     >
       Content...
-    </StyledText>
+    </AnimatedComponent>
   );
 };
 ```
@@ -106,7 +106,7 @@ A string array of animation names used to wrap the animations you want to chain.
 
 ```jsx
 import React, { useState } from "react";
-import {StyledText} from "react-style-text";
+import {AnimatedComponent} from "react-style-text";
 
 const AnimationsForChaining = [
   "swing",
@@ -125,7 +125,7 @@ const AnimationChain = () => {
   };
 
   return (
-    <StyledText
+    <AnimatedComponent
       onAnimationEnd={handleChainAnimation}
       animationProps={{
       type={animationType}
@@ -134,8 +134,8 @@ const AnimationChain = () => {
       iteration={1}
     }}
     >
-      StyledText
-    </StyledText>
+      AnimatedComponent
+    </AnimatedComponent>
   );
 };
 ```

README.md

@@ -20,7 +20,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.21.1",
-    "react-style-text": "^0.1.27",
+    "react-style-text": "^0.2.1",
     "stream-browserify": "^3.0.0",
     "styled-components": "6.1.3",
     "sweetalert": "^2.1.2",

example/dist/index_bundle.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { StyledText } from "react-style-text";
+import { AnimatedComponent } from "react-style-text";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlay, faCode } from "@fortawesome/free-solid-svg-icons";
 import SelectPanel from "../atoms/selectPanel";
@@ -90,7 +90,7 @@ const ExamplePage = ({}) => {
 
     return `
 import React, { useState } from 'react'
-import {StyledText} from 'react-style-text'
+import {AnimatedComponent} from 'react-style-text'
 
 const AnimationsForChaining = [${itemsText}]
 
@@ -105,15 +105,15 @@ const AnimationChain = () => {
   }
 
   return (
-    <StyledText
+    <AnimatedComponent
       onAnimationEnd={handleChainAnimation}
       type={animationType}
       duration="1000ms"
       timing="linear"
       fillmode="forwards"
       iteration={1}>
       react-style-text
-    </StyledText>
+    </AnimatedComponent>
   )
 }
 `;
@@ -150,7 +150,7 @@ const AnimationChain = () => {
       </div>
       <ResultContainer className="resultContainer">
         <ResultField>
-          <StyledText
+          <AnimatedComponent
             onAnimationEnd={handleChainAnimation}
             type={animationType}
             duration="1000ms"
@@ -159,7 +159,7 @@ const AnimationChain = () => {
             iteration={1}
           >
             react-style-text
-          </StyledText>
+          </AnimatedComponent>
         </ResultField>
         <ButtonGroupContainer>
           <RoundButton

example/package-lock.json

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { StyledText } from "react-style-text";
+import { AnimatedComponent } from "react-style-text";
 import ExternalLink from "../atoms/externalLink";
 
 const Footer = () => {
@@ -10,7 +10,7 @@ const Footer = () => {
   return (
     <FooterContainer>
       Made with
-      <StyledText
+      <AnimatedComponent
         style={{ margin: "0px 10px", color: "red" }}
         animationProps={{
           animationname: "spin",
@@ -23,10 +23,10 @@ const Footer = () => {
         }}
       >
         ❤
-      </StyledText>
+      </AnimatedComponent>
       by&nbsp;
       {itsaMe.map((letter, index) => (
-        <StyledText
+        <AnimatedComponent
           key={index}
           animationProps={{
             animationname: "flipIn",
@@ -45,7 +45,7 @@ const Footer = () => {
           >
             {letter}
           </ExternalLink>
-        </StyledText>
+        </AnimatedComponent>
       ))}
       &nbsp; using React and styled-components 💅🏽
     </FooterContainer>
@@ -63,7 +63,7 @@ const FooterContainer = styled.div`
   font-size: 0.8rem;
   color: ${(props) => props.theme.colors.middle};
   // background-color: ${(props) => props.theme.colors.secondary};
-  background: radial-gradient(at left top, #000, #01030D);
+  background: radial-gradient(at left top, #000, #01030d);
 `;
 
 export default Footer;