styled-responsive-props

Intuitive responsive props system for styled components.

Install

npm install --save styled-responsive-props

Usage

Register within styled component:

${responsiveProp([cssProp, reactProp, ?defaultValue])}

Use within render:

<Box direction={[?default, [minWidth, value, maxWidth]}>

Example:

import React from 'react'
import styled from 'styled-components';
import { responsiveProp } from "styled-responsive-props";

const Box = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  ${responsiveProp(["flex-direction", "direction"])}
`;

const Example = ({ children }) => (
  <Box direction={["column", [1024, "row"]}>
    {children}
  </Box>
)

License

MIT © markoradak