reactjs-common v0.0.3

reactjs-common

This package contains common items exist in some my projects. Although for my projects, it may be useful for you. Things that can be imported from this package:

setRef(refProp, ref)

It's useful when using React.forwarRef and you want to set the ref prop to a custom object.
Parameters:

• refProp is ref prop value
• ref is an object that will be set as the reference of component

Usage:

    const WrapperComponent = React.forwardRef((props, ref) => {
        //Some your code..

        setRef(ref, {
            //Your custom object can contain any properties/methods you want
        });
        
        //One reason to use `setRef` is because the wrapped component is a function component
        return <FunctionComponent {...props} />
    })

extRefCallback(refProp, extRef, callback)

It creates a callback function that can be set to a ref prop. The callback function will extend the reference object returned by the component.
Parameters:

• refProp is ref prop value
• extRef is the object containing all extension properties/methods
• callback is a function that will be called when the callback function (which is returned by extRefCallback) is called. This function has one parameter that is the ref object that has been extended.

It can be used in React.forwardRef like the following code:

    const WrapperComponent = React.forwardRef((props, ref) => {
        //Some your code..

        const callbackRef = extRefCallback(ref, {
            //The object containing all extension properties/methods
        });
        
        return <NonFunctionComponent {...props} ref={callbackRef} />
    })

Types for Flow

ExtractComponentPropsInstance

Usage:

type ViewProps = $Call<ExtractComponentPropsInstance, typeof View>['props'];
type ViewInstance = $Call<ExtractComponentPropsInstance, typeof View>['instance'];

Then, if you want to get View style prop type:

type ViewStyleProp = $NonMaybeType<ViewProps['style']>;

Ref<Instance>

It's a sub type of React.Ref. It defines the object type and the function type that can be set to ref prop.

RefCallback<Instance>

It's a sub type of Ref<Instance>. It only defines the function type that can be set to ref prop.

RefObject<Instance>

It's a sub type of Ref<Instance>. It only defines the object type that can be set to ref prop.