{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-sticky-el"],"cli":null},"imports":["import Sticky from 'react-sticky-el';","import type { StickyProps } from 'react-sticky-el';","const Sticky = require('react-sticky-el').default;"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}