Registry / web-framework / hoist-non-react-statics

hoist-non-react-statics

library3.3.2jsnpmunverified

hoist-non-react-statics is a focused utility library for React applications designed to copy non-React specific static properties from a child component to a parent component. It functions similarly to `Object.assign` but intelligently blacklists React's internal static keywords to prevent unintentional overrides. This mechanism is critical for Higher-Order Components (HOCs) to correctly preserve static methods, `propTypes`, `defaultProps`, or other custom static properties from the wrapped component, preventing their loss during composition. The current stable version is 3.3.2. The package maintains a stable release cadence primarily driven by React's evolution (e.g., ForwardRefs support) and TypeScript definition enhancements, ensuring broad compatibility across various React versions. Its key differentiator is its precise targeting of user-defined static properties while respecting React's internals, solving a common HOC pattern challenge documented by React itself.

web-framework

npm install hoist-non-react-statics

github ↗package ↗

INSTALL

IMPORT

SIG · HOIST-NON-REACT-ST

hoist-non-react-statics

web-frameworkjavascriptv3.3.2

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.

hoistNonReactStatics

✓ import hoistNonReactStatics from 'hoist-non-react-statics';

✗ const hoistNonReactStatics = require('hoist-non-react-statics');

The library primarily uses a default export, which is compatible with both ESM and CommonJS via bundlers. Direct CommonJS usage is also supported.

hoistNonReactStatics (CommonJS)

✓ const hoistNonReactStatics = require('hoist-non-react-statics');

For Node.js environments or older build setups, this CommonJS `require` syntax is the correct approach.

hoistNonReactStatics (TypeScript types)

✓ import hoistNonReactStatics, { NonReactStatics } from 'hoist-non-react-statics';

TypeScript definitions are included with the package since v2.2.0, providing type safety for the `hoistNonReactStatics` function and related types like `NonReactStatics`.

Demonstrates the core usage of `hoistNonReactStatics` within a Higher-Order Component (HOC) to transfer static methods and properties from a wrapped component to the HOC itself, preventing loss of functionality or metadata.

import hoistNonReactStatics from 'hoist-non-react-statics'; import React from 'react'; // Imagine a HOC that wraps a component function withLogger(WrappedComponent) { class Logger extends React.Component { static displayName = `WithLogger(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`; render() { console.log(`Rendering ${WrappedComponent.displayName || WrappedComponent.name}`); return <WrappedComponent {...this.props} />; } } // Crucially, hoist non-React statics from WrappedComponent to Logger // This ensures statics like propTypes, defaultProps, or custom static methods are preserved. return hoistNonReactStatics(Logger, WrappedComponent); } // Example usage: class MyComponent extends React.Component { static someStaticMethod() { return 'Hello from static!'; } render() { return <div>My Component Content</div>; } } const EnhancedComponent = withLogger(MyComponent); console.log(EnhancedComponent.someStaticMethod()); // Should output 'Hello from static!'

Debug

Known issues

breakingStarting with v2.0.0, the library only hoists enumerable static properties. If your components relied on non-enumerable static properties being hoisted, this change will break that behavior.

fix

Ensure all static properties intended for hoisting are enumerable. Review your component's static definitions for potential non-enumerable properties.

affects: >=2.0.0

breakingVersions prior to 3.x do not support React's `ForwardRef` feature. HOCs using older versions will lose `ref` functionality when wrapping `ForwardRef` components.

fix

Upgrade to `hoist-non-react-statics@3.x` or later to ensure compatibility with `ForwardRef` components.

affects: <3.0.0

gotchaThe package utilizes `Object.defineProperty`, which has a known broken implementation in Internet Explorer 8 (IE8). Running the library in IE8 without a proper polyfill will lead to runtime errors.

fix

If IE8 support is required, ensure you are using a robust `Object.defineProperty` polyfill that addresses IE8's deficiencies.

affects: >=1.0.0

gotchaThe third parameter allows explicit exclusion of statics. Accidentally excluding a required static will lead to missing functionality on the wrapped component.

fix

Carefully review the `exclude` object (third parameter) to ensure only truly unwanted statics are listed. When in doubt, omit the third parameter.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Object doesn't support this property or method

This error in IE8 typically indicates a problem with `Object.defineProperty`.

fix

Install and include a comprehensive polyfill for `Object.defineProperty` to fix its broken implementation in IE8.

Warning: Function components cannot be given refs. Attempts to access this ref will fail.

This warning (or similar `ref` issues) often occurs when using an HOC that wraps a `ForwardRef` component with `hoist-non-react-statics` versions older than 3.x.

fix

Upgrade `hoist-non-react-statics` to version 3.x or higher to gain proper `ForwardRef` support.

MyComponent.someStaticMethod is not a function

A static method or property defined on your wrapped component is not accessible via the HOC, suggesting it wasn't hoisted.

fix

Ensure you are calling `hoistNonReactStatics` correctly after defining your HOC. If on `v2.x` or later, verify the static property is enumerable. If using a third parameter to `hoistNonReactStatics`, ensure the static method is not accidentally excluded.

Upgrade

Version history

3.3.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/mridgway/hoist-non-react-statics ↗

packagehttps://www.npmjs.com/package/hoist-non-react-statics ↗