1.0.2 • Published 5 years ago
styled-responsive-props v1.0.2
styled-responsive-props
This is a small helper tool for styled-components. The main idea is to be able to use css property (with breakpoints) as an adjustment prop, without necessity of extending current design system.
Usage
- Declare properties to be used in your styled component
- Use css-property name as a prop name and pass a corresponding value
You can pass single value or breakpoints with values divided by pipe.
There are built in breakpoints:
xs >= 0, sm > 425px, md > 768px, lg > 1024px, xl > 1200px
But you can specify your own breakpoint key as a number for min-width
media declaration:
@media (min-width: ...px) { ... }
Examples
import React from 'react';
import styled from 'styled-components';
import respProps from 'styled-responsive-props';
const StyledExample = styled.div`
padding: 20px;
${respProps([
'padding',
'background-color',
['margin', '10px'] // with default value
])}
`;
Ex. 1
<StyledExample>
example...
</StyledExample>
result:
padding: 20px;
margin: 10px; /* default value */
Ex. 2
<StyledExample background-color="#bada55">
example...
</StyledExample>
result:
padding: 20px;
background-color: #bada55;
margin: 10px; /* default value */
Ex. 3
<StyledExample margin="20px">
example...
</StyledExample>
result:
padding: 20px;
margin: 20px;
Ex. 4
<StyledExample padding="xs:15px|700:20px|lg:30px">
example...
</StyledExample>
result:
padding: 20px;
padding: 15px; /* xs:15px */
@media (min-width: 700px) { padding: 20px; } /* 700:20px */
@media (min-width: 1025px) { padding: 30px; } /* lg:30px */
margin: 10px; /* default value */