{"id":13731926,"url":"https://github.com/codecks-io/react-sticky-box","last_synced_at":"2025-05-08T05:32:00.412Z","repository":{"id":33411721,"uuid":"37056954","full_name":"codecks-io/react-sticky-box","owner":"codecks-io","description":"Sticky boxes for contents of all sizes","archived":false,"fork":false,"pushed_at":"2024-01-20T04:49:05.000Z","size":1383,"stargazers_count":490,"open_issues_count":7,"forks_count":45,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-26T03:31:12.968Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-sticky-box.codecks.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codecks-io.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2015-06-08T09:09:56.000Z","updated_at":"2025-04-22T18:07:30.000Z","dependencies_parsed_at":"2024-04-20T04:33:34.926Z","dependency_job_id":"96247e9a-e44b-4eb7-a2af-65db5add442f","html_url":"https://github.com/codecks-io/react-sticky-box","commit_stats":{"total_commits":202,"total_committers":10,"mean_commits":20.2,"dds":0.09900990099009899,"last_synced_commit":"589f50b05a1a406d61f2ecbd2adf4fcc97f5b0b1"},"previous_names":["danielberndt/react-sticky-box"],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecks-io%2Freact-sticky-box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecks-io%2Freact-sticky-box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecks-io%2Freact-sticky-box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecks-io%2Freact-sticky-box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codecks-io","download_url":"https://codeload.github.com/codecks-io/react-sticky-box/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253008832,"owners_count":21839700,"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-08-03T02:01:41.650Z","updated_at":"2025-05-08T05:31:55.378Z","avatar_url":"https://github.com/codecks-io.png","language":"TypeScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![Version](https://badgen.net/npm/v/react-sticky-box)\n![Downloads/Week](https://badgen.net/npm/dw/react-sticky-box)\n![Minified Bundlesize](https://badgen.net/bundlephobia/min/react-sticky-box)\n![Minified Gzipped Bundlesize](https://badgen.net/bundlephobia/minzip/react-sticky-box)\n\n# React Sticky Box\n\nSticky Boxes with sensible behaviour if the content is bigger than the viewport.\n\n## Documentation \u0026 Demo\n\n**[react-sticky-box.codecks.io](https://react-sticky-box.codecks.io/)**\n\n## Quick Start\n\n### Use as a Component\n\n```jsx\nimport StickyBox from \"react-sticky-box\";\n\nconst Page = () =\u003e (\n  \u003cdiv className=\"row\"\u003e\n    \u003cStickyBox offsetTop={20} offsetBottom={20}\u003e\n      \u003cdiv\u003eSidebar\u003c/div\u003e\n    \u003c/StickyBox\u003e\n    \u003cdiv\u003eContent\u003c/div\u003e\n  \u003c/div\u003e\n);\n```\n\n### Or via the `useStickyBox` hook\n\n```jsx\nimport {useStickyBox} from \"react-sticky-box\";\n\nconst Page = () =\u003e {\n  const stickyRef = useStickyBox({offsetTop: 20, offsetBottom: 20})\n  \u003cdiv className=\"row\"\u003e\n    \u003caside ref={stickyRef}\u003e\n      \u003cdiv\u003eSidebar\u003c/div\u003e\n    \u003c/aside\u003e\n    \u003cdiv\u003eContent\u003c/div\u003e\n  \u003c/div\u003e\n};\n```\n---\n\n[Changelog](https://react-sticky-box.codecks.io/changelog)\n\n## Contribute\n\n- checkout the repo\n- `cd /path/to/repo/packages/docs`\n- `yarn install \u0026\u0026 yarn start`\n\nthis will allow you to modify the react-sticky-box sources in `packages/react-sticky-box/src` and check the effects in the docs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodecks-io%2Freact-sticky-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodecks-io%2Freact-sticky-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodecks-io%2Freact-sticky-box/lists"}