Currently, I am a novice programmer working on a personal project using React for the front-end. I am looking to create a Button component with the styled-components package that can be easily reused throughout the app with some variations in size, color, and hover effects. The Button will be used in various sections like individual posts, navigation bars, and forms. However, as I have only implemented it in a few instances so far, the code for the component is becoming quite complex to manage. Here is how it looks currently:
import styled from 'styled-components';
import { Link } from 'react-router-dom';
const Button = styled(Link)`
margin: 5px;
display: grid;
place-items: center;
font-size: 1em;
padding: 0 1em;
height: ${props => (props.small ? '35px' : '40px')};
background: ${props => (props.nav ? props.theme.color.white : '#30336b1a')};
border-radius: ${props => (props.small ? '3px' : '5px')};
color: ${props => (props.nav ? props.theme.color.forest : '#30336b')};
border: ${props =>
props.outline ? `2px solid ${props.theme.color.forest}` : null};
text-decoration: none;
transition: 0.2s ease-in-out;
&:hover {
background: ${props => (props.nav ? props.theme.color.forest : '#f6e58d')};
color: ${props => (props.nav ? props.theme.color.white : null)};
}
`;
export default Button;
The current variants are named small, nav, and outline. I feel the need to introduce more variants but the syntax
props=> props.variant? do-this: or-that;I am contemplating either extending the component and creating multiple ButtonVariant components or using if-else or switch statements to return different styled variants. Both methods aim to avoid repeating code by utilizing them with styled(Button). Yet, I seek advice from experienced individuals on what would be better in terms of performance and maintainability within the codebase. Despite thorough documentation and extensive research online, I have yet to find a definitive answer.