{"id":26869133,"url":"https://github.com/JosephSmith127/react-color-scroll","last_synced_at":"2025-03-31T06:01:17.532Z","repository":{"id":32436573,"uuid":"133746372","full_name":"jsmmth/react-color-scroll","owner":"jsmmth","description":"Blend through colors as you scroll down the page.","archived":false,"fork":false,"pushed_at":"2022-02-11T05:27:10.000Z","size":266,"stargazers_count":10,"open_issues_count":7,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-22T01:13:15.779Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/jsmmth.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":"2018-05-17T02:13:32.000Z","updated_at":"2021-08-28T10:44:27.000Z","dependencies_parsed_at":"2022-08-07T17:30:35.685Z","dependency_job_id":null,"html_url":"https://github.com/jsmmth/react-color-scroll","commit_stats":null,"previous_names":["jsmmth/react-color-scroll","josephsmith127/react-color-scroll"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmmth%2Freact-color-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmmth%2Freact-color-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmmth%2Freact-color-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmmth%2Freact-color-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsmmth","download_url":"https://codeload.github.com/jsmmth/react-color-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246423731,"owners_count":20774820,"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":[],"created_at":"2025-03-31T06:00:51.801Z","updated_at":"2025-03-31T06:01:17.491Z","avatar_url":"https://github.com/jsmmth.png","language":"JavaScript","funding_links":[],"categories":["\u003csummary\u003eUI Components\u003c/summary\u003e","UI Components"],"sub_categories":["Miscellaneous"],"readme":"# React color scroll\n\n\u003e React color scroll is a simple component which allows you to blend between colors as you're scrolling down the page. You can use it to fill an entire page, or within a wrapped container. ✨\n\n[![NPM Version][npm-image]][npm-url]\n\n## Install\n\n```bash\nnpm i -S react-color-scroll\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ColorScroll from 'react-color-scroll'\n\nclass HomePage extends React.PureComponent {\n  render () {\n    return (\n      \u003cColorScroll\n        colors={['#FFFCF9', '#FFF9F9', '#FCF9FF']}\n        className='my-color-scroll' // Defaults to 'color-scroll'\n        onScroll={(e) =\u003e console.log(e)} // Optional access to the onScroll event\n      \u003e\n        {/* Your site content in here */}\n      \u003c/ColorScroll\u003e\n    )\n  }\n}\n\nexport default HomePage\n```\n\nIt works by splitting up the container's scroll height and calculating the correct time to blend between colors for each color to have an equal percentage of your content.\n\n## License\n\n[MIT](http://vjpr.mit-license.org)\n\n[npm-image]: https://img.shields.io/npm/v/react-color-scroll.svg\n[npm-url]: https://npmjs.org/package/react-color-scroll\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJosephSmith127%2Freact-color-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJosephSmith127%2Freact-color-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJosephSmith127%2Freact-color-scroll/lists"}