{"id":15007925,"url":"https://github.com/gm0t/react-sticky-el","last_synced_at":"2025-05-16T04:03:43.307Z","repository":{"id":38151638,"uuid":"77528208","full_name":"gm0t/react-sticky-el","owner":"gm0t","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-15T18:04:26.000Z","size":9190,"stargazers_count":264,"open_issues_count":29,"forks_count":47,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-05T19:07:30.343Z","etag":null,"topics":["npm-package","react","react-component","reactjs"],"latest_commit_sha":null,"homepage":null,"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/gm0t.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,"publiccode":null,"codemeta":null}},"created_at":"2016-12-28T11:32:51.000Z","updated_at":"2025-04-23T16:57:00.000Z","dependencies_parsed_at":"2024-06-18T12:39:31.281Z","dependency_job_id":"26c5664f-686d-4408-94f4-19ad344ba3f8","html_url":"https://github.com/gm0t/react-sticky-el","commit_stats":{"total_commits":81,"total_committers":17,"mean_commits":4.764705882352941,"dds":0.6666666666666667,"last_synced_commit":"426963a7562abea34ed05222fe5cb8773f5eef39"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gm0t%2Freact-sticky-el","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gm0t%2Freact-sticky-el/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gm0t%2Freact-sticky-el/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gm0t%2Freact-sticky-el/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gm0t","download_url":"https://codeload.github.com/gm0t/react-sticky-el/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464891,"owners_count":22075570,"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":["npm-package","react","react-component","reactjs"],"created_at":"2024-09-24T19:14:29.481Z","updated_at":"2025-05-16T04:03:43.285Z","avatar_url":"https://github.com/gm0t.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"react-sticky-el\n============\nSticky library for React.\n\n#### Demos\n  - [Basic](http://rawgit.com/gm0t/react-sticky-el/master/storybook-static/index.html)\n\n## Installation\n```sh\nnpm install react-sticky-el\n```\n\n## Overview \u0026 Basic Example\n\nThe elements you actually want to \"stick\" should be wrapped in the `\u003cSticky /\u003e` tag. The full list of props are available below, but typical usage will look something like so:\n\napp.jsx\n```js\nimport React, {Component} from 'react';\nimport Sticky from 'react-sticky-el';\n...\n\nclass App extends Component ({\n  render() {\n    return (\n      ...\n        \u003cSticky\u003e\n          \u003cheader\u003e\n            ...\n          \u003c/header\u003e\n        \u003c/Sticky\u003e\n      ...\n    );\n  },\n});\n\n```\n\nThis will be rendered as:\n\n```html\n    \u003cdiv\u003e \u003c!-- holder element --\u003e\n        \u003cdiv\u003e \u003c!-- wrapper element --\u003e\n            \u003cheader\u003e\n                ...\n            \u003c/header\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n```\n\n'Sticky' will be - `wrapper element`, `holder element` is used to reserve space in DOM when `holder element` has 'fixed' position.\n\nWhen the \"stickiness\" becomes activated, the following inline style rules are applied to the Sticky element:\n\n```css\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: \u003cwidth that was before 'stickiness'\u003e\n```\n\nNote that the calculation of the Sticky element's height does not currently take margins into account. If you have margins on this element it may result in unexpected behavior.\n\n### `\u003cSticky /\u003e` Props\n\n#### mode _(default: 'top')_\n\n'top' or 'bottom' - to which side element should stick\n\n#### disabled _(default: false)_\n\nAllows you to disable sticking by setting this prop to `true`\n\n#### onFixedToggle _(default: null)_\n\nThis handler will be called right before changing `fixed` state.\n\n#### boundaryElement _(default: null)_\n\nSelector to define a `boundaryElement`.  \nIt should be one of the parents of the current element.\n\nLook at these examples \n- [With Boundary Element](https://rawgit.com/gm0t/react-sticky-el/master/storybook-static/index.html?path=/story/hideonboundaryhit--hide-on-boundary-hit-1) \n- [No Boundary Element](https://rawgit.com/gm0t/react-sticky-el/master/storybook-static/index.html?path=/story/boundaryelement--no-boundary-header).\n\n#### scrollElement _(default: window)_\n\nSelector to define a `scrollElement`. All position checks will be performed according to this element, also it will be listened for 'scroll' event.\n\nIt should be one of the parents of the current element.\nPossible selectors: 'body', 'window', '#{id}', anything suitable for [Element.matches](https://developer.mozilla.org/ru/docs/Web/API/Element/matches).\n\nLook at the [Demos](https://rawgit.com/gm0t/react-sticky-el/master/storybook-static/index.html) for an example\n\napp.jsx\n```js\nimport React, {Component} from 'react';\nimport Sticky from 'react-sticky-el';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003e....\u003c/p\u003e  \n        \u003cdiv className=\"scrollarea\" style={{height: '200px', overflow: 'scroll'}}\u003e\n          \u003cSticky scrollElement=\".scrollarea\"\u003e\n            \u003ch1\u003eScroll pane\u003c/h1\u003e\n          \u003c/Sticky\u003e\n        \u003c/div\u003e\n        \u003cp\u003e....\u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n```\n\n#### positionRecheckInterval _(default: 0)_\n\nIf your DOM structure is mutating (you are adding/removing elements), it will be usefull to provide `positionRecheckInterval` greater than zero, in this case position check will be also performed using setInterval in addition to scroll events.\n\n#### stickyStyle _(default: {})_\nIn the event that you wish to override the style rules applied, simply pass in the style object as a prop:\n\napp.jsx\n```js\n  \u003cSticky stickyStyle={customStyleObject}\u003e\n    \u003cheader /\u003e\n  \u003c/Sticky\u003e\n```\n\nNote: You likely want to avoid messing with the following attributes in your stickyStyle: `left`, `top`, and `width`.\n\n#### stickyClassName _(default: 'sticky')_\nYou can also specify a class name to be applied when the element becomes sticky:\n\napp.jsx\n```js\n\n  \u003cSticky stickyClassName={customClassName}\u003e\n    \u003cheader /\u003e\n  \u003c/Sticky\u003e\n\n```\n\n#### topOffset _(default: 0)_\nSticky state will be triggered when the top of the element is `topOffset` pixels from the top of the `scrollElement`. Positive numbers give the impression of a lazy sticky state, whereas negative numbers are more eager in their attachment\n\napp.jsx\n```js\n\n  \u003cSticky topOffset={80}\u003e\n    \u003cSomeChild /\u003e\n  \u003c/Sticky\u003e\n\n```\n\nLook at the [Basic Demo](https://rawgit.com/gm0t/react-sticky-el/master/storybook-static/index.html?path=/story/offsets--top-offset) for an example\n\n#### bottomOffset _(default: 0)_\nSticky state will be triggered when the bottom of the element is `bottomOffset` pixels from the bottom of the `scrollElement`.\n\napp.jsx\n```js\n\n  \u003cSticky bottomOffset={80}\u003e\n    \u003cSomeChild /\u003e\n  \u003c/Sticky\u003e\n\n```\n\nLook at the [Basic Demo](https://rawgit.com/gm0t/react-sticky-el/master/storybook-static/index.html?path=/story/offsets--bottom-offset) for an example\n\n#### hideOnBoundaryHit _(default: true)_\nIf `false` then the sticky element won't disappear on reaching it's boundaries. A configuration like this is implemented below.\n\u003cbr /\u003e\n```js\n  import Sticky from 'react-sticky-el';\n  \n  \u003cdiv className=\"block\"\u003e\n\n    \u003cSticky boundaryElement=\".block\" hideOnBoundaryHit={false}\u003e\n      \u003cSomeChild /\u003e\n    \u003c/Sticky\u003e\n  \u003c/div\u003e\n```\nLook at the [Basic Demo](https://rawgit.com/gm0t/react-sticky-el/master/storybook-static/index.html) for an example.\n\nNote: If the `scrollareaElement` is not at the top of the viewport, when the sticky element overflows it, it will stay visible. This can not be fixed with `overflow: hidden` because the sticky element has `position: fixed` and it's relative to the viewport. A solution is to use `clip-path: inset(0 0 0 0);` on the `scrollareaElement`. **This may have unforeseen consequences with other styles in your app - use caution**. You can see this happening in [this example](https://rawgit.com/gm0t/react-sticky-el/master/storybook-static/index.html?path=/story/hideonboundaryhit--hide-on-boundary-hit-4)\n\n#### dontUpdateHolderHeightWhenSticky _(default: false)_\n\nControls whenever the `min-height` for holder element should be updated when element becomes sticky or not. You can set it to `true` if the height of your sticky element changes when it becomes sticky (e.g. only some part of the header is visible when it's sticky) and you want to avoid your content jumping up.\n\nLook at the [Demo](https://rawgit.com/gm0t/react-sticky-el/master/storybook-static/index.html?path=/story/advanced--dont-update-holder-height-when-sticky) for an example.\n\n\n#### Other props\nAll other props (such as className, style, etc..) will be applied to the `holder` element.\n\n\n## Advanced usage\n\nIf you want to use some custom components and have more control, then you can use `RenderPropSticky`:\n\n```js\nimport { RenderPropSticky } from 'react-sticky-el';\n\nfunction StickyHeader() {\n  return (\n    \u003cRenderPropSticky\n        mode={mode}\n        onFixedToggle={onFixedToggle}\n        hideOnBoundaryHit={hideOnBoundaryHit}\n        offsetTransforms={offsetTransforms}\n        disabled={disabled}\n        boundaryElement={boundaryElement}\n        scrollElement={scrollElement}\n        bottomOffset={bottomOffset}\n        topOffset={topOffset}\n        positionRecheckInterval={positionRecheckInterval}\n      \u003e\n        {({ isFixed, wrapperStyles, wrapperRef, holderStyles, holderRef }) =\u003e (\n          \u003cdiv {...rest} ref={holderRef} style={holderStyles}\u003e\n            \u003cdiv\n              {...rest}\n              className={`${wrapperClassName} ${isFixed ? stickyClassName : ''}`}\n              style={\n                isFixed ? { ...wrapperStyles, ...stickyStyles } : wrapperStyles\n              }\n              ref={wrapperRef}\n            \u003e\n              \u003ch1\u003eI'm sticky!\u003c/h1\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/RenderPropSticky\u003e  \n  )\n}\n\n```\n\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgm0t%2Freact-sticky-el","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgm0t%2Freact-sticky-el","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgm0t%2Freact-sticky-el/lists"}