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 - [email protected]