{"id":11871,"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.","status":"active","version":"6.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/captivationsoftware/react-sticky","tags":["javascript","react-component","React","Sticky"],"install":[{"cmd":"npm install react-sticky","lang":"bash","label":"npm"},{"cmd":"yarn add react-sticky","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-sticky","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component functionality.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Container component for sticky elements. Use ES Module syntax for modern React projects.","wrong":"const { StickyContainer } = require('react-sticky')","symbol":"StickyContainer","correct":"import { StickyContainer } from 'react-sticky'"},{"note":"The component that becomes sticky. Its child must be a render prop function.","wrong":"const { Sticky } = require('react-sticky')","symbol":"Sticky","correct":"import { Sticky } from 'react-sticky'"},{"note":"The `Sticky` component's child must be a function (render prop) that receives properties like `style` and `isSticky` to control the rendered element.","wrong":"
}"}],"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
\n Scrollable content item {i + 1}\n
\n ));\n\n return (\n
{/* Ensure enough height for scrolling */}\n \n
\n
Above Sticky Section
\n
This content is before the sticky element.
\n
\n\n \n {({ style, isSticky }) => (\n \n {isSticky ? 'I am Sticky!' : 'Scroll down to make me sticky!'}\n \n )}\n \n\n
\n
Below Sticky Section
\n
This content is below the sticky element and will scroll underneath it.
\n {content}\n
\n \n
\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."},"warnings":[{"fix":"Upgrade React to version 15.3 or higher, or downgrade `react-sticky` to a 5.x version.","message":"`react-sticky` version 6.x dropped support for React versions older than 15.3. If you are using an earlier React version, you must use the 5.x series.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Ensure the child of `` is a function, e.g., `{({ style }) =>
...
}`.","message":"The `Sticky` component requires a function as its direct child (a render prop). Providing a plain React element will result in an error or incorrect behavior.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"Check `caniuse.com/#feat=css-sticky` for browser support. If feasible, consider using `position: sticky; top: 0;` directly in CSS.","message":"CSS `position: sticky` is often a simpler and more performant solution if browser support (especially IE11) and specific layout requirements allow it. Evaluate CSS alternatives before opting for a JavaScript solution.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Carefully inspect parent and sibling element styles. Ensure `StickyContainer` has a defined height/width and its ancestors do not clip or reposition its children in unexpected ways. Avoid applying conflicting `position` or `overflow` properties.","message":"Certain CSS styles (e.g., `overflow: hidden`, `position: absolute`, `transform`) on parent elements or between `StickyContainer` and `Sticky` can interfere with the positioning logic and prevent sticky behavior.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap your content inside `Sticky` with a function, e.g., `{({ style }) =>
Your Content
}`.","cause":"The `Sticky` component received a plain React element as a child instead of a render prop function.","error":"Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead."},{"fix":"Ensure `` is a descendant of ``. Verify there's sufficient scrollable content to make the element sticky. Inspect parent/sibling CSS for properties like `overflow: hidden` or `position: absolute` that might disrupt positioning context.","cause":"This usually happens if the `Sticky` component is not nested within a `StickyContainer`, or if the `StickyContainer` itself does not have enough scrollable content to trigger the sticky behavior, or if conflicting CSS styles are applied.","error":"The sticky element is not sticking, even when scrolling."},{"fix":"Ensure the render prop function explicitly destructures `style` from its argument, e.g., `({ style, isSticky }) => ...`.","cause":"The render prop function for `Sticky` is not correctly destructuring the properties, leading to `style` being undefined when accessed.","error":"TypeError: Cannot read properties of undefined (reading 'style')"}],"ecosystem":"npm"}