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>
)
}
Top comments (0)