{"id":11870,"library":"react-sticky-el","title":"React Sticky Element","description":"react-sticky-el is a React component library designed to make elements stick to the viewport or a specified scrollable container as the user scrolls. It provides a straightforward `<Sticky />` component that can make any child element fixed to the top or bottom. The current stable version is 2.1.1, released in late 2021, and the project is generally considered to be in maintenance mode with infrequent updates. Key differentiators include its relative simplicity, support for custom scroll elements via the `scrollElement` prop, the ability to define a `boundaryElement` to limit stickiness, and flexible configuration for position re-checks. It ships with TypeScript type definitions, providing a typed developer experience.","status":"maintenance","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/gm0t/react-sticky-el","tags":["javascript","react","reactjs","sticky","fixed","react-sticky","typescript"],"install":[{"cmd":"npm install react-sticky-el","lang":"bash","label":"npm"},{"cmd":"yarn add react-sticky-el","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-sticky-el","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for React component functionality.","package":"react","optional":false},{"reason":"Runtime dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary `Sticky` component is exported as a default export.","wrong":"import { Sticky } from 'react-sticky-el';","symbol":"Sticky","correct":"import Sticky from 'react-sticky-el';"},{"note":"Import the component's prop types using `import type` for TypeScript. The exact prop interface name may vary, but `StickyProps` is a common convention.","symbol":"StickyProps","correct":"import type { StickyProps } from 'react-sticky-el';"},{"note":"For CommonJS environments, access the default export using the `.default` property on the module object.","wrong":"const Sticky = require('react-sticky-el');","symbol":"Sticky (CommonJS)","correct":"const Sticky = require('react-sticky-el').default;"}],"quickstart":{"code":"import React, { Component } from 'react';\nimport Sticky from 'react-sticky-el';\n\ninterface AppProps {}\ninterface AppState {}\n\nclass App extends Component<AppProps, AppState> {\n  render() {\n    return (\n      <div style={{ height: '200vh', paddingBottom: '50px' }}>\n        <p>Scroll down to see the header stick. This is some introductory content to create scroll space.</p>\n        <div style={{ height: '500px', background: '#f0f0f0', marginBottom: '20px', padding: '20px' }}>\n          Content before the sticky element. This area ensures that there's enough room to scroll before the header needs to become sticky.\n        </div>\n        <Sticky>\n          <header style={{ background: '#333', color: 'white', padding: '15px 20px', textAlign: 'center', boxShadow: '0 2px 5px rgba(0,0,0,0.2)' }}>\n            <h2>This header will stick to the top!</h2>\n          </header>\n        </Sticky>\n        <div style={{ height: '800px', background: '#e0e0e0', marginTop: '20px', padding: '20px' }}>\n          Content after the sticky element. Continue scrolling to observe the sticky behavior in action.\n          The `react-sticky-el` component gracefully handles making the header fixed to the viewport\n          while reserving its original space in the document flow, preventing layout shifts. You can try changing the boundary element or scroll element properties for more complex scenarios.\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default App;","lang":"typescript","description":"Demonstrates basic usage of the `Sticky` component, showing how a header element becomes fixed to the top of the viewport when scrolling, while preserving its space in the document flow."},"warnings":[{"fix":"Instead of using `margin-top` or `margin-bottom` on the element wrapped by `<Sticky />`, use `padding` or wrap the content in an additional `div` and apply margins to that wrapper.","message":"The component's internal height calculation does not account for `margin` styles applied directly to the sticky element's child, which can lead to unexpected positioning or overlap when the element becomes sticky.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"For custom styling, use `stickyClassName` to apply CSS rules via a class, or use other CSS properties in `stickyStyle` while allowing the component to control `left`, `top`, and `width`.","message":"Avoid overriding `left`, `top`, and `width` properties within the `stickyStyle` prop. These CSS properties are dynamically managed by `react-sticky-el` for correct positioning and width adjustment.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Set the `positionRecheckInterval` prop to a value greater than zero (e.g., `positionRecheckInterval={100}`) to enable periodic position re-checks alongside scroll events, ensuring responsiveness to DOM mutations.","message":"If your DOM structure is dynamic (e.g., elements are added or removed above the sticky component), `react-sticky-el` may not automatically re-evaluate its position, leading to incorrect stickiness. Scroll events alone might not be sufficient.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Thoroughly test `react-sticky-el` with newer React versions. If issues arise, consider alternative sticky solutions or be prepared to address deprecation warnings.","message":"While the peer dependencies specify `React >=16.3.0`, the project's maintenance status and older internal implementations (e.g., reliance on certain lifecycle methods) might lead to compatibility issues or warnings with React 18+.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `const Sticky = require('react-sticky-el');` to `const Sticky = require('react-sticky-el').default;`.","cause":"Attempting to import the `Sticky` component in a CommonJS environment using `require('react-sticky-el')` without explicitly accessing the default export.","error":"TypeError: Cannot read properties of undefined (reading 'default')"},{"fix":"For SSR applications, ensure that the initial state of the `Sticky` component's class or style is consistent between server and client, or conditionally render the sticky behavior only on the client side after initial hydration.","cause":"This hydration mismatch warning can occur in Server-Side Rendering (SSR) environments when the `stickyClassName` or `stickyStyle` are applied dynamically on the client, differing from the server-rendered output.","error":"Warning: Prop `className` did not match. Server: \"sticky\" Client: \"\""}],"ecosystem":"npm"}