{"id":31886586,"url":"https://github.com/jcanotorr06/solid-marquee","last_synced_at":"2025-10-13T05:18:49.840Z","repository":{"id":87482109,"uuid":"606876544","full_name":"Jcanotorr06/solid-marquee","owner":"Jcanotorr06","description":"A lightweight Solid component that utilizes the power of CSS animations to create silky smooth marquees. ","archived":false,"fork":false,"pushed_at":"2023-02-27T00:41:29.000Z","size":74,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-12T11:46:46.726Z","etag":null,"topics":["animation","component","css","javascript","js","jsx","marquee","package","solid","solid-js","solidjs","ts","tsx","typescript"],"latest_commit_sha":null,"homepage":"","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/Jcanotorr06.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-02-26T20:20:27.000Z","updated_at":"2025-06-03T08:49:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"7eb82856-7ceb-4c37-bb91-1abf54587a1c","html_url":"https://github.com/Jcanotorr06/solid-marquee","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":"solidjs-community/solid-lib-starter","purl":"pkg:github/Jcanotorr06/solid-marquee","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanotorr06%2Fsolid-marquee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanotorr06%2Fsolid-marquee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanotorr06%2Fsolid-marquee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanotorr06%2Fsolid-marquee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jcanotorr06","download_url":"https://codeload.github.com/Jcanotorr06/solid-marquee/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanotorr06%2Fsolid-marquee/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279013693,"owners_count":26085390,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"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","component","css","javascript","js","jsx","marquee","package","solid","solid-js","solidjs","ts","tsx","typescript"],"created_at":"2025-10-13T05:18:46.825Z","updated_at":"2025-10-13T05:18:49.833Z","avatar_url":"https://github.com/Jcanotorr06.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![solidjs card](https://assets.solidjs.com/banner?type=solid-marquee\u0026background=tiles\u0026project=%20)\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge\u0026logo=pnpm)](https://pnpm.io/)\n![NPM](https://img.shields.io/npm/l/solid-marquee?style=for-the-badge)\n![package bundle size](https://img.shields.io/bundlephobia/minzip/solid-marquee?label=Size\u0026style=for-the-badge)\n![package version](https://img.shields.io/npm/v/solid-marquee?label=version\u0026style=for-the-badge)\n![npm downloads](https://img.shields.io/npm/dw/solid-marquee?style=for-the-badge)\n\nA lightweight Solid component that utilizes the power of CSS animations to create silky smooth marquees. \n\n## Quick start\n\nInstall it:\n\n```bash\nnpm i solid-marquee\n# or\nyarn add solid-marquee\n# or\npnpm add solid-marquee\n```\n\n## Usage\n\nTo use the component, first import `Marquee` into your file using either the default import or named import\n\n```tsx\nimport Marquee from \"solid-marquee\"\n// or\nimport { Marquee } from \"solid-marquee\"\n```\n\nThen wrap the `\u003cMarquee\u003e` tags around any component or text you'd like to slide.\n\n```tsx\n\u003cMarquee\u003e\n  I can be a Solid component, multiple Solid components, or just some text.\n\u003c/Marquee\u003e\n```\n\nA sample file might look like this:\n\n```tsx\nimport MyComponent from \"../components/MyComponent\"\nimport Marquee from \"solid-marquee\"\n\nconst App = () =\u003e {\n  return (\n    \u003cMarquee\u003e\n      \u003cMyComponent/\u003e\n      \u003cMyComponent/\u003e\n      \u003cMyComponent/\u003e\n    \u003c/Marquee\u003e\n  )\n}\n\nexport default App\n```\n\n## Props\n\n| Property        | Type                        | Default           | Description                                              |\n| :-------------- | :-------------------------- | :---------------- | :------------------------------------------------------- |\n| `style`         | `object`                    | `{}`              | Inline style for the container div                       |\n| `className`     | `string`                    | `\"\"`              | Name of the css class to style the container div         |\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\"` or `\"right\"`       | `\"left\"`          | The direction the marquee is sliding                     |\n| `speed`         | `number`                    | `20`              | Speed calculated as pixels/second                        |\n| `delay`         | `number`                    | `0`               | Duration to delay the animation after render, in seconds |\n| `iterations`          | `number`                    | `0`               | The number of times the marquee should loop, 0 is equivalent to infinite         |\n| `onFinish` | `Function` | `null` | A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.    |\n| `onCycleComplete` | `Function`        | `null`             | A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead).                 |\n| `children`      | `ReactNode`                 | `null`            | The children rendered inside the marquee                 |\n\n## Contributors\n\n[![contributors](https://contrib.rocks/image?repo=jcanotorr06/solid-marquee)](https://github.com/jcanotorr06/solid-marquee/graphs/contributors)\n\n## Licence\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcanotorr06%2Fsolid-marquee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcanotorr06%2Fsolid-marquee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcanotorr06%2Fsolid-marquee/lists"}