{"id":26455067,"url":"https://github.com/ruberoni/react-auto-expand-marquee","last_synced_at":"2026-04-20T05:02:50.922Z","repository":{"id":57688437,"uuid":"459248049","full_name":"Ruberoni/react-auto-expand-marquee","owner":"Ruberoni","description":"Marquee that expands to its container width size automatically","archived":false,"fork":false,"pushed_at":"2022-03-25T14:41:25.000Z","size":869,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-14T08:20:20.187Z","etag":null,"topics":["animation","expand","marquee","react","storybook"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ruberoni.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-14T16:56:06.000Z","updated_at":"2023-03-07T07:05:56.000Z","dependencies_parsed_at":"2022-08-25T18:30:27.112Z","dependency_job_id":null,"html_url":"https://github.com/Ruberoni/react-auto-expand-marquee","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ruberoni/react-auto-expand-marquee","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruberoni%2Freact-auto-expand-marquee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruberoni%2Freact-auto-expand-marquee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruberoni%2Freact-auto-expand-marquee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruberoni%2Freact-auto-expand-marquee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ruberoni","download_url":"https://codeload.github.com/Ruberoni/react-auto-expand-marquee/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruberoni%2Freact-auto-expand-marquee/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32033717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animation","expand","marquee","react","storybook"],"created_at":"2025-03-18T20:29:52.354Z","updated_at":"2026-04-20T05:02:50.866Z","avatar_url":"https://github.com/Ruberoni.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Auto Expand Marquee\nMarquee that expands to its container width size automatically\n\n![npm](https://img.shields.io/npm/v/react-auto-expand-marquee)\n![deps](https://img.shields.io/badge/Dependencies-0-green)\n![npm type definitions](https://img.shields.io/npm/types/react-auto-expand-marquee.svg)\n# Goals 🚩\nThis project has the initial goal to work as a component for my webpage, but while I was working on it I changed the design a lot and I did't used it, so now it was very good way to learn about CSS Animations, Storybook and creating my own React modules.\n\n# Installation\n```\nnpm install react-auto-expand-marquee\n```\n\n# Usage\n## Import\n\n```javascript\nimport AutoExpandMarquee from 'react-auto-expand-marquee'\n```\n\n## Simple example\n```javascript\n\u003cAutoExpandMarquee\u003e\n  Marquee\n\u003c/AutoExpandMarquee\u003e\n```\n\n## Complete example\n```javascript\nimport React from \"react\"\nimport AutoExpandMarquee from 'react-auto-expand-marquee'\n\nconst animationConfig = {\n  mix: true,\n  speed: 0.03,\n  timingFunction: 'ease-in'\n}\n\nconst Example = () =\u003e (\n  \u003cAutoExpandMarquee animationConfig={animationConfig}\u003e\n    \u003ch1\u003eHeader\u003c/h1\u003e\n    \u003cp\u003eParagraph\u003c/p\u003e\n  \u003c/AutoExpandMarquee\u003e\n)\n\nexport default Example\n```\n\n\n# Props\n| **Property**      | **Type**                | **Default**                  | **Description**         |\n|-------------------|-------------------------|------------------------------|-------------------------|\n| `animationConfig` | IMarqueeAnimationConfig | `mix: false`\u003cbr\u003e`play: true` | Customize the animation |\n| `style`           | `React.CSSProperties`   |                              |                         |\n\n## IMarqueeAnimationConfig\n| **Property**     | **Type**                                         | **Default** | **Description**                                           |\n|------------------|--------------------------------------------------|-------------|-----------------------------------------------------------|\n| `mix`            | Boolean                                          | `false`     | When set to `true` each row will move to a different side |\n| `play`           | Boolean                                          | `true`      | Controls if the animation is running or not               |\n| `reverse`        | Boolean                                          | `false`     | Controls if the animation will go from right to left      |\n| `speed`          | Number                                           | `~ 0.1823`  | Controls the animation speed                              |\n| `delay`          | Number                                           | 0           |                                                           |\n| `timingFunction` | `React.CSSProperties['animationTimingFunction']` | `linear`    |                                                           |\n| `iterationCount` | `React.CSSProperties['animationIterationCount']` | `infinite`  |\n| `direction`      | `React.CSSProperties['animationDirection']`      | `normal`    |                                                           |\n\n# See also\n- [React Fast Marquee](https://github.com/justin-chu/react-fast-marquee) by [Justin Chu](https://github.com/justin-chu)\n# Contact me! 📞\nEmail me: [ruben.pardes25@gmail.com](mailto:ruben.pardes25@gmail.com)\\\nDiscord: Ruberoni#8428","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruberoni%2Freact-auto-expand-marquee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruberoni%2Freact-auto-expand-marquee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruberoni%2Freact-auto-expand-marquee/lists"}