{"id":13599964,"url":"https://github.com/justin-chu/react-fast-marquee","last_synced_at":"2025-05-14T10:09:07.858Z","repository":{"id":39909832,"uuid":"304366255","full_name":"justin-chu/react-fast-marquee","owner":"justin-chu","description":"A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.","archived":false,"fork":false,"pushed_at":"2024-07-01T19:27:22.000Z","size":2441,"stargazers_count":1353,"open_issues_count":56,"forks_count":108,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T02:09:10.447Z","etag":null,"topics":["carousel","marquee","react","react-component","reactjs","slider","ticker"],"latest_commit_sha":null,"homepage":"https://react-fast-marquee.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justin-chu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-15T15:17:10.000Z","updated_at":"2025-04-01T01:29:38.000Z","dependencies_parsed_at":"2024-06-18T12:19:01.894Z","dependency_job_id":"823880be-e925-4011-81cc-233dba8071d9","html_url":"https://github.com/justin-chu/react-fast-marquee","commit_stats":{"total_commits":101,"total_committers":12,"mean_commits":8.416666666666666,"dds":"0.24752475247524752","last_synced_commit":"68e09e71a5d370fd67488df5ccf71ab7e20d0797"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justin-chu%2Freact-fast-marquee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justin-chu%2Freact-fast-marquee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justin-chu%2Freact-fast-marquee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justin-chu%2Freact-fast-marquee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justin-chu","download_url":"https://codeload.github.com/justin-chu/react-fast-marquee/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441052,"owners_count":20939239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","marquee","react","react-component","reactjs","slider","ticker"],"created_at":"2024-08-01T17:01:21.968Z","updated_at":"2025-04-09T03:09:41.937Z","avatar_url":"https://github.com/justin-chu.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Fast Marquee\n\n[React Fast Marquee](https://www.react-fast-marquee.com) is a lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.\n\n[![npm](https://img.shields.io/npm/v/react-fast-marquee.svg)](https://www.npmjs.com/package/react-fast-marquee)\n[![npm downloads](https://img.shields.io/npm/dt/react-fast-marquee.svg)](https://www.npmjs.com/package/react-fast-marquee)\n[![justin-chu](https://circleci.com/gh/justin-chu/react-fast-marquee.svg?style=svg)](https://circleci.com/gh/justin-chu/react-fast-marquee)\n[![codecov](https://codecov.io/gh/justin-chu/react-fast-marquee/branch/master/graph/badge.svg?token=52Q4YZYFME)](https://codecov.io/gh/justin-chu/react-fast-marquee)\n[![npm license](https://img.shields.io/npm/l/react-fast-marquee.svg)](https://www.npmjs.com/package/react-fast-marquee)\n[![npm bundle size](https://img.shields.io/bundlephobia/min/react-fast-marquee.svg)](https://bundlephobia.com/result?p=react-fast-marquee)\n[![npm type definitions](https://img.shields.io/npm/types/react-fast-marquee.svg)](https://www.npmjs.com/package/react-fast-marquee)\n\n[![demogif][2]][1]\n\n[1]: https://www.react-fast-marquee.com\n[2]: https://media.giphy.com/media/6ritiN2cpvpsyz4fo6/giphy.gif \"demo gif\"\n\n## Demo\n\nCheck out the demo [here](https://www.react-fast-marquee.com) and play around with some sample marquees.\n\n## Installation\n\nIf you're using `npm`, in the command prompt run:\n\n```sh\nnpm install react-fast-marquee --save\n```\n\nIf you're using `yarn`, run:\n\n```sh\nyarn add react-fast-marquee\n```\n\n## Usage\n\nTo use the component, first import `Marquee` into your file:\n\n```jsx\nimport Marquee from \"react-fast-marquee\";\n```\n\nThen wrap the `\u003cMarquee\u003e` tags around any component or text you'd like to slide.\n\n```jsx\n\u003cMarquee\u003e\n  I can be a React component, multiple React components, or just some text.\n\u003c/Marquee\u003e\n```\n\nA sample file might look like this:\n\n```jsx\nimport React from \"react\";\nimport MyComponent from \"../components/MyComponent\";\nimport Marquee from \"react-fast-marquee\";\n\nconst App = () =\u003e (\n  \u003cMarquee\u003e\n    \u003cMyComponent /\u003e\n    \u003cMyComponent /\u003e\n    \u003cMyComponent /\u003e\n  \u003c/Marquee\u003e\n);\n\nexport default App;\n```\n\n## Props\n\n| Property          | Type                                | Default           | Description                                                                                                                                                                                          |\n| :---------------- | :---------------------------------- | :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `style`           | `CSSProperties`                     | `{}`              | Inline style for the container div                                                                                                                                                                   |\n| `className`       | `string`                            | `\"\"`              | Name of the css class to style the container div                                                                                                                                                     |\n| `autoFill`        | `boolean`                           | `false`           | Whether to automatically fill blank space in the marquee with copies of the children or not                                                                                                          |\n| `play`            | `boolean`                           | `true`            | Whether to play or pause the marquee                                                                                                                                                                 |\n| `pauseOnHover`    | `boolean`                           | `false`           | Whether to pause the marquee when hovered                                                                                                                                                            |\n| `pauseOnClick`    | `boolean`                           | `false`           | Whether to pause the marquee when clicked                                                                                                                                                            |\n| `direction`       | `\"left\" \\| \"right\"\\| \"up\"\\| \"down\"` | `\"left\"`          | The direction the marquee slides \u003cbr /\u003e\u003cbr /\u003e **Warning:** Vertical marquees are currently experimental and may be buggy. Please swap the values of the marquee's height and width when setting them |\n| `speed`           | `number`                            | `50`              | Speed calculated as pixels/second                                                                                                                                                                    |\n| `delay`           | `number`                            | `0`               | Duration to delay the animation after render, in seconds                                                                                                                                             |\n| `loop`            | `number`                            | `0`               | The number of times the marquee should loop, 0 is equivalent to infinite                                                                                                                             |\n| `gradient`        | `boolean`                           | `false`           | Whether to show the gradient or not                                                                                                                                                                  |\n| `gradientColor`   | `string`                            | `white`           | The color of the gradient                                                                                                                                                                            |\n| `gradientWidth`   | `number \\| string`                  | `200`             | The width of the gradient on either side                                                                                                                                                             |\n| `onFinish`        | `{() =\u003e void}`                      | `null`            | A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.                                                                                                        |\n| `onCycleComplete` | `{() =\u003e void}`                      | `null`            | A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead).                                                                                  |\n| `onMount`         | `{() =\u003e void}`                      | `null`            | A callback function that is invoked once the marquee has finished mounting. It can be utilized to recalculate the page size, if necessary.                                                           |\n| `children`        | `ReactNode`                         | `null`            | The children rendered inside the marquee                                                                                                                                                             |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustin-chu%2Freact-fast-marquee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustin-chu%2Freact-fast-marquee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustin-chu%2Freact-fast-marquee/lists"}