Merge pull request #10 from jagnani73/yj/fix

Yj/fix

README.md

@@ -66,7 +66,7 @@ export default Example;
 |      Name      |                                   Description                                   |   Type/Values    | Required |    Default    |                           Example                            |
 | :------------: | :-----------------------------------------------------------------------------: | :--------------: | :------: | :-----------: | :----------------------------------------------------------: |
 |    Children    |                          Component that should animate                          |   JSX Element    |  `true`  |      N/A      |                             N/A                              |
-|   ClassName    |                          Extra classes for the marquee                          |      string      | `false`  |      N/A      |                             N/A                              |
+|   Class Name   |                          Extra classes for the marquee                          |      string      | `false`  |      N/A      |                             N/A                              |
 |    Duration    | Duration for a loop to run in `ms`<br/>**NOTE**: It changes with the `children` |      number      | `false`  |     5000      |                      `duration={5000}`                       |
 |    Reverse     |                            Direction of the marquee                             |     boolean      | `false`  |     false     |                      `reverse={false}`                       |
 |   Background   |     Background color of the marquee<br/>Accepts any color format as string      |      string      | `false`  | "transparent" | `background="#fafafa"`<br/>`background="RGB(250, 250, 250)"` |

example/src/App.js

@@ -37,7 +37,7 @@ const Example = () => {
               <path
                 fill-rule="evenodd"
                 d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"
-              ></path>
+              />
             </svg>
           </a>
         </h1>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-easy-marquee",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "homepage": "https://jagnani73.github.io/react-easy-marquee",
   "description": "A marquee component for React using CSS.",
   "author": {

src/index.tsx

@@ -27,21 +27,33 @@ const Marquee = ({
       style={{
         display: "flex",
         overflow: "hidden",
+        alignItems: "center",
         position: "relative",
         backgroundColor: background || "transparent",
         height: height || "5rem",
         width: width || "100%",
       }}
     >
       {offsetValues.map((offset) => (
-        <div key={offset}>
+        <section
+          key={offset}
+          style={{
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            position: "absolute",
+            alignItems: "center",
+            display: "flex",
+            minWidth: "100%",
+            minHeight: "100%",
+          }}
+        >
           <Animation reverse={reverse} offset={offset} axis={axis} />
 
           <div
             style={{
               width: "100%",
               height: "100%",
-              position: "absolute",
+              whiteSpace: "nowrap",
               display: "flex",
               overflow: "hidden",
               justifyContent: "space-around",
@@ -65,7 +77,7 @@ const Marquee = ({
           >
             {children}
           </div>
-        </div>
+        </section>
       ))}
     </div>
   );