react-forwardref-utils
Utils to help with React 16.3+ forwardRef method
$ npm install --save react-forwardref-utils
Usage
;
isForwardRef
Tests if Component is produced by forwardRef function
; const FancyButton = React; ; // true
forwardRefSymbol
Symbol (currently just a string) that points to the ref passed to a component that wrapped with forwardRefFactory
.
forwardRefFactory(Component, [options])
Wraps passed component with forwardRef
, assigns its statics to result using hoist-non-react-statics and provide special symbol to take ref from parent call.
; Component { const forwardRefSymbol: ref ...props = thisprops; propsref = ref; propsclassName = "FancyButton"; return <button ...props>propschildren</button>; } Button/*, {displayName, hoistSource, hoistExclude}*/;
Options:
displayName
(String) Name of the result component that will be used in devtools. Will be taken from source component if omitted.hoistSource
(Object|Function) Source for taking static methods for assigning them to result component. In case you want to wrap with forwardRef another wrapper of original component, but methods should be copied from original. For instance, when you write HOC and wrap that HOC with forwardRefFactory - statics should be copied from original component, not from the HOC.hoistExclude
(Object) Object to exclude some methods from hoisting, third parameter of hoist-non-react-statics module. By default excludes forwardRef component properties in case we wrap another forwardRef component (until https://github.com/mridgway/hoist-non-react-statics/issues/48 is resolved).
withForwardRef([options])
Decorator that wraps decorated component with forwardRefFactory
.
; @Component { const forwardRefSymbol: ref ...props = thisprops; propsref = ref; propsclassName = "FancyButton"; return <button ...props>propschildren</button>; }