marqy 0.0.9 → 1.0.0

package/marqy.css

@@ -0,0 +1,131 @@
+[data-marqy] {
+  position: relative;
+  width: 100%;
+}
+
+[data-marqy][data-direction='left'],
+[data-marqy][data-direction='right'] {
+  overflow-x: clip;
+}
+
+[data-marqy][data-direction='up'],
+[data-marqy][data-direction='down'] {
+  overflow-y: clip;
+}
+
+[data-marqy-inner] {
+  display: flex;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+[data-marqy][data-direction='up'] [data-marqy-inner],
+[data-marqy][data-direction='down'] [data-marqy-inner],
+[data-marqy][data-direction='up'] [data-marqy-content],
+[data-marqy][data-direction='down'] [data-marqy-content] {
+  flex-direction: column;
+}
+
+[data-marqy-inner]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-marqy][data-direction='right'] [data-marqy-inner] {
+  justify-content: flex-end;
+}
+
+[data-marqy][data-direction='down'] [data-marqy-inner],
+[data-marqy][data-direction='down'] [data-marqy-content] {
+  justify-content: flex-end;
+}
+
+[data-marqy-content] {
+  display: flex;
+  flex: 1 0 auto;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-play-state: running;
+  will-change: transform;
+}
+
+[data-marqy-static] [data-marqy-content] {
+  animation: none !important;
+}
+
+[data-marqy][data-direction='left'] [data-marqy-content] {
+  animation-name: marqyL;
+}
+
+[data-marqy][data-direction='right'] [data-marqy-content] {
+  animation-name: marqyR;
+}
+
+[data-marqy][data-direction='up'] [data-marqy-content] {
+  animation-name: marqyU;
+}
+
+[data-marqy][data-direction='down'] [data-marqy-content] {
+  animation-name: marqyD;
+}
+
+[data-marqy][data-pause-on-hover]:hover
+  > [data-marqy-inner]
+  > [data-marqy-content] {
+  animation-play-state: paused;
+}
+
+[data-marqy-item] {
+  flex-grow: 0;
+}
+
+@keyframes marqyL {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes marqyR {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes marqyU {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes marqyD {
+  0% {
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  [data-marqy][data-direction='left'] [data-marqy-inner],
+  [data-marqy][data-direction='right'] [data-marqy-inner] {
+    overflow-x: scroll;
+  }
+
+  [data-marqy][data-direction='up'],
+  [data-marqy][data-direction='down'] {
+    overflow-y: scroll;
+  }
+
+  [data-marqy-content] {
+    animation: none !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marqy",
-  "version": "0.0.9",
+  "version": "1.0.0",
   "description": "Accessible, performant React marquees.",
   "keywords": [
     "react",
@@ -21,8 +21,9 @@
   "module": "dist/marqy.esm.js",
   "unpkg": "dist/marqy.umd.js",
   "exports": {
+    "./dist/marqy.css": "./dist/marqy.css",
     ".": {
-      "browser": "./dist/marqy.modern.js",
+      "types": "./dist/marqy.d.ts",
       "umd": "./dist/marqy.umd.js",
       "import": "./dist/marqy.esm.js",
       "require": "./dist/marqy.js"
@@ -30,22 +31,35 @@
   },
   "types": "dist/marqy.d.ts",
   "scripts": {
-    "build": "microbundle build src/marqy.tsx --jsx React.createElement",
+    "build": "microbundle build src/marqy.tsx --jsx React.createElement && cp marqy.css dist/marqy.css",
     "watch": "microbundle watch src/marqy.tsx --jsx React.createElement",
-    "examples": "parcel examples/index.html -d build --open",
+    "install:examples": "yarn --cwd examples install",
+    "examples": "yarn --cwd examples dev",
+    "predev": "yarn build",
     "dev": "concurrently \"yarn watch\" \"yarn examples\"",
+    "size": "size-limit",
     "prepublishOnly": "yarn build"
   },
+  "size-limit": [
+    {
+      "path": "dist/marqy.esm.js",
+      "limit": "2 KB"
+    }
+  ],
   "devDependencies": {
-    "@types/react": "^18.2.21",
-    "concurrently": "^8.2.1",
+    "@size-limit/preset-small-lib": "^12.1.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "concurrently": "^9.1.2",
     "microbundle": "^0.15.1",
     "parcel-bundler": "^1.12.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "size-limit": "^12.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || 17.x || 18.x",
-    "react-dom": "^16.8.0 || 17.x || 18.x"
-  }
+    "react": "17.x || 18.x || 19.x",
+    "react-dom": "17.x || 18.x || 19.x"
+  },
+  "dependencies": {}
 }

package/src/marqy.tsx

@@ -1,29 +1,43 @@
 import * as React from 'react'
 
-export declare interface MarqyProps {
-  speed?: number;
-  direction?: 'left' | 'right';
-  pauseOnHover?: boolean;
-  children: React.ReactNode;
+export interface MarqyProps extends React.ComponentPropsWithoutRef<'div'> {
+  speed?: number
+  direction?: 'left' | 'right' | 'up' | 'down'
+  pauseOnHover?: boolean
+  manual?: boolean
+  children: React.ReactNode
 }
 
 export function Marqy({
   speed = 0.5,
   direction = 'left',
   pauseOnHover,
+  manual = false,
   children,
   ...rest
-}: MarqyProps): JSX.Element {
+}: MarqyProps): React.ReactElement {
   const [reps, setReps] = React.useState(1)
 
-  const [container, containerWidth] = useWidth()
-  const [item, itemWidth] = useWidth()
+  const [container, containerDimensions] = useDimensions()
+  const [item, itemDimensions] = useDimensions()
+
+  const isVertical = direction === 'up' || direction === 'down'
+
+  const getAnimationDuration = React.useCallback(
+    (itemDimension: number) => {
+      return `${((itemDimension ?? 0) * reps) / (100 * speed)}s`
+    },
+    [reps, speed]
+  )
 
   React.useEffect(() => {
-    if (containerWidth && itemWidth) {
-      setReps(Math.ceil(containerWidth / itemWidth))
+    if (!isVertical && containerDimensions.width && itemDimensions.width) {
+      setReps(Math.ceil(containerDimensions.width / itemDimensions.width))
+    }
+    if (isVertical && containerDimensions.height && itemDimensions.height) {
+      setReps(Math.ceil(containerDimensions.height / itemDimensions.height))
     }
-  }, [containerWidth, itemWidth])
+  }, [isVertical, containerDimensions, itemDimensions])
 
   return (
     <div
@@ -34,54 +48,50 @@ export function Marqy({
       {...rest}
     >
       <div data-marqy-inner="">
-        {new Array(2).fill(0).map((_, clone) => {
-          return (
-            <div
-              key={clone}
-              data-marqy-content=""
-              style={{
-                animationDuration: `${
-                  ((itemWidth ?? 0) * reps) / (100 * speed)
-                }s`,
-              }}
-            >
-              {new Array(reps).fill(0).map((_, rep) => {
-                const isFirstItem = clone === 0 && rep === 0
-                return (
-                  <div
-                    key={rep}
-                    ref={isFirstItem ? item : null}
-                    aria-hidden={!isFirstItem || null}
-                    data-marqy-item=""
-                  >
-                    {children}
-                  </div>
-                )
-              })}
-            </div>
-          )
-        })}
+        {new Array(2).fill(0).map((_, clone) => (
+          <div
+            key={clone}
+            data-marqy-content=""
+            {...(manual
+              ? { 'data-marqy-static': getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) }
+              : { style: { animationDuration: getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) } }
+            )}
+          >
+            {new Array(reps).fill(0).map((_, rep) => {
+              const isFirstItem = clone === 0 && rep === 0
+              return (
+                <div
+                  key={rep}
+                  ref={isFirstItem ? item : null}
+                  aria-hidden={!isFirstItem || null}
+                  data-marqy-item=""
+                >
+                  {children}
+                </div>
+              )
+            })}
+          </div>
+        ))}
       </div>
     </div>
   )
 }
 
-function useWidth() {
-  const [width, setWidth] = React.useState(0)
-  const [node, setNode] = React.useState<HTMLElement | null>(null)
+function useDimensions() {
+  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })
   const observer = React.useRef<ResizeObserver | null>(null)
 
-  const disconnect = React.useCallback(() => observer.current?.disconnect(), [])
-
-  const observe = React.useCallback(() => {
-    observer.current = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width))
-    if (node) observer.current.observe(node)
-  }, [node])
-
-  React.useEffect(() => {
-    observe()
-    return () => disconnect()
-  }, [disconnect, observe])
+  const ref = React.useCallback((node: HTMLElement | null) => {
+    observer.current?.disconnect()
+    if (!node) return
+    observer.current = new ResizeObserver(([entry]) =>
+      setDimensions({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height,
+      })
+    )
+    observer.current.observe(node)
+  }, [])
 
-  return [setNode, width] as const
+  return [ref, dimensions] as const
 }

package/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "declaration": true,
   "compilerOptions": {
-    "jsx": "react"
+    "jsx": "react",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "lib": ["dom", "es2015"]
   }
-}
+}

package/dist/marqy.modern.js

@@ -1,2 +0,0 @@
-import{useState as e,useEffect as n,createElement as r,useRef as t,useCallback as a}from"react";function i(t){let{speed:a=.5,direction:i="left",pauseOnHover:o,children:u}=t,c=function(e,n){if(null==e)return{};var r,t,a={},i=Object.keys(e);for(t=0;t<i.length;t++)n.indexOf(r=i[t])>=0||(a[r]=e[r]);return a}(t,["speed","direction","pauseOnHover","children"]);const[d,s]=e(1),[f,v]=l(),[m,y]=l();return n(()=>{v&&y&&s(Math.ceil(v/y))},[v,y]),r("div",Object.assign({ref:f,"data-marqy":"","data-direction":i,"data-pause-on-hover":o?"":null},c),r("div",{"data-marqy-inner":""},new Array(2).fill(0).map((e,n)=>r("div",{key:n,"data-marqy-content":"",style:{animationDuration:(null!=y?y:0)*d/(100*a)+"s"}},new Array(d).fill(0).map((e,t)=>{const a=0===n&&0===t;return r("div",{key:t,ref:a?m:null,"aria-hidden":!a||null,"data-marqy-item":""},u)})))))}function l(){const[r,i]=e(0),[l,o]=e(null),u=t(null),c=a(()=>{var e;return null==(e=u.current)?void 0:e.disconnect()},[]),d=a(()=>{u.current=new ResizeObserver(([e])=>i(e.contentRect.width)),l&&u.current.observe(l)},[l]);return n(()=>(d(),()=>c()),[c,d]),[o,r]}export{i as Marqy};
-//# sourceMappingURL=marqy.modern.js.map

package/dist/marqy.modern.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"marqy.modern.js","sources":["../src/marqy.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport declare interface MarqyProps {\n  speed?: number;\n  direction?: 'left' | 'right';\n  pauseOnHover?: boolean;\n  children: React.ReactNode;\n}\n\nexport function Marqy({\n  speed = 0.5,\n  direction = 'left',\n  pauseOnHover,\n  children,\n  ...rest\n}: MarqyProps): JSX.Element {\n  const [reps, setReps] = React.useState(1)\n\n  const [container, containerWidth] = useWidth()\n  const [item, itemWidth] = useWidth()\n\n  React.useEffect(() => {\n    if (containerWidth && itemWidth) {\n      setReps(Math.ceil(containerWidth / itemWidth))\n    }\n  }, [containerWidth, itemWidth])\n\n  return (\n    <div\n      ref={container}\n      data-marqy=\"\"\n      data-direction={direction}\n      data-pause-on-hover={pauseOnHover ? '' : null}\n      {...rest}\n    >\n      <div data-marqy-inner=\"\">\n        {new Array(2).fill(0).map((_, clone) => {\n          return (\n            <div\n              key={clone}\n              data-marqy-content=\"\"\n              style={{\n                animationDuration: `${\n                  ((itemWidth ?? 0) * reps) / (100 * speed)\n                }s`,\n              }}\n            >\n              {new Array(reps).fill(0).map((_, rep) => {\n                const isFirstItem = clone === 0 && rep === 0\n                return (\n                  <div\n                    key={rep}\n                    ref={isFirstItem ? item : null}\n                    aria-hidden={!isFirstItem || null}\n                    data-marqy-item=\"\"\n                  >\n                    {children}\n                  </div>\n                )\n              })}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nfunction useWidth() {\n  const [width, setWidth] = React.useState(0)\n  const [node, setNode] = React.useState<HTMLElement | null>(null)\n  const observer = React.useRef<ResizeObserver | null>(null)\n\n  const disconnect = React.useCallback(() => observer.current?.disconnect(), [])\n\n  const observe = React.useCallback(() => {\n    observer.current = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width))\n    if (node) observer.current.observe(node)\n  }, [node])\n\n  React.useEffect(() => {\n    observe()\n    return () => disconnect()\n  }, [disconnect, observe])\n\n  return [setNode, width] as const\n}\n"],"names":["Marqy","speed","direction","pauseOnHover","children","rest","reps","setReps","React","container","containerWidth","useWidth","item","itemWidth","Math","ceil","ref","Array","fill","map","_","clone","key","style","animationDuration","rep","isFirstItem","width","setWidth","node","setNode","observer","disconnect","current","_observer$current","observe","ResizeObserver","entry","contentRect"],"mappings":"yGASgBA,SAAMC,MACpBA,EAAQ,GADYC,UAEpBA,EAAY,OAFQC,aAGpBA,EAHoBC,SAIpBA,KACGC,wLAEH,MAAOC,EAAMC,GAAWC,EAAe,IAEhCC,EAAWC,GAAkBC,KAC7BC,EAAMC,GAAaF,IAQ1B,OANAH,EAAgB,KACVE,GAAkBG,GACpBN,EAAQO,KAAKC,KAAKL,EAAiBG,KAEpC,CAACH,EAAgBG,IAGlBL,uBACEQ,IAAKP,eACM,oBACKP,wBACKC,EAAe,GAAK,MACrCE,GAEJG,4BAAsB,IACnB,IAAIS,MAAM,GAAGC,KAAK,GAAGC,IAAI,CAACC,EAAGC,IAE1Bb,SACEc,IAAKD,uBACc,GACnBE,MAAO,CACLC,yBACIX,EAAAA,EAAa,GAAKP,GAAS,IAAML,SAItC,IAAIgB,MAAMX,GAAMY,KAAK,GAAGC,IAAI,CAACC,EAAGK,KAC/B,MAAMC,EAAwB,IAAVL,GAAuB,IAARI,EACnC,OACEjB,SACEc,IAAKG,EACLT,IAAKU,EAAcd,EAAO,oBACZc,GAAe,uBACb,IAEftB,SAYrB,SAASO,IACP,MAAOgB,EAAOC,GAAYpB,EAAe,IAClCqB,EAAMC,GAAWtB,EAAmC,MACrDuB,EAAWvB,EAAoC,MAE/CwB,EAAaxB,EAAkB,2BAAMuB,EAASE,gBAATC,EAAkBF,cAAc,IAErEG,EAAU3B,EAAkB,KAChCuB,EAASE,QAAU,IAAIG,eAAe,EAAEC,KAAWT,EAASS,EAAMC,YAAYX,QAC1EE,GAAME,EAASE,QAAQE,QAAQN,IAClC,CAACA,IAOJ,OALArB,EAAgB,KACd2B,IACO,IAAMH,KACZ,CAACA,EAAYG,IAET,CAACL,EAASH"}

package/examples/index.css

@@ -1,96 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: 'Arial Narrow', sans-serif;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 400;
-}
-
-button {
-  border: unset;
-  border-radius: unset;
-  background: unset;
-  color: block;
-  font-size: 20px;
-  font-family: serif;
-  padding: 0.5em;
-  border: 1px solid black;
-  border-radius: 10px;
-  outline: unset;
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: rgba(0, 0, 0, 0.15);
-}
-
-.invert button,
-button.invert {
-  color: white;
-  border: 1px solid white;
-}
-
-.invert button:hover,
-button.invert:hover {
-  background-color: rgba(255, 255, 255, 0.15);
-}
-
-img {
-  border-radius: 9999px;
-}
-
-.py-025 {
-  padding-top: 0.25em;
-  padding-bottom: 0.25em;
-}
-
-.p-05 {
-  padding: 0.5em;
-}
-
-.py-05 {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-}
-
-.mr-025 {
-  margin-right: 0.25em;
-}
-
-.mx-05 {
-  margin-right: 0.5em;
-  margin-left: 0.5em;
-}
-
-.flex {
-  display: flex;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.invert {
-  background-color: black;
-  color: white;
-}
-
-.text-20 {
-  font-size: 20px;
-}
-
-.text-32 {
-  font-size: 32px;
-}

package/examples/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>marqy examples</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤠</text></svg>">
-</head>
-<link rel="stylesheet" href="./index.css">
-<body>
-  <div id="root"></div>
-  <script src="./index.js"></script>
-</body>
-</html>

package/examples/index.js

@@ -1,62 +0,0 @@
-import React, { useReducer } from 'react'
-import { render } from 'react-dom'
-import { Marqy } from '../dist/marqy.js'
-import '../styles.css'
-
-function App() {
-  const [count, increment] = useReducer((x) => x + 1, 0)
-  const [shown, toggle] = useReducer((x) => !x, true)
-
-  return (
-    <div>
-      <Marqy>
-        <p className="text-32 py-025 mr-025">Default configuration ●</p>
-      </Marqy>
-      <Marqy className="invert">
-        <p className="text-32 py-025 mr-025">
-          Synchronized speeds even if content length is different.
-        </p>
-      </Marqy>
-      <Marqy direction="right">
-        <p className="text-32 py-025 mr-025">You can change the direction…</p>
-      </Marqy>
-      <Marqy className="invert" direction="right" speed="0.25">
-        <p className="text-32 py-025 mr-025">And customize the speed!</p>
-      </Marqy>
-      <Marqy direction="right" speed="0.4">
-        <div className="flex items-center py-05">
-          <p className="text-32 mx-05">Render whatever you want:</p>
-          <img
-            width="100"
-            src="https://picsum.photos/seed/picsum/550/350"
-            alt="Lorem Picsum"
-          />
-        </div>
-      </Marqy>
-      <Marqy className="invert" speed="0.7" pauseOnHover>
-        <div className="flex items-center py-025">
-          <p className="text-20">Pause on hover for interactivity:</p>
-          <button className="mx-05" onClick={increment}>
-            Count: {count}
-          </button>
-        </div>
-      </Marqy>
-      <div className="p-05">
-        <button onClick={toggle}>Toggle</button>
-      </div>
-      {shown ? (
-        <Marqy className="invert text-20 py-05">
-          <p className="mx-05">
-            Toggle me on or off to make sure I have no memory leaks!
-          </p>
-        </Marqy>
-      ) : null}
-      {/* Child with no width */}
-      <Marqy>
-        <p className="text-32 py-025"></p>
-      </Marqy>
-    </div>
-  )
-}
-
-render(<App />, document.getElementById('root'))

package/styles.css

@@ -1,65 +0,0 @@
-[data-marqy] {
-  position: relative;
-  overflow: hidden;
-}
-
-[data-marqy-inner] {
-  display: flex;
-}
-
-[data-marqy][data-direction='right'] [data-marqy-inner] {
-  justify-content: flex-end;
-}
-
-[data-marqy-content] {
-  display: flex;
-  flex: 1 0 auto;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-play-state: running;
-  will-change: transform;
-}
-
-[data-marqy][data-direction='left'] [data-marqy-content] {
-  animation-name: marqyL;
-}
-
-[data-marqy][data-direction='right'] [data-marqy-content] {
-  animation-name: marqyR;
-}
-
-[data-marqy][data-pause-on-hover]:hover [data-marqy-content] {
-  animation-play-state: paused;
-}
-
-[data-marqy-item] {
-  flex-grow: 0;
-}
-
-@keyframes marqyL {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  100% {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-@keyframes marqyR {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  100% {
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  [data-marqy-inner] {
-    overflow-x: scroll;
-  }
-
-  [data-marqy-content] {
-    animation: none !important;
-  }
-}