React Sticky Component

Common errors

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

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

  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.
  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')

  cause 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 }) => ...`.

Warnings

• 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.
• gotcha 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.
  Fix: Ensure the child of `<Sticky>` is a function, e.g., `<Sticky>{({ style }) => <div style={style}>...</div>}</Sticky>`.
• gotcha 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.
  Fix: Check `caniuse.com/#feat=css-sticky` for browser support. If feasible, consider using `position: sticky; top: 0;` directly in CSS.
• gotcha 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.
  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.

Install

• npm install react-sticky npm
• yarn add react-sticky yarn
• pnpm add react-sticky pnpm

Imports

• StickyContainer
  wrong:

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

  correct:

  import { StickyContainer } from 'react-sticky'

  Container component for sticky elements. Use ES Module syntax for modern React projects.
• Sticky
  wrong:

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

  correct:

  import { Sticky } from 'react-sticky'

  The component that becomes sticky. Its child must be a render prop function.
• { style, isSticky } (render prop arguments)
  wrong:

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

  correct:

  <Sticky>{({ style, isSticky }) => <div style={style}>...</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.

Quickstart

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;