hoist-non-react-statics

hoist-non-react-statics solves a specific higher-order-component (HOC) problem: when you wrap a React component in another component to add behavior, any custom static methods or properties on the original component (like a fetchData static used for server-side rendering, or a GraphQL fragment) are lost because the wrapper is a different function/class entirely.

Calling hoistNonReactStatics(WrapperComponent, WrappedComponent) copies every static property from the wrapped component onto the wrapper, except for statics React itself reserves (propTypes, defaultProps, displayName, contextTypes, etc.) and JS’s own inherited function properties (name, length, prototype), so consumers of the wrapped component don’t need to know a HOC is involved at all.

What You Get

• A single default export function: hoistNonReactStatics(targetComponent, sourceComponent, excludelist?)
• Automatic exclusion of React’s own reserved statics (propTypes, defaultProps, displayName, contextTypes, getDerivedStateFromProps, etc.)
• Support for React.forwardRef and React.memo wrapped components via dedicated static allowlists for each special component type
• Recursive hoisting up the prototype chain, so statics on a class component’s parent class are also copied
• An optional third excludelist argument to explicitly opt specific statics out of hoisting

Common Use Cases

• Preserving custom statics (e.g. a fetchData method used for SSR data-loading) when wrapping a component in a HOC
• Building library-author HOCs (analogous to connect, graphql, or withRouter) that shouldn’t break consumers’ static-property access
• Passing through propTypes-adjacent custom statics without leaking React’s own reserved fields into the copy
• Supporting React.forwardRef/React.memo wrapped components correctly by using the right static allowlist per wrapper type
• Excluding specific statics from being hoisted via the excludelist parameter when a wrapper intentionally overrides them

Under The Hood

Architecture - The entire library is a single ~100-line src/index.js function. It first recurses up Object.getPrototypeOf(sourceComponent) to also hoist inherited statics, then enumerates both Object.getOwnPropertyNames and Object.getOwnPropertySymbols on the source, filtering out three categories via lookup objects: JS’s own function internals (KNOWN_STATICS), React’s reserved instance/class statics (REACT_STATICS), and type-specific statics for ForwardRef/Memo wrappers (detected via react-is’s isMemo/$$typeof checks) before copying each remaining property with Object.defineProperty inside a try/catch to tolerate read-only properties. Tech Stack - Plain ES6+ JavaScript (Babel-compiled) with a single runtime dependency, react-is, used only to detect special React element types; built with Rollup into a CJS bundle plus hand-written index.d.ts types, tested with Mocha/Chai and nyc coverage reported to Coveralls. Code Quality - tests/unit/index.js covers plain components, class inheritance chains, forwardRef, memo, symbol-keyed statics, and the excludelist option; the codebase has been functionally stable since 2019 with no open architectural changes needed, reflecting a solved, narrowly-scoped problem rather than active feature development. API Design - A single function call at the point a HOC wraps a component (hoistNonReactStatics(Wrapper, Wrapped)) requires no configuration for the common case, with the excludelist parameter available only when a wrapper needs to deliberately override a specific static — this minimal surface is why it became the de-facto standard used inside dozens of popular HOC libraries.