{"id":11042,"library":"hoist-non-react-statics","title":"Hoist Non-React Statics","description":"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.","status":"active","version":"3.3.2","language":"javascript","source_language":"en","source_url":"git://github.com/mridgway/hoist-non-react-statics","tags":["javascript","react"],"install":[{"cmd":"npm install hoist-non-react-statics","lang":"bash","label":"npm"},{"cmd":"yarn add hoist-non-react-statics","lang":"bash","label":"yarn"},{"cmd":"pnpm add hoist-non-react-statics","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily uses a default export, which is compatible with both ESM and CommonJS via bundlers. Direct CommonJS usage is also supported.","wrong":"const hoistNonReactStatics = require('hoist-non-react-statics');","symbol":"hoistNonReactStatics","correct":"import hoistNonReactStatics from 'hoist-non-react-statics';"},{"note":"For Node.js environments or older build setups, this CommonJS `require` syntax is the correct approach.","symbol":"hoistNonReactStatics (CommonJS)","correct":"const hoistNonReactStatics = require('hoist-non-react-statics');"},{"note":"TypeScript definitions are included with the package since v2.2.0, providing type safety for the `hoistNonReactStatics` function and related types like `NonReactStatics`.","symbol":"hoistNonReactStatics (TypeScript types)","correct":"import hoistNonReactStatics, { NonReactStatics } from 'hoist-non-react-statics';"}],"quickstart":{"code":"import hoistNonReactStatics from 'hoist-non-react-statics';\nimport React from 'react';\n\n// Imagine a HOC that wraps a component\nfunction withLogger(WrappedComponent) {\n  class Logger extends React.Component {\n    static displayName = `WithLogger(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n    render() {\n      console.log(`Rendering ${WrappedComponent.displayName || WrappedComponent.name}`);\n      return <WrappedComponent {...this.props} />;\n    }\n  }\n\n  // Crucially, hoist non-React statics from WrappedComponent to Logger\n  // This ensures statics like propTypes, defaultProps, or custom static methods are preserved.\n  return hoistNonReactStatics(Logger, WrappedComponent);\n}\n\n// Example usage:\nclass MyComponent extends React.Component {\n  static someStaticMethod() {\n    return 'Hello from static!';\n  }\n  render() {\n    return <div>My Component Content</div>;\n  }\n}\n\nconst EnhancedComponent = withLogger(MyComponent);\n\nconsole.log(EnhancedComponent.someStaticMethod()); // Should output 'Hello from static!'\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure all static properties intended for hoisting are enumerable. Review your component's static definitions for potential non-enumerable properties.","message":"Starting 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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to `hoist-non-react-statics@3.x` or later to ensure compatibility with `ForwardRef` components.","message":"Versions prior to 3.x do not support React's `ForwardRef` feature. HOCs using older versions will lose `ref` functionality when wrapping `ForwardRef` components.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"If IE8 support is required, ensure you are using a robust `Object.defineProperty` polyfill that addresses IE8's deficiencies.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Carefully review the `exclude` object (third parameter) to ensure only truly unwanted statics are listed. When in doubt, omit the third parameter.","message":"The third parameter allows explicit exclusion of statics. Accidentally excluding a required static will lead to missing functionality on the wrapped component.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install and include a comprehensive polyfill for `Object.defineProperty` to fix its broken implementation in IE8.","cause":"This error in IE8 typically indicates a problem with `Object.defineProperty`.","error":"TypeError: Object doesn't support this property or method"},{"fix":"Upgrade `hoist-non-react-statics` to version 3.x or higher to gain proper `ForwardRef` support.","cause":"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.","error":"Warning: Function components cannot be given refs. Attempts to access this ref will fail."},{"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.","cause":"A static method or property defined on your wrapped component is not accessible via the HOC, suggesting it wasn't hoisted.","error":"MyComponent.someStaticMethod is not a function"}],"ecosystem":"npm"}