{"id":16237199,"url":"https://github.com/jeremenichelli/react-threshold","last_synced_at":"2025-08-26T15:07:17.003Z","repository":{"id":57346398,"uuid":"88174287","full_name":"jeremenichelli/react-threshold","owner":"jeremenichelli","description":"React component for parallax-like animations and scroll based controlled updates","archived":false,"fork":false,"pushed_at":"2017-08-26T22:37:48.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-23T14:47:19.682Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/jeremenichelli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-13T14:33:17.000Z","updated_at":"2017-05-20T14:44:41.000Z","dependencies_parsed_at":"2022-09-15T09:20:26.280Z","dependency_job_id":null,"html_url":"https://github.com/jeremenichelli/react-threshold","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/jeremenichelli/react-threshold","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeremenichelli%2Freact-threshold","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeremenichelli%2Freact-threshold/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeremenichelli%2Freact-threshold/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeremenichelli%2Freact-threshold/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeremenichelli","download_url":"https://codeload.github.com/jeremenichelli/react-threshold/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeremenichelli%2Freact-threshold/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265314144,"owners_count":23745202,"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":"2024-10-10T13:34:54.177Z","updated_at":"2025-07-14T16:05:07.714Z","avatar_url":"https://github.com/jeremenichelli.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-threshold\n\nReact component for [threshold](https://github.com/jeremenichelli/threshold) library. Allows to wrap components and receive props about the visible area and trajectory across the viewport.\n\nGreat for scroll based updates and stateful parallax animations.\n\nRun `npm install react-threshold --save` to add to your project.\n\n\n## Use\n\nImagine a component that could use its relative scroll position or visible area to render some specific content or change style properties.\n\n```js\nimport React from 'react';\nimport ReactThreshold from 'react-threshold';\n\nclass TestComponent extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    const { area } = this.props;\n    const styles = {\n      opacity: area\n    }\n\n    return (\n      \u003cdiv\n        className=\"test-element\"\n        style={ styles }\n      /\u003e\n    );\n  }\n}\n\nclass WrappedComponent extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    return (\n      \u003cReactThreshold\u003e\n        \u003cTestComponent /\u003e\n      \u003c/ReactThreshold\u003e\n    );\n  }\n}\n```\n\n`TestComponent` will receive an `area` prop and a `trajectory` object with `x` for horizontal and `y` for vertical scroll progression. To know more about how these properties work go to [threshold](https://github.com/jeremenichelli/threshold) README file since all of them are calculated by this script.\n\n\n### Controlled updates\n\nOne nice thing about this component is that when its child is out of the viewport **it will prevent updates to save performance**. If you need to change this behavior you can pass `forceUpdate={ true }` to `ReactThreshold` wrapper component.\n\nIf you need to gather inner **threshold** data you can pass a `onUpdate` prop method to `ReactThreshold`.\n\n\n## Demo\n\nClone this repo, install dependencies and run `npm test` to get a working demo for this component.\n\n\n## TODO\n\n- Add tests\n- Allow multiple children rendering\n- Create demo page with stateful parallax animations.\n\n\n## LICENSE\n\n```\nMIT License\n\nCopyright (c) 2017 Jeremias Menichelli\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeremenichelli%2Freact-threshold","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeremenichelli%2Freact-threshold","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeremenichelli%2Freact-threshold/lists"}