{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-stickynode"],"cli":null},"imports":["import Sticky from 'react-stickynode';","import type { StickyProps } from 'react-stickynode';","import Sticky from 'react-stickynode';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport Sticky from 'react-stickynode';\n\nconst App = () => {\n  return (\n    <div>\n      <div style={{ height: '300px', background: '#eee', padding: '20px' }}>\n        Header Content (non-sticky)\n      </div>\n      <Sticky enabled={true} top={50} bottomBoundary={1200} innerZ={10}>\n        <div style={{ background: '#aaf', padding: '20px', border: '1px solid blue' }}>\n          <h2>This is a sticky component!</h2>\n          <p>It will stick to the top when you scroll down, 50px from the viewport top.</p>\n          <p>It will stop sticking when the bottom boundary (1200px from document top) is reached.</p>\n          <p>Scroll down to see it in action.</p>\n        </div>\n      </Sticky>\n      <div style={{ height: '1500px', background: '#fdd', padding: '20px' }}>\n        Main content area. Scroll here to test the sticky behavior.\n        <p>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.</p>\n        {Array.from({ length: 20 }).map((_, i) => (\n          <p key={i}>More content line {i + 1}.</p>\n        ))}\n      </div>\n      <div style={{ height: '200px', background: '#ccc', padding: '20px' }}>\n        Footer Content\n      </div>\n    </div>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}