Destructuring the console object
Just as we can destructure all other objects, we can destructure functions like log() and warn() directly out of the console object.
Read full articleCombining arrow functions in styled-components
Instead of using many arrow functions to extract the theme in your styled-components, you can group them and do them all in one block.
const Button = styled.button`
box-shadow: ${({ theme }) => theme.boxShadows.medium};
color: ${({ theme }) => theme.colors.white};
font-weight: ${({ theme }) => theme.fontWeights.semibold};
margin: 0;
`;
const Button = styled.button`
${({ theme }) => `
box-shadow: ${theme.boxShadows.medium};
color: ${theme.colors.white};
font-weight: ${theme.fontWeights.semibold};
`}
margin: 0;
`;const Button = styled.button`
box-shadow: ${({ theme }) => theme.boxShadows.medium};
color: ${({ theme }) => theme.colors.white};
font-weight: ${({ theme }) => theme.fontWeights.semibold};
margin: 0;
`;
const Button = styled.button`
${({ theme }) => `
box-shadow: ${theme.boxShadows.medium};
color: ${theme.colors.white};
font-weight: ${theme.fontWeights.semibold};
`}
margin: 0;
`;const Button = styled.button`
box-shadow: ${({ theme }) => theme.boxShadows.medium};
color: ${({ theme }) => theme.colors.white};
font-weight: ${({ theme }) => theme.fontWeights.semibold};
margin: 0;
`;
const Button = styled.button`
${({ theme }) => `
box-shadow: ${theme.boxShadows.medium};
color: ${theme.colors.white};
font-weight: ${theme.fontWeights.semibold};
`}
margin: 0;
`;const Button = styled.button`
box-shadow: ${({ theme }) => theme.boxShadows.medium};
color: ${({ theme }) => theme.colors.white};
font-weight: ${({ theme }) => theme.fontWeights.semibold};
margin: 0;
`;
const Button = styled.button`
${({ theme }) => `
box-shadow: ${theme.boxShadows.medium};
color: ${theme.colors.white};
font-weight: ${theme.fontWeights.semibold};
`}
margin: 0;
`;Continue reading
Merging arrays
There are several ways to concatenate in JavaScript. We can pick the one that is most readable in each situation.
Read full articleNamespacing styled-components
To improve the readability of React components, we can import the styled-components they use from another file under a ui-namespace.
Read full articleThe nullish-coalescing operator
We can provide default values for variables in a way that respects “real” values that are still falsy.
Read full articleDestructuring props in styled-components
When using styled-components in React, we can use destructuring to make our components more readable.
Read full articleRemoving duplication with higher-order functions
Are you calling the same function many times with near-identical parameters? Hide that repetition in a higher-order function for more readability.
Read full article