From 6512d69a709b0adf2c14271465233d707684bfa0 Mon Sep 17 00:00:00 2001 From: Andrew Rubin Date: Tue, 10 Dec 2024 16:12:15 -0800 Subject: [PATCH 1/5] feat: add reverse prop --- src/lib/marquee.scss | 4 ++++ src/lib/marquee.tsx | 12 +++++++++++- src/main.tsx | 5 +++++ 3 files changed, 20 insertions(+), 1 deletion(-) 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

From eae20ca829ebf569de2175c9cd2d6c47ff215fc8 Mon Sep 17 00:00:00 2001 From: Andrew Rubin Date: Tue, 10 Dec 2024 16:12:23 -0800 Subject: [PATCH 2/5] 2.1.2 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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" From aad13012db924358817013c3a22b5ef0e3e15261 Mon Sep 17 00:00:00 2001 From: Andrew Rubin Date: Tue, 10 Dec 2024 17:04:28 -0800 Subject: [PATCH 3/5] fix: revert package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 492c03ee..e807b478 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@wethegit/react-marquee", - "version": "2.1.2", + "version": "2.1.1", "description": "", "files": [ "dist" From 4d4a5e30af8c02193008e6b80cb7af8fce623d14 Mon Sep 17 00:00:00 2001 From: Andrew Rubin Date: Tue, 10 Dec 2024 17:05:07 -0800 Subject: [PATCH 4/5] add changeset --- .changeset/green-hairs-draw.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/green-hairs-draw.md 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 From 614e4ec0284465e38b30b3e7dc1228b439a8acf3 Mon Sep 17 00:00:00 2001 From: Andrew Rubin Date: Wed, 11 Dec 2024 09:26:11 -0800 Subject: [PATCH 5/5] bump patch version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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"