with-valued-data v1.0.0

with-valued-data

This is a HOC for react components. It will conditionally render your components if your data has been valued and it will inject the valued data to your component

##motivations

In react hooks rules there is a rule says "Don’t call Hooks in conditions" this is a rational rule but some times we want early return in our component for example we want to call our custom hooks only after an async data fetched from server or many other times which we want do nothing when something is not valued yet

##Usage with example

export default function XEntityView({xEntityId}) {
    const xEntity = useXEntity(xEntityId);
    
    if(!xEntity) 
        return null;
    
    const options = useOptions(xEntity);
    
    return (
        //...
    );
}

As you can see in this example useOptions depends on xEntity and when it's not valued yet there is no useful option so we can handle useOptions to expect undefined value and call useOptions before early return or we can use this HOC to make sure this component will render only if xEntity has been fetched

export default function XEntityView({xEntity}) {
    const options = useOptions(xEntity);
    
    return (
        //...
    );
}

export default withValuedData({xEntity: (props) => useXEntity(props.xEntityId)}, XEntityView)

and this is typescript version for those who loves typescript

export default function XEntityView({xEntity}: Props) {
    const options = useOptions(xEntity);
    
    return (
        //...
    );
}

interface Props {
    xEntity: XEntity;
    xEntityId: ID;
}

/*when you want to use it from parent component you don't need to pass xEntity to it and it will be injecting automatically*/
export default withValuedData({xEntity: (props/*will be infer*/) => useXEntity(props.xEntityId)}, XEntityView)

##Api ###param

• provider: you can use provider in 2 ways (as you like)
  • a function which receive props and should return object of values which will check and inject to wrapped component (p: Props) => {[k in InjectingProps]: Value | undefined}
  • an object which its keys are injectingProps keys and it's value is a function which will receive props as argument and should return value or undefined {[k in InjectingProps]: (p: Props) => Value | undefined}
• Comp: The wrappedComponent which will received valued props