Hide + rebass

Hide.js

import styled from 'styled-components'
import { theme } from 'rebass'

const { breakpoints } = theme
const lastIndex = breakpoints.length - 1

const getMediaBreakpoint = (breakpoints, breakpoint, index) => {
  if (index === 0) return `@media screen and (max-width: ${breakpoint})`
  const prevBreakpoint = breakpoints[index - 1]
  if (index === lastIndex) {
    return `@media screen and (min-width: ${prevBreakpoint})`
  }
  return `@media screen and (min-width: ${prevBreakpoint}) and (max-width: ${breakpoint})`
}

const mediaBreakpoints = breakpoints.reduce((acc, breakpoint, index) => {
  acc[index] = getMediaBreakpoint(breakpoints, breakpoint, index)
  return acc
}, {})

const hidden = key => props => {
  const breakpoints = [].concat(props.breakpoints)
  return breakpoints.includes(key)
    ? {
      [mediaBreakpoints[key]]: {
        display: 'none'
      }
    }
    : null
}

const Hide = styled.div(
  [],
  ...Object.keys(mediaBreakpoints).map(i => hidden(Number(i)))
)

export default Hide

Inspired by hidden-styled, I'm trying to do the same but inside rebass world

expected API

<Hide breakpoints={[0]}>I‘m hidden on extra small screens</Hide>
<Hide breakpoints={[1]}>I‘m hidden on small screens</Hide>
<Hide breakpoints={[2]}>I‘m hidden on medium screens</Hide>
<Hide breakpoints={[3]}>I‘m hidden on large screens</Hide>
<Hide breakpoints={[2, 3]}>I‘m hidden on medium and large screens</Hide>

This is awesome, exactly what I was trying to achieve.

🙌 Thanks @Kikobeats. Great snippet!