react-sticky

library6.0.3jsnpmunverified

`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.

web-framework

npm install react-sticky

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-STICKY

react-sticky

web-frameworkjavascriptv6.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

StickyContainer

✓ import { StickyContainer } from 'react-sticky'

✗ const { StickyContainer } = require('react-sticky')

Container component for sticky elements. Use ES Module syntax for modern React projects.

Sticky

✓ import { Sticky } from 'react-sticky'

✗ const { Sticky } = require('react-sticky')

The component that becomes sticky. Its child must be a render prop function.

{ style, isSticky } (render prop arguments)

✓ <Sticky>{({ style, isSticky }) => <div style={style}>...</div>}</Sticky>

✗ <Sticky><div>...</div></Sticky>

The `Sticky` component's child must be a function (render prop) that receives properties like `style` and `isSticky` to control the rendered element.

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.

import React from 'react'; import { StickyContainer, Sticky } from 'react-sticky'; class App extends React.Component { render() { // Mimic some scrollable content to demonstrate stickiness const content = Array.from({ length: 50 }, (_, i) => ( <p key={i} style={{ padding: '10px 0', borderBottom: '1px solid #eee' }}> Scrollable content item {i + 1} </p> )); return ( <div style={{ height: '1500px' }}> {/* Ensure enough height for scrolling */} <StickyContainer> <div style={{ padding: '20px', background: '#f0f0f0' }}> <h2>Above Sticky Section</h2> <p>This content is before the sticky element.</p> </div> <Sticky> {({ style, isSticky }) => ( <header style={{ ...style, background: isSticky ? 'lightblue' : 'lightgray', padding: '10px', textAlign: 'center', fontWeight: 'bold', boxShadow: isSticky ? '0 2px 5px rgba(0,0,0,0.2)' : 'none' }} > {isSticky ? 'I am Sticky!' : 'Scroll down to make me sticky!'} </header> )} </Sticky> <div style={{ padding: '20px' }}> <h3>Below Sticky Section</h3> <p>This content is below the sticky element and will scroll underneath it.</p> {content} </div> </StickyContainer> </div> ); } } export default App;

Debug

Known issues

breaking`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.

fix

Upgrade React to version 15.3 or higher, or downgrade `react-sticky` to a 5.x version.

affects: >=6.0.0

gotchaThe `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.

fix

Ensure the child of `<Sticky>` is a function, e.g., `<Sticky>{({ style }) => <div style={style}>...</div>}</Sticky>`.

affects: >=6.0.0

gotchaCSS `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.

fix

Check `caniuse.com/#feat=css-sticky` for browser support. If feasible, consider using `position: sticky; top: 0;` directly in CSS.

affects: >=1.0.0

gotchaCertain 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

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.

The `Sticky` component received a plain React element as a child instead of a render prop function.

fix

Wrap your content inside `Sticky` with a function, e.g., `<Sticky>{({ style }) => <div style={style}>Your Content</div>}</Sticky>`.

The sticky element is not sticking, even when scrolling.

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.

fix

Ensure `<Sticky>` is a descendant of `<StickyContainer>`. 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.

TypeError: Cannot read properties of undefined (reading 'style')

The render prop function for `Sticky` is not correctly destructuring the properties, leading to `style` being undefined when accessed.

fix

Ensure the render prop function explicitly destructures `style` from its argument, e.g., `({ style, isSticky }) => ...`.

Upgrade

Version history

6.0.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React component functionality.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/captivationsoftware/react-sticky ↗

packagehttps://www.npmjs.com/package/react-sticky ↗