Styled Mini Props

Small helper tool for styled components. Provides a minimalist solution for responsive properties and for hover and focus css pseudoclasses.

View Demo · Report Bug · Request Feature

Table of Contents

1. Getting Started
   • Prerequisites
   • Installation
2. Configuration
3. Usage
4. Breakpoints
5. Css Shortcuts
6. License
7. Contact

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

(back to top)

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}
`;

(back to top)

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

(back to top)

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

(back to top)

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

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Matias Sanhueza - [email protected]

(back to top)