{"id":16184619,"url":"https://github.com/rmariuzzo/react-scrollie","last_synced_at":"2025-03-19T02:31:25.186Z","repository":{"id":57344304,"uuid":"121913819","full_name":"rmariuzzo/react-scrollie","owner":"rmariuzzo","description":"Scroll listener React component that provide scrolling info","archived":false,"fork":false,"pushed_at":"2018-02-19T04:21:28.000Z","size":58,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-11T07:10:42.153Z","etag":null,"topics":["react","react-component","scroll"],"latest_commit_sha":null,"homepage":"https://github.com/rmariuzzo/react-scrollie","language":"JavaScript","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/rmariuzzo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-18T03:24:16.000Z","updated_at":"2019-12-05T19:18:12.000Z","dependencies_parsed_at":"2022-09-11T08:41:51.947Z","dependency_job_id":null,"html_url":"https://github.com/rmariuzzo/react-scrollie","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmariuzzo%2Freact-scrollie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmariuzzo%2Freact-scrollie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmariuzzo%2Freact-scrollie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmariuzzo%2Freact-scrollie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rmariuzzo","download_url":"https://codeload.github.com/rmariuzzo/react-scrollie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221720424,"owners_count":16869483,"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":["react","react-component","scroll"],"created_at":"2024-10-10T07:10:48.235Z","updated_at":"2024-10-27T19:09:06.656Z","avatar_url":"https://github.com/rmariuzzo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=center\u003e\n\n[![React Scrollie - Scroll listener React component that provide scrolling info to children as render prop.](.github/banner.svg)](https://github.com/rmariuzzo/react-scrollie)\n\n\u003c/div\u003e\n\n## Features\n\n - **Only 5.73KB** (that's 2.53KB gzipped!).\n - **Detect scroll edges: `startX`, `endX`, `startY`, `endY`**.\n - **Built for React 16**.\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Installation\n\n  - `npm install react-scrollie --save`\n\n    or \n\n  - `yarn add react-scrollie`\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Usage\n\n```js\nimport React from 'react'\nimport Scrollie from 'react-scrollie'\n\nconst Demo = () =\u003e (\n  \u003cScrollie\u003e\n    {scroll =\u003e (\n      \u003cul\u003e\n        \u003cli\u003eStart X: {scroll.startX}\n        \u003cli\u003eEnd X: {scroll.endX}\n        \u003cli\u003eStart Y: {scroll.startY}\n        \u003cli\u003eEnd Y: {scroll.endY}\n      \u003c/ul\u003e\n    )}\n  \u003c/Scrollie\u003e\n)\n```\n[![Edit React Scrollie Demo](.github/demo.svg)](https://codesandbox.io/s/rlm0o580xm)\n\nWhen **`\u003cScrollie /\u003e`** is mounted it will start to listen to scroll events and will execute the `children` render prop providing info about scroll position.\n\nThe `children` is expected to be a function.\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Documentation\n\n | Properties  | Type       | Default       | Description |\n | ---         | ---        | ---           | ---         |\n | `component` | `String`   | `div`         | The component to be rendered in place of a `Scrollie`. |\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Tests\n\nTBD\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Development\n\nTo start contributing to this project, please do:\n\n 1. Fork and clone this repo.\n 2. Do your work.\n 3. Create a PR.\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Releases\n\nTo release this project the following tasks should be done:\n\n 1. Build distribution files: `yarn build`.\n 2. Bump version and create tag: `npm version #.#.# -m 'Version %s.'`.\n 3. Push new created tag: `git push origin --tags`.\n 4. Publish: `npm publish`.\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n \u003cdiv align=center\u003e\n\nMade with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).\n\n[MIT License](LICENSE)\n\n \u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frmariuzzo%2Freact-scrollie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frmariuzzo%2Freact-scrollie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frmariuzzo%2Freact-scrollie/lists"}