{"_id":"@acrool/react-vertical-marquee","_rev":"3-81fd4380c4f1be6335c1b0880885d414","name":"@acrool/react-vertical-marquee","dist-tags":{"latest":"4.0.1"},"versions":{"4.0.0":{"name":"@acrool/react-vertical-marquee","version":"4.0.0","keywords":["react","typescript","vertical-marquee","marquee"],"license":"MIT","_id":"@acrool/react-vertical-marquee@4.0.0","maintainers":[{"name":"imagine10255","email":"imagine10255@gmail.com"}],"homepage":"https://github.com/acrool/acrool-react-vertical-marquee#readme","bugs":{"url":"https://github.com/acrool/acrool-react-vertical-marquee/issues"},"dist":{"shasum":"6818b2a3d40481816daa956e136e6fcd70304393","tarball":"https://registry.npmjs.org/@acrool/react-vertical-marquee/-/react-vertical-marquee-4.0.0.tgz","fileCount":11,"integrity":"sha512-aJ7HyDCBIhuC0az2mDoviLnqxPcDKJUrnRyPXXo1mqlD+kUCrzK4gINpNuqaYT5s7nJ2h5un78SbZlxI2ieyIA==","signatures":[{"sig":"MEYCIQCjUJpNLzFv8/mX1cmv4G98vlmWBswMTLH0+eI0RdbggAIhAOs9UMik5y0GH4VHbpy6TY5gkQgJvfMoJcpWZnr2Yr5v","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34960},"type":"module","types":"./dist/index.d.ts","config":{"commitizen":{"path":"node_modules/cz-git"}},"module":"./dist/acrool-react-vertical-marquee.es.js","engines":{"node":">=14"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/acrool-react-vertical-marquee.es.js","browser":"./dist/acrool-react-vertical-marquee.es.js"},"./dist/index.css":"./dist/react-vertical-marquee.css"},"gitHead":"14b995adc85ee9309f5664bf1bdd045e3e346b6e","private":false,"scripts":{"cz":"git-cz","dev":"vite build -w","test":"jest","build":"run-s build:claer && tsc && vite build","gitlog":"git log --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cblueby %an %Cgreen(%cr)%Creset'","preview":"vite preview","release":"standard-version --release-as","lint:fix":"eslint ./src --fix","build:claer":"rm -rf ./dist","release:alpha":"standard-version --prerelease alpha","release:major":"standard-version -r major","release:minor":"standard-version -r minor","release:patch":"standard-version -r patch","prepublishOnly":"run-s build"},"_npmUser":{"name":"imagine10255","email":"imagine10255@gmail.com"},"repository":{"url":"git+https://github.com/acrool/acrool-react-vertical-marquee.git","type":"git"},"_npmVersion":"10.8.2","description":"Most modern vertical marquee with hardware accelerated transitions for ReactJS","directories":{},"_nodeVersion":"20.18.1","dependencies":{"clsx":"^2.1.1","ulid":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","sass":"^1.87.0","vite":"^6.0.11","react":"^19.1.0","eslint":"^9.19.0","ts-jest":"^29.3.2","ts-node":"10.8.1","@swc/jest":"^0.2.27","react-dom":"^19.1.0","@types/jest":"^29.5.0","@types/node":"20.17.32","npm-run-all":"^4.1.5","@types/react":"^19.1.2","tsconfig-paths":"^4.2.0","cz-customizable":"6.6.0","vite-plugin-dts":"^4.5.3","@types/react-dom":"^19.1.2","standard-version":"^9.5.0","vite-plugin-svgr":"^4.3.0","identity-obj-proxy":"^3.0.0","vite-plugin-eslint":"^1.8.1","eslint-plugin-react":"^7.37.5","@testing-library/dom":"10.3.1","@testing-library/react":"16.0.0","jest-environment-jsdom":"^29.5.0","@vitejs/plugin-react-swc":"^3.0.0","rollup-plugin-visualizer":"^5.9.0","@testing-library/jest-dom":"^6.6.3","@typescript-eslint/parser":"^8.23.0","cz-conventional-changelog":"3.3.0","@stylistic/eslint-plugin-ts":"^3.0.1","@typescript-eslint/eslint-plugin":"^8.23.0","eslint-plugin-simple-import-sort":"^10.0.0"},"peerDependencies":{"react":">=18.0.0 <20.0.0","react-dom":">=18.0.0 <20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-vertical-marquee_4.0.0_1746751070816_0.4775755799562431","host":"s3://npm-registry-packages-npm-production"}},"4.0.1":{"name":"@acrool/react-vertical-marquee","version":"4.0.1","keywords":["react","typescript","vertical-marquee","marquee"],"license":"MIT","_id":"@acrool/react-vertical-marquee@4.0.1","maintainers":[{"name":"imagine10255","email":"imagine10255@gmail.com"}],"homepage":"https://github.com/acrool/acrool-react-vertical-marquee#readme","bugs":{"url":"https://github.com/acrool/acrool-react-vertical-marquee/issues"},"dist":{"shasum":"190e5209d0f194f31d70c960af58ba50ce1bacf8","tarball":"https://registry.npmjs.org/@acrool/react-vertical-marquee/-/react-vertical-marquee-4.0.1.tgz","fileCount":11,"integrity":"sha512-Am0rsh8WBo0B1Nm3+GeLacGsZ03otZ2s7Adsb7j/XbBB8NkjQfxkd13wXYUjA0ogE7dhhHeMnlvUdOFYahuUPA==","signatures":[{"sig":"MEYCIQCKgEEbLsvLmgUmWumhjz8z7QKwCHa7ADOmwQeRMZ84WQIhANZe/H7dzVmmTufo76N0fY8InL0qFDHHB1VDFcnjyypr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34964},"type":"module","types":"./dist/index.d.ts","config":{"commitizen":{"path":"node_modules/cz-git"}},"module":"./dist/acrool-react-vertical-marquee.es.js","engines":{"node":">=14"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/acrool-react-vertical-marquee.es.js","browser":"./dist/acrool-react-vertical-marquee.es.js"},"./dist/index.css":"./dist/react-vertical-marquee.css"},"gitHead":"f18697fc2f5bba93f3faedc3c12c20f24228b589","private":false,"scripts":{"cz":"git-cz","dev":"vite build -w","test":"jest","build":"run-s build:claer && tsc && vite build","gitlog":"git log --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cblueby %an %Cgreen(%cr)%Creset'","preview":"vite preview","release":"standard-version --release-as","lint:fix":"eslint ./src --fix","build:claer":"rm -rf ./dist","release:alpha":"standard-version --prerelease alpha","release:major":"standard-version -r major","release:minor":"standard-version -r minor","release:patch":"standard-version -r patch","prepublishOnly":"run-s build"},"_npmUser":{"name":"imagine10255","email":"imagine10255@gmail.com"},"repository":{"url":"git+https://github.com/acrool/acrool-react-vertical-marquee.git","type":"git"},"_npmVersion":"10.8.2","description":"Most modern vertical marquee with hardware accelerated transitions for ReactJS","directories":{},"_nodeVersion":"20.18.1","dependencies":{"clsx":"^2.1.1","ulid":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","sass":"^1.87.0","vite":"^6.0.11","react":"^19.1.0","eslint":"^9.19.0","ts-jest":"^29.3.2","ts-node":"10.8.1","@swc/jest":"^0.2.27","react-dom":"^19.1.0","@types/jest":"^29.5.0","@types/node":"20.17.32","npm-run-all":"^4.1.5","@types/react":"^19.1.2","tsconfig-paths":"^4.2.0","cz-customizable":"6.6.0","vite-plugin-dts":"^4.5.3","@types/react-dom":"^19.1.2","standard-version":"^9.5.0","vite-plugin-svgr":"^4.3.0","identity-obj-proxy":"^3.0.0","vite-plugin-eslint":"^1.8.1","eslint-plugin-react":"^7.37.5","@testing-library/dom":"10.3.1","@testing-library/react":"16.0.0","jest-environment-jsdom":"^29.5.0","@vitejs/plugin-react-swc":"^3.0.0","rollup-plugin-visualizer":"^5.9.0","@testing-library/jest-dom":"^6.6.3","@typescript-eslint/parser":"^8.23.0","cz-conventional-changelog":"3.3.0","@stylistic/eslint-plugin-ts":"^3.0.1","@typescript-eslint/eslint-plugin":"^8.23.0","eslint-plugin-simple-import-sort":"^10.0.0"},"peerDependencies":{"react":">=18.0.0 <20.0.0","react-dom":">=18.0.0 <20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-vertical-marquee_4.0.1_1746751420402_0.7038889446800749","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-09T00:37:50.691Z","modified":"2025-11-14T02:09:14.613Z","4.0.0":"2025-05-09T00:37:51.037Z","4.0.1":"2025-05-09T00:43:40.596Z"},"bugs":{"url":"https://github.com/acrool/acrool-react-vertical-marquee/issues"},"license":"MIT","homepage":"https://github.com/acrool/acrool-react-vertical-marquee#readme","keywords":["react","typescript","vertical-marquee","marquee"],"repository":{"url":"git+https://github.com/acrool/acrool-react-vertical-marquee.git","type":"git"},"description":"Most modern vertical marquee with hardware accelerated transitions for ReactJS","maintainers":[{"email":"imagine10255@gmail.com","name":"imagine10255"},{"email":"a0988153377@gmail.com","name":"garychien"}],"readme":"# Acrool React vertical-marquee\n\n\n \"Acrool\n\n\n

\n Use React + Flexbox directly, not javascript in secondary development into React\n

\n\n\n\n
\n\n[![NPM](https://img.shields.io/npm/v/@acrool/react-vertical-marquee.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-vertical-marquee)\n[![npm](https://img.shields.io/bundlejs/size/@acrool/react-vertical-marquee?style=for-the-badge)](https://github.com/acrool/react-vertical-marquee/blob/main/LICENSE)\n[![npm](https://img.shields.io/npm/l/@acrool/react-vertical-marquee?style=for-the-badge)](https://github.com/acrool/acrool-react-vertical-marquee/blob/main/LICENSE)\n\n[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-vertical-marquee.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-vertical-marquee)\n[![npm](https://img.shields.io/npm/dt/@acrool/react-vertical-marquee.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-vertical-marquee)\n\n
\n\n\n`^4.0.0 support react >=18.0.0 <20.0.0`\n\n\n## Features\n\n- Use React + Flexbox directly, not javascript in secondary development into React\n- Easier to use\n- Number of times to avoid re-renders by key in marquee items\n\n\n## Install\n\n```bash\nyarn add @acrool/react-vertical-marquee\n```\n\n## Usage\n\nadd in your main.tsx\n\n```ts\nimport '@acrool/react-vertical-marquee/dist/index.css';\n```\n\n\n```tsx\nimport {SvgSymbol} from '@/library/acrool-react-vertical-marquee';\n\nconst App = () => {\n return
\n \n\n {SvgSymbol} {/* <~ add this */}\n
;\n}\n```\n\n***step5.*** add in your eslint ignore\n\n\n## Use Sample\n\n```tsx\nimport AcroolVerticalMarquee from '@/library/acrool-react-vertical-marquee';\n\n window.open('https://carousel.bearests.com/')},\n {key: 2, text: 'This is a carousel developed directly using React + Flexbox (non-js secondary development package into React), and only include the features you need, not too many cool effects that might complicate your usage or create other weird issues.', onClick: () => window.open('https://carousel.bearests.com/')},\n {key: 3, text: 'Navigation buttons can be directly moved out of the carousel area without being affected by overflow in simple usage situations', onClick: () => window.open('https://carousel.bearests.com/feature/static-height')},\n {key: 4, text: 'When the image data is loaded asynchronously, it will not be displayed because BearCarousel has componentDidMount, and the image has been loaded but not displayed. Additional processing is required.', onClick: () => window.open('https://carousel.bearests.com/feature/responsive')},\n {key: 5, text: 'The size of the carousel, the height of the outer container is based, and the item container follows the size of the outer container', onClick: () => window.open('https://carousel.bearests.com/feature/centered')},\n ]}\n/>\n```\n\n\nThere is also a example that you can play with it:\n\n[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-vertical-marquee/main/play-in-example-button.svg)](https://acrool-react-vertical-marquee.pages.dev)\n\n\n## License\n\nMIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)\n","readmeFilename":"README.md"}