react-stick

library5.0.7jsnpmunverified

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

web-framework serialization

npm install react-stick

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-STICK

react-stick

web-frameworkjavascriptv5.0.7

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.

Stick

✓ import Stick from 'react-stick';

✗ const Stick = require('react-stick');

The primary component is a default export. While CommonJS might technically work via transpilation, ESM is the recommended and best-supported import method in modern React applications.

StickProps

✓ import type { StickProps } from 'react-stick';

For TypeScript users, import prop types directly from the package for type checking component usage. Types are available since v5.0.0.

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.

import Stick from 'react-stick'; import React from 'react'; import ReactDOM from 'react-dom/client'; const App = () => ( <div style={{ padding: '100px', height: '200vh' }}> <h1>Scroll down to see the sticky node</h1> <div style={{ height: '500px' }}></div> <Stick 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>} position="bottom left" align="top right" > <p style={{ border: '1px solid blue', padding: '10px', display: 'inline-block' }}>I am the anchor node.</p> </Stick> <div style={{ height: '500px' }}></div> </div> ); const root = ReactDOM.createRoot(document.getElementById('root') || document.createElement('div')); root.render(<App />);

Debug

Known issues

breakingVersion 5.0.0 introduced a significant breaking change by migrating the entire codebase to TypeScript. This means that FlowJS typing files are no longer supported and have been replaced with `.d.ts` files.

fix

If your project relies on FlowJS for type checking with `react-stick`, you will need to either migrate your project to TypeScript or downgrade to a version prior to 5.0.0. Ensure your build pipeline supports TypeScript for consuming the library.

affects: >=5.0.0

gotchaWhen using Server-Side Rendering (SSR), earlier versions of `react-stick` might not work correctly, leading to hydration mismatches or incorrect positioning on the initial render. This was specifically addressed in recent updates.

fix

Upgrade to `react-stick` version `5.0.6` or newer to ensure proper functionality with SSR. This version includes a fix for SSR compatibility.

affects: <5.0.6

gotchaFor optimal performance, especially in scenarios with many `Stick` instances or frequent re-renders, it's recommended to utilize the `enabled` flag on the `useWatcher` hook (internally used by `Stick`). Although not a direct prop on `Stick`, inefficient usage can lead to performance issues.

fix

Update to `react-stick` version `4.1.2` or higher, which includes performance improvements by adding an `enabled` flag to `useWatcher` to prevent unnecessary recalculations.

affects: <4.1.2

gotchaUpdates to `align` and `position` props might not have been correctly handled when auto-flipping was active in older versions, leading to stale positioning.

fix

Upgrade to `react-stick` version `4.1.4` or newer to ensure that changes to `align` and `position` props are correctly applied, even when auto-flipping logic is engaged.

affects: <4.1.4

gotchaThe initial rendering of the stick node might not always correctly check and apply alignment, potentially causing incorrect positioning on first load before any scrolling or updates.

fix

Update to `react-stick` version `4.1.3` or newer. This version includes a fix to check alignment on the first render, not just on scroll, ensuring correct initial positioning.

affects: <4.1.3

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'call') at Object../node_modules/react-stick/dist/index.js

This error often indicates an issue with CommonJS `require` syntax attempting to load an ESM-only package or an incorrect build configuration.

fix

Ensure you are using `import Stick from 'react-stick';` for ESM environments. If in a CommonJS context, verify your build tooling (e.g., Webpack, Babel) is correctly transpiling ESM imports. Consider updating your build setup to a more modern configuration that supports ESM.

Error: Hydration failed because the initial UI does not match what was rendered on the server.

This error points to a mismatch between the HTML generated by SSR and the client-side React rendering, often due to dynamic positioning logic or DOM manipulation differences between server and client environments.

fix

This issue was specifically addressed in `react-stick` version `5.0.6`. Upgrade to `react-stick@5.0.6` or newer. Additionally, ensure your SSR setup is correctly handling portals and dynamic styling.

Property 'position' does not exist on type 'IntrinsicAttributes & StickProps'.

This is a TypeScript error indicating that the `position` prop (or another prop) is not recognized by the `StickProps` interface, typically due to an outdated type definition or incorrect usage.

fix

Ensure you are using `react-stick` version `5.0.0` or newer, as this version introduced TypeScript types. If you are on an older version, you might not have types. If on v5+, clear your `node_modules` and `package-lock.json` and reinstall to ensure correct type resolution. Also, double-check the prop names against the documentation.

Upgrade

Version history

5.0.7latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for any React component library.

react-domrequiredPeer dependency required for rendering React components, especially with portals.

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/signavio/react-stick ↗

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