1.2.5 • Published 2 months ago
styled-mini-props v1.2.5
Getting Started
To get a local copy up and running follow these simple example steps.
Prerequisites
You need to have version 5 or 6 of styled-components installed.
Installation
With yarn
yarn add styled-mini-props -D
Or npm
npm i styled-mini-props --save-dev
Configuration
// styled-component configuration file
import styled from 'styled-components';
import { responsiveProps, hovProps, setBreakpoints } from 'styled-mini-props';
// Optional
setBreakpoints({
base: 0,
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
'2xl': '1400px',
'3xl': '1600px',
});
// Example component
// ${responsiveProps} or ${hovProps} or both
const Text = styled.p`
font-family: Nunito;
font-weight: normal;
font-size: 14px;
color: black;
margin: 0;
${responsiveProps}
${hovProps}
`;
Usage
// In the react component
import React from 'react';
import { Text } from './path/for/Text';
const helloWorld = () => {
return (
<Text
color="red"
margin={['10px', null, '20px']}
fontSize={{ base: '12px', lg: '27px' }}
_hover={{ color: 'blue' }}
>
Hello World
</Text>
);
};
You can also use focus, active, link and visited in the same way as hover. At the moment it is not possible to use breakpoints within these pseudoclasses.
For more examples, please view the Demo
Breakpoints
Usage
They can be declared in two ways:
As an Array
<Text margin={['10px', null, '20px']}>Hello World</Text>
In this way we declare the following breakpoints
- base: 10px
- sm: null (so it is still 10px)
- md: 20px (md and up)
As an Object: is the declarative form of the previous one
<Text fontSize={{ base: '12px', lg: '27px' }}>Hello World</Text>
Breakpoint sizes
The default sizes are:
Breakpoint | Size |
---|---|
base | 0em |
sm | 30em |
md | 48em |
lg | 62em |
xl | 80em |
2xl | 96em |
3xl | 107em |
CSS Shortcuts
Some css shortcuts have been added to facilitate coding
Shortcut | Shortcut |
---|---|
m | margin |
ml | margin-left |
mr | margin-right |
mt | margin-top |
mb | margin-bottom |
my | margin-block |
mx | margin-inline |
p | padding |
pl | padding-left |
pr | padding-right |
pt | padding-top |
pb | padding-bottom |
py | padding-block |
px | padding-inline |
bgColor | background-color |
bg | background |
w | width |
h | height |
maxW | max-width |
minW | min-width |
maxH | max-height |
minH | min-height |
License
Distributed under the MIT License. See LICENSE.txt
for more information.
Contact
Matias Sanhueza - manoloesanhueza@gmail.com