DEV Community

Aboucodeur
Aboucodeur

Posted on

3 2

React / Styled-Components Example : Design System

Everybody talk design system ?
What is this ?

Example => create re-usable heading .

import styled from "styled-components"

/**
* The problem heading are multiple level (1-6)
* how to refactor my code
* The simple way is create for each heading level => 
*/

// re-usable heading with small code
export const Heading = ({level,color,children,...props})=>{
    // refactor heading level
    const StyledHeading = styled[`h${level}`]`
        color:${(color)=>color};
      `
    return(
        <StyledHeading 
            color={color}
            {...props}
          >{children}
       </StyledHeading>
    )
} 

Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay