{"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,"search_vec":"'15.3':93 '6.0.3':54 'align':108 'allow':131 'altern':127 'api':73 'applic':19 'approach':124,144 'base':136 'behavior':84,166 'beyond':169 'browser':39 'cadenc':100 'chang':113 'combin':68 'complex':46 'compon':3,65,177 'control':25,80,164 'css':31,126,152,172 'current':51 'custom':132 'design':11 'develop':76 'differenti':116 'dom':91 'driven':123 'dynam':161 'e.g':47 'ecosystem':112 'element':16,49,139 'environ':149 'explicit':98 'fall':34 'fallback':147 'featur':153 'fine':78 'fine-grain':77 'flexibl':120 'fulli':156 'grain':79 'higher':63,95 'higher-ord':62 'histor':107 'hoc':66 'ie11':42 'implement':13 'javascript':9,122,163,174 'javascript-control':162 'javascript-driven':121 'key':115 'layout':45 'librari':10 'like':41 'logic':133 'major':103 'modern':151 'nativ':30 'offer':75,173 'older':38 'order':64 'particular':36 'pattern':67 'posit':32 'programmat':24 'prop':72 'provid':21,118,145 'pure':171 'react':1,5,18,87,90,111,176,178 'react-compon':175 'react-dom':89 'react-sticki':4 'redesign':58 'regard':37 'releas':99 'render':71,135 'requir':86,168 'robust':23 'scenario':28 'short':35 'signific':57,110 'solut':26 'specif':44 'stabl':52 'state':102,142 'sticki':2,6,14,33,83,141,165,179 'support':40,157 'tabl':48 'transit':59 'ui':15 'updat':105 'version':53,92,104 'viabl':130 'within':17","created_at":"2026-04-19T13:40:14.253959+00:00","updated_at":"2026-04-19T13:40:14.253959+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/captivationsoftware/react-sticky","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-sticky","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}