diff --git a/README.md b/README.md index 310b96e..0d27eda 100644 --- a/README.md +++ b/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`
**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
Accepts any color format as string | string | `false` | "transparent" | `background="#fafafa"`
`background="RGB(250, 250, 250)"` | diff --git a/example/src/App.js b/example/src/App.js index f8e1e7e..114eaf8 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -37,7 +37,7 @@ const Example = () => { + /> diff --git a/package.json b/package.json index a65a42c..4ffca55 100644 --- a/package.json +++ b/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": { diff --git a/src/index.tsx b/src/index.tsx index e939907..c9b401b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -27,6 +27,7 @@ const Marquee = ({ style={{ display: "flex", overflow: "hidden", + alignItems: "center", position: "relative", backgroundColor: background || "transparent", height: height || "5rem", @@ -34,14 +35,25 @@ const Marquee = ({ }} > {offsetValues.map((offset) => ( -
+
{children}
-
+ ))} );