{"library":"react-stick","title":"React Sticky Portal","description":"react-stick is a React component library designed to facilitate the 'sticking' of an absolutely positioned React node (often a tooltip, dropdown, or modal) to a dynamically positioned anchor element. It achieves this by rendering the 'stuck' node in a React Portal, typically as a direct child of the `body` element, ensuring it's not affected by the anchor's parent overflow or styling. The current stable version is `5.0.7`, with releases appearing to be semantically versioned and somewhat regular, addressing bug fixes and minor enhancements. A key differentiator is its focus on robust positioning logic, including automatic flipping based on available viewport space, and its recent migration to TypeScript for improved developer experience and type safety. It requires React and ReactDOM `>=16.8.0`.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-stick"],"cli":null},"imports":["import Stick from 'react-stick';","import type { StickProps } from 'react-stick';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import Stick from 'react-stick';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst App = () => (\n  <div style={{ padding: '100px', height: '200vh' }}>\n    <h1>Scroll down to see the sticky node</h1>\n    <div style={{ height: '500px' }}></div>\n    <Stick \n      node={<p style={{ border: '1px solid red', padding: '10px', background: 'white' }}>I am the stick node, aligned bottom-left to my anchor's top-right!</p>}\n      position=\"bottom left\"\n      align=\"top right\"\n    >\n      <p style={{ border: '1px solid blue', padding: '10px', display: 'inline-block' }}>I am the anchor node.</p>\n    </Stick>\n    <div style={{ height: '500px' }}></div>\n  </div>\n);\n\nconst root = ReactDOM.createRoot(document.getElementById('root') || document.createElement('div'));\nroot.render(<App />);","lang":"typescript","description":"This example demonstrates how to use the `Stick` component to attach a 'stick node' (a red-bordered paragraph) to an 'anchor node' (a blue-bordered paragraph), positioning it based on specified `position` and `align` props. The stick node will follow the anchor node even on scroll, appearing outside its parent flow.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}