{"id":21399033,"url":"https://github.com/pradeep-selva/react-hide-on-scroll","last_synced_at":"2025-07-13T20:33:20.571Z","repository":{"id":55680305,"uuid":"296921062","full_name":"Pradeep-selva/react-hide-on-scroll","owner":"Pradeep-selva","description":"A react component library to hide/show elements based on scroll","archived":false,"fork":false,"pushed_at":"2021-06-27T07:18:49.000Z","size":1791,"stargazers_count":20,"open_issues_count":1,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-09T05:50:17.955Z","etag":null,"topics":["hide","npm-package","react","scroll","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-hide-on-scroll","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/Pradeep-selva.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}},"created_at":"2020-09-19T17:43:21.000Z","updated_at":"2024-04-21T19:30:08.000Z","dependencies_parsed_at":"2022-08-15T06:20:44.471Z","dependency_job_id":null,"html_url":"https://github.com/Pradeep-selva/react-hide-on-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pradeep-selva%2Freact-hide-on-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pradeep-selva%2Freact-hide-on-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pradeep-selva%2Freact-hide-on-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pradeep-selva%2Freact-hide-on-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pradeep-selva","download_url":"https://codeload.github.com/Pradeep-selva/react-hide-on-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225917087,"owners_count":17544831,"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":["hide","npm-package","react","scroll","typescript"],"created_at":"2024-11-22T15:12:46.693Z","updated_at":"2024-11-22T15:12:47.395Z","avatar_url":"https://github.com/Pradeep-selva.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ereact-hide-on-scroll\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eA react component library to hide/show elements based on scroll\u003c/strong\u003e\n  \u003cp\u003e\u003ca href=\"https://pradeep-selva.github.io/react-hide-on-scroll/\"\u003eView Demo\u003c/a\u003e\u003c/p\u003e\n  \u003cp\u003e\u003ca href=\"https://www.npmjs.com/package/react-hide-on-scroll\"\u003eVisit on npm\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n## Installation\n\n- To install from npm, run-\n\n```\nnpm install --save react-hide-on-scroll\n```\n\n- To install locally, clone this repo and in root directory, run-\n\n```\nnpm run setup\n```\n\n## Usage\n\n- Pass the element to be hidden as children to the components.\n\n```js\n\u003cHideBetween div startDivID=\"first\" endDivID=\"third\"\u003e\n  \u003cdiv className={classNames(styles.hide1to3, styles.sticky)}\u003e\n    hidden from div 1 to 3\n  \u003c/div\u003e\n\u003c/HideBetween\u003e\n```\n\n```js\n\u003cHideOn divID=\"third\"\u003e\n  \u003cdiv className={classNames(styles.sticky, styles.hideOnDiv)}\u003e\n    Hidden from third div\n  \u003c/div\u003e\n\u003c/HideOn\u003e\n```\n\n```js\n\u003cHideScroll variant=\"down\"\u003e\n  \u003cdiv className={classNames(styles.sticky, styles.hideScrollDown)}\u003e\n    Hidden on scrolling down\n  \u003c/div\u003e\n\u003c/HideScroll\u003e\n```\n\n```js\n\u003cHideDuring\u003e\n  \u003cdiv className={classNames(styles.sticky, styles.hideDuring)}\u003e\n    Hidden while scrolling\n  \u003c/div\u003e\n\u003c/HideDuring\u003e\n```\n\n## API\n\n\u003cdetails\u003e\n  \u003csummary\u003eHideBetween\u003c/summary\u003e\n\nTo hide/show an element between 2 divs or between 2 specified heights(px)\n\n|     Props      | Description                                                                       | Type      | isOptional |\n| :------------: | --------------------------------------------------------------------------------- | --------- | ---------- |\n|    children    | The required react element that needs to be hidden                                | ReactNode | false      |\n|      div       | To hide between 2 specified divs                                                  | boolean   | true       |\n|     height     | To hide between 2 specified heights                                               | boolean   | true       |\n|    inverse     | Specifying this will show the element instead of hiding, in specified breakpoints | boolean   | true       |\n|   startDivID   | ID of the div to start hiding from                                                | string    | true       |\n|    endDivID    | ID of the div to stop hiding at                                                   | string    | true       |\n| startDivOffset | To set an offset on the start position(in pixels) -- usable only with div prop    | number    | true       |\n|  endDivOffset  | To set an offset on the end position(in pixels) -- usable only with div prop      | number    | true       |\n|  startHeight   | Height from where hiding must begin (in pixels)                                   | number    | true       |\n|   endHeight    | Height where hiding must end (in pixels)                                          | number    | true       |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eHideOn\u003c/summary\u003e\n\nTo hide/show an element when reached a div or a specified height(px)\n\n|     Props      | Description                                                                       | Type      | isOptional |\n| :------------: | --------------------------------------------------------------------------------- | --------- | ---------- |\n|    children    | The required react element that needs to be hidden                                | ReactNode | false      |\n|     atDiv      | To start hiding at a div                                                          | boolean   | true       |\n|    atHeight    | To start hiding at a height                                                       | boolean   | true       |\n|    inverse     | Specifying this will show the element instead of hiding, in specified breakpoints | boolean   | true       |\n|     divID      | ID of the div to start hiding from                                                | string    | true       |\n|     offset     | To set an offset on the hiding position(in pixels) -- usable only with div prop   | number    | true       |\n|     height     | Height from where hiding must begin (in pixels)                                   | number    | true       |\n| showOnPageInit | To specify whether the element must be visible when the component first loads     | boolean   | true       |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eHideDuring\u003c/summary\u003e\n\nTo hide/show an element during a scroll. (scroll to make element hidden/shown)\n\n|  Props   | Description                                           | Type      | isOptional |\n| :------: | ----------------------------------------------------- | --------- | ---------- |\n| children | The required react element that needs to be hidden    | ReactNode | false      |\n| inverse  | Shows an element while scrolling instead of hiding it | Boolean   | true       |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eHide\u003c/summary\u003e\n\nTo hide an element on scrolling up or down.\n\n|     Props      | Description                                                                             | Type           | isOptional |\n| :------------: | --------------------------------------------------------------------------------------- | -------------- | ---------- |\n|    children    | The required react element that needs to be hidden                                      | ReactNode      | false      |\n|    variant     | To specify whether the element must be hidden on scrolling up or down (down by default) | \"up\" or \"down\" | true       |\n| showOnPageInit | To specify whether the element must be visible when the component first loads           | boolean        | true       |\n\n\u003c/details\u003e\n\n## Built using\n\n- Typescript\n- React\n- create-react-library\n\n## License\n\n[MIT](LICENSE) © [Pradeep-selva](https://github.com/Pradeep-selva)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpradeep-selva%2Freact-hide-on-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpradeep-selva%2Freact-hide-on-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpradeep-selva%2Freact-hide-on-scroll/lists"}