jepser

/**
 * Call the styles factory for with the correct props for each media query
 * @param {function} stylesGenerator function that generates the styles
 *
 * @returns {array} array of styles to be applied for the registered media queries
 */
export const generateResponsiveStyles = stylesGenerator => props =>
  Object.keys(mediaqueries).reduce((rules, mq) => {
    if (!props[mq]) return rules;

jepser

const BASE_PROPS = ['top', 'right', 'bottom', 'left']

// with this component:
<Spacer sm={{ bottom: 1, top: 2 }} md={{ bottom: 2, top: 1 }} sl={{ top: 1 }} />

const responsiveProps = generateResponsiveProps(props, BASE_PROPS)

// will generate this and remove sl because that's not in my media queries
{
  sm: {

jepser

/**
 * Generate a valid structure for responsive configuration for a component
 * @param {object} props props received from the component
 * @param {array} baseProps list of props to be validated
 *
 * @returns a structured object with the props for each media query
 */
export const generateResponsiveProps = (props, baseProps) => {
  // from the breakpoints registered check which props exists
  const shapedPropsWithMq = Object.keys(BREAKPOINTS).reduce(

jepser

const Root = styled.div`
  //…
  ${mediaqueries.md`
    //specific rules for this break point
  `
`

jepser

const Spacer = ({
  top, left, bottom, right, children, sm, md, lg, xl,
}) => {
  return (
  <Root
    top={ top }
    left={ left }
    bottom={ bottom }
    right={ right }
    sm={sm}

jepser

// for base usage
<Spacer bottom={2} left={2}>cool component here</Spacer>

// for responsive usage
<Spacer md={{ bottom: 2, left: 2 }} left={1}>cool component here</Spacer>

jepser

<MatchMedia query={BREAKPOINTS.md}>
 { matches => matches ? <UseThis /> : <UseOther /> }
</MatchMedia>

jepser

const Spacer = ({
   top, left, bottom, right, children,
}) => {
  return (
    <Root
      top={ top }
      left={ left }
      bottom={ bottom }
      right={ right }
    >

jepser

import { Col } from 'super-library'
// either like this
<Col md={5} offsetMd={1} />
// or this
<Col md={{ size: 5, offset: 1 }} />

jepser

// helpers.js
/**
 * Generate a valid structure for responsive configuration for a component
 * @param {object} props props received from the component
 * @param {array} baseProps list of props to be validated
 *
 * @returns a structured object with the props for each media query
 */
export const generateResponsiveProps = (props, baseProps) => {
  // from the breakpoints registered check which props exists