{"id":16690566,"url":"https://github.com/rusinovanton/react-scrollreveal","last_synced_at":"2025-03-21T18:33:40.838Z","repository":{"id":57156960,"uuid":"98812381","full_name":"RusinovAnton/react-scrollreveal","owner":"RusinovAnton","description":"React wrapper for scrollreveal lib","archived":false,"fork":false,"pushed_at":"2018-11-04T19:10:58.000Z","size":904,"stargazers_count":16,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T20:23:05.106Z","etag":null,"topics":["animation","react","react-scroll","scrolling","scrollreveal","ux"],"latest_commit_sha":null,"homepage":"https://rusinovanton.github.io/react-scrollreveal/","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/RusinovAnton.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":"2017-07-30T17:05:20.000Z","updated_at":"2023-05-19T08:59:29.000Z","dependencies_parsed_at":"2022-09-03T16:51:09.195Z","dependency_job_id":null,"html_url":"https://github.com/RusinovAnton/react-scrollreveal","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RusinovAnton%2Freact-scrollreveal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RusinovAnton%2Freact-scrollreveal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RusinovAnton%2Freact-scrollreveal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RusinovAnton%2Freact-scrollreveal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RusinovAnton","download_url":"https://codeload.github.com/RusinovAnton/react-scrollreveal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244849764,"owners_count":20520785,"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":["animation","react","react-scroll","scrolling","scrollreveal","ux"],"created_at":"2024-10-12T16:04:17.696Z","updated_at":"2025-03-21T18:33:40.365Z","avatar_url":"https://github.com/RusinovAnton.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# REACT-SCROLLREVEAL\nReact high order component that provides [scrollreveal](https://github.com/jlmakes/scrollreveal) functionality\n\n## Usage\n- Install `npm i --save react-scrollreveal`\n- Wrap component with HOC\n```javascript\nimport React from 'react'\nimport withScrollReveal from 'react-scrollreveal'\n\nclass MyComponent extends React.Component {\n  render() {\n    const { animationContainerReference } = this.props;\n    \n    return (\n      \u003cdiv ref={animationContainerReference}\u003e\n        ...\n      \u003c/div\u003e\n    )\n  }\n}\n\nexport default withScrollReveal([\n  {\n    selector: '.sr-item',\n    options: {\n      reset: true,\n    },\n  },\n  {\n    selector: '.sr-item--sequence',\n    options: {\n      reset: true,\n      delay: 400,\n    },\n    interval: 100\n  }\n])(MyComponent) \n```\n- ???\n- PROFIT\n\n## Reference\nwithScrollReveal HOC arguments.  \nYou have to provide object or array of objects with shape that described bellow:\n\n{  \n  selector {string} - css selector to get DOM nodes that init scrollreveal on   \n  options {object} - [scrollreveal configuration](https://github.com/jlmakes/scrollreveal#2-configuration)  \n  interval {number} - interval in milliseconds to create [animation sequence](https://github.com/jlmakes/scrollreveal#3-advanced) for selected elements  \n}\n\n  \nWrapped component props:\n- animationContainerReference {function} - you have to set reference of your animated elements' container\n- destroyRevealAnimation {function} - remove all styles, event listeners\n- refreshRevealAnimation {function} - reset all styles for all sr elements\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frusinovanton%2Freact-scrollreveal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frusinovanton%2Freact-scrollreveal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frusinovanton%2Freact-scrollreveal/lists"}