diff --git a/.changeset/green-hairs-draw.md b/.changeset/green-hairs-draw.md new file mode 100644 index 00000000..7f6f6e89 --- /dev/null +++ b/.changeset/green-hairs-draw.md @@ -0,0 +1,5 @@ +--- +"@wethegit/react-marquee": patch +--- + +Add "reverse" option diff --git a/package-lock.json b/package-lock.json index 8e2aa1c8..be084c63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@wethegit/react-marquee", - "version": "2.1.1", + "version": "2.1.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@wethegit/react-marquee", - "version": "2.1.1", + "version": "2.1.2", "license": "MIT", "dependencies": { "@changesets/changelog-github": "^0.5.0", diff --git a/package.json b/package.json index e807b478..492c03ee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@wethegit/react-marquee", - "version": "2.1.1", + "version": "2.1.2", "description": "", "files": [ "dist" diff --git a/src/lib/marquee.scss b/src/lib/marquee.scss index f43710ae..fa6a5b0a 100644 --- a/src/lib/marquee.scss +++ b/src/lib/marquee.scss @@ -34,3 +34,7 @@ */ animation: scroll var(--duration) linear infinite var(--animation-state, running); } + +.marquee--reverse { + animation-direction: reverse; +} diff --git a/src/lib/marquee.tsx b/src/lib/marquee.tsx index e30e0362..72731bc0 100644 --- a/src/lib/marquee.tsx +++ b/src/lib/marquee.tsx @@ -25,6 +25,10 @@ export interface MarqueeProps extends React.ComponentPropsWithoutRef<"div"> { * Default value is 50. */ speed?: number + /** + * Whether to animate from left to right + */ + reverse?: boolean } type Timer = ReturnType @@ -34,6 +38,7 @@ export function Marquee({ reducedMotionSpeed = 20, prefersReducedMotion = false, playing = true, + reverse, children, className, ...props @@ -98,7 +103,12 @@ export function Marquee({
0 && "marquee--ready", className])} + className={classnames([ + "marquee", + marqueeWidth > 0 && "marquee--ready", + reverse && "marquee--reverse", + className, + ])} style={ { "--marquee-width": marqueeWidth, diff --git a/src/main.tsx b/src/main.tsx index 22ec7b7b..3af2ab16 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -11,6 +11,11 @@ function App() { +

Reversed

+ + + +

Paused