Tips on Creating Reusable Components

Dylan Paulus on May 20, 2018

Orignally Posted: dylanpaulus.com Introduction A huge selling point of React is its use of composable, reusable components. Everythin... [Read Full]
markdown guide
 

You can enforce the Keep It Simple part by using pure functional components rather than classes, this stops lifecycle hooks and the like from being added absent-mindedly.

const IconAdder = ({ tag, onClick, children, ...rest }) => {
    const Tag = tag

    return (
        <Tag onClick={onClick} {...rest}>
            <Icon />
            {" "}
            {children}
        </Tag>
    )
}
 

One could even go as far as doing

const IconAdder = ({ tag: Tag = 'a', children, ...props }) => (
    <Tag {...props}>
        <Icon />
        {" "}
        {children}
    </Tag>
)
 

(Warning: what is about to be shown requires a transpiler).

You already need one for the JSX conversion?

Maybe suggest a babel preset or something to the reader instead?

 

Great point Jonas, I'll look at adding the required babel presents!

 

I feel like I just leveled up my React skills 10 levels reading this. claps

 
code of conduct - report abuse