{"library":"react-sticky","title":"React Sticky Component","description":"`react-sticky` is a JavaScript library designed to implement sticky UI elements within React applications. It provides a robust, programmatically controlled solution for scenarios where native CSS `position: sticky` falls short, particularly regarding older browser support (like IE11) or specific layout complexities (e.g., table elements). The current stable version, 6.0.3, was a significant redesign, transitioning to a higher-order component (HOC) pattern combined with a render prop API, which offers developers fine-grained control over the sticky behavior. It requires `react` and `react-dom` versions 15.3 or higher. While no explicit release cadence is stated, major version updates have historically aligned with significant React ecosystem changes. Its key differentiator is providing a flexible, JavaScript-driven approach when CSS alternatives are not viable, allowing custom logic and rendering based on the element's sticky state. This approach provides a fallback for environments where modern CSS features are not fully supported or when more dynamic, JavaScript-controlled sticky behavior is required beyond what pure CSS offers.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-sticky"],"cli":null},"imports":["import { StickyContainer } from 'react-sticky'","import { Sticky } from 'react-sticky'","<Sticky>{({ style, isSticky }) => <div style={style}>...</div>}</Sticky>"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { StickyContainer, Sticky } from 'react-sticky';\n\nclass App extends React.Component {\n  render() {\n    // Mimic some scrollable content to demonstrate stickiness\n    const content = Array.from({ length: 50 }, (_, i) => (\n      <p key={i} style={{ padding: '10px 0', borderBottom: '1px solid #eee' }}>\n        Scrollable content item {i + 1}\n      </p>\n    ));\n\n    return (\n      <div style={{ height: '1500px' }}> {/* Ensure enough height for scrolling */}\n        <StickyContainer>\n          <div style={{ padding: '20px', background: '#f0f0f0' }}>\n            <h2>Above Sticky Section</h2>\n            <p>This content is before the sticky element.</p>\n          </div>\n\n          <Sticky>\n            {({ style, isSticky }) => (\n              <header\n                style={{\n                  ...style,\n                  background: isSticky ? 'lightblue' : 'lightgray',\n                  padding: '10px',\n                  textAlign: 'center',\n                  fontWeight: 'bold',\n                  boxShadow: isSticky ? '0 2px 5px rgba(0,0,0,0.2)' : 'none'\n                }}\n              >\n                {isSticky ? 'I am Sticky!' : 'Scroll down to make me sticky!'}\n              </header>\n            )}\n          </Sticky>\n\n          <div style={{ padding: '20px' }}>\n            <h3>Below Sticky Section</h3>\n            <p>This content is below the sticky element and will scroll underneath it.</p>\n            {content}\n          </div>\n        </StickyContainer>\n      </div>\n    );\n  }\n}\n\nexport default App;","lang":"javascript","description":"Demonstrates how to wrap content in `StickyContainer` and make an inner element sticky using a render prop, showing visual feedback when the element becomes sticky as the user scrolls.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}