{"id":11872,"library":"react-stickynode","title":"React Sticky Node Component","description":"react-stickynode is a performant and comprehensive React component for creating sticky elements on a webpage. Currently at version 5.0.2, it is actively maintained with regular dependency updates and support for new React versions, as evidenced by recent v5.x releases. This library differentiates itself by effectively handling not only standard sticky scenarios where the target is shorter than the viewport but also complex cases where the sticky content is taller. For tall sticky targets, it implements a natural scrolling behavior where the element scrolls until its bottom aligns with the viewport bottom (when scrolling down) or its top aligns with the viewport top (when scrolling up), maximizing content visibility. It also supports elements with percentage-based width units, making it suitable for responsive designs. Performance is prioritized through single `scrollTop` retrieval, throttled scroll listening, and rAF for status updates.","status":"active","version":"5.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/yahoo/react-stickynode","tags":["javascript","Sticky","React"],"install":[{"cmd":"npm install react-stickynode","lang":"bash","label":"npm"},{"cmd":"yarn add react-stickynode","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-stickynode","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core peer dependency for any React component.","package":"react","optional":false},{"reason":"Required for rendering React components into the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Since v4.0.0, the package primarily publishes ES modules. CommonJS `require` may lead to issues or require specific bundler configurations. Always prefer ESM imports.","wrong":"const Sticky = require('react-stickynode');","symbol":"Sticky","correct":"import Sticky from 'react-stickynode';"},{"note":"For TypeScript projects, import types separately using `import type` for better tree-shaking and type safety. While `import { StickyProps } from 'react-stickynode';` might work, `import type` is the preferred modern approach.","wrong":"import { StickyProps } from 'react-stickynode';","symbol":"StickyProps","correct":"import type { StickyProps } from 'react-stickynode';"},{"note":"The primary component is exported as a default export. Using `import * as` for a default export can sometimes lead to unexpected object structures or increased bundle size.","wrong":"import * as Sticky from 'react-stickynode';","symbol":"Default Export (Component)","correct":"import Sticky from 'react-stickynode';"}],"quickstart":{"code":"import React from 'react';\nimport Sticky from 'react-stickynode';\n\nconst App = () => {\n return (\n
\n
\n Header Content (non-sticky)\n
\n \n
\n

This is a sticky component!

\n

It will stick to the top when you scroll down, 50px from the viewport top.

\n

It will stop sticking when the bottom boundary (1200px from document top) is reached.

\n

Scroll down to see it in action.

\n
\n \n
\n Main content area. Scroll here to test the sticky behavior.\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

\n {Array.from({ length: 20 }).map((_, i) => (\n

More content line {i + 1}.

\n ))}\n
\n
\n Footer Content\n
\n
\n );\n};\n\nexport default App;","lang":"typescript","description":"Demonstrates basic usage of `react-stickynode` with `enabled`, `top`, `bottomBoundary`, and `innerZ` props, showing how a component can stick within a specific scroll range and handle substantial content below."},"warnings":[{"fix":"Transition to `import Sticky from 'react-stickynode';` for ES module environments. Ensure your build system (e.g., Webpack, Rollup) is configured to correctly handle ES modules.","message":"Starting from v4.0.0, `react-stickynode` publishes ES modules. Projects using CommonJS `require()` syntax might encounter issues or require specific bundler configurations to resolve the package correctly.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"It is strongly recommended to upgrade to the latest stable version (5.x.x) for full and tested compatibility with React 18 and newer versions like React 19.","message":"Version 4.1.0 added initial React 18 support but was released with a known, unaddressed failing test case, indicating potential edge-case issues. While it unblocked users, full stability for React 18 was not fully guaranteed at that specific release point.","severity":"gotcha","affected_versions":"4.1.0"},{"fix":"Verify browser compatibility in your target environments. If support for older browsers is critical, consider sticking to an older major version (pre-5.0.0) or implementing necessary polyfills.","message":"Version 5.0.0 updated the browserlist to target modern browsers. This change may lead to unexpected behavior or lack of support for very old or niche browser environments that were previously covered.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Ensure that the children components passed to `Sticky` conform to standard React children patterns and types. Pay attention to console warnings related to PropType violations and adjust your component structure accordingly.","message":"Version 5.0.2 included a fix for the `children` PropType. While not a breaking change, developers previously relying on specific or potentially incorrect PropType behavior might observe stricter validation or changes in how children are handled.","severity":"gotcha","affected_versions":">=5.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement to `import Sticky from 'react-stickynode';`. Ensure your bundler is configured to correctly handle ES module imports.","cause":"Attempting to use `require()` for `react-stickynode` in an ES module environment or an incorrect default import method.","error":"TypeError: Sticky is not a constructor"},{"fix":"Review the children elements passed into `...`. Ensure they are valid React nodes (e.g., single element, array of elements, string). Check your console for more specific PropType validation messages to pinpoint the exact issue.","cause":"The `children` prop provided to the `Sticky` component does not conform to React's expected children types or the component's internal PropTypes.","error":"Warning: Failed prop type: Invalid prop `children` supplied to `Sticky`"},{"fix":"First, confirm that any string selectors for `top` or `bottomBoundary` (e.g., `'#header'`) correctly identify elements in your DOM. Try using numerical values for `top` and `bottomBoundary` to rule out selector issues. Inspect element styles for conflicting `position: fixed`, `position: sticky`, or `z-index` properties. Ensure no parent elements have `overflow: hidden` which might clip sticky behavior.","cause":"Common causes include incorrect `top` or `bottomBoundary` values (especially when using string selectors that don't match existing DOM elements), conflicting CSS `position` or `z-index` rules, or issues with parent container overflow properties.","error":"Sticky element unexpectedly jumps, flickers, or does not stick at all."}],"ecosystem":"npm"}