React / Styled-Components Example : Design System

#react #styledcomponent #design

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>
    )
}