DEV Community

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. Everything ...
Read full post
Collapse
 
loliver profile image
Oliver Gassman •

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>
    )
}
Collapse
 
haraldson profile image
Hein Haraldson Berg • • Edited

One could even go as far as doing

const IconAdder = ({ tag: Tag = 'a', children, ...props }) => (
    <Tag {...props}>
        <Icon />
        {" "}
        {children}
    </Tag>
)
Collapse
 
jonasroessum profile image
Jonas Røssum •

(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?

Collapse
 
ganderzz profile image
Dylan Paulus •

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

Collapse
 
burzumumbra profile image
Ronald Flores Sequeira •

just a greate post Dylan!

Collapse
 
rrackiewicz profile image
rrackiewicz •

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