@rocketsofawesome/mirage/src/core/breakpoints/index.js

[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

const Desktop = styled(({element, children, ...props}) => {
  return React.createElement(element, props, children)
})`
display: none;
${props => props.theme.breakpointsVerbose.aboveTabletMax`
  display: ${props => props.display};
`}
`

Desktop.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  element: PropTypes.node
}
Desktop.defaultProps = {
  display: 'block',
  element: 'div'
}

const Tablet = styled(({element, children, ...props}) => {
  return React.createElement(element, props, children)
})`
display: none;
${props => props.theme.breakpointsVerbose.aboveTablet`
  display: ${props => props.display};
`}
${props => props.theme.breakpointsVerbose.aboveLaptop`
  display: ${props => props.laptopDisplay};
`}
`

Tablet.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  element: PropTypes.node
}
Tablet.defaultProps = {
  display: 'block',
  element: 'div',
  laptopDisplay: 'none'
}

const Mobile = styled(({element, children, ...props}) => {
  return React.createElement(element, props, children)
})`
display: ${props => props.display};
${props => props.theme.breakpointsVerbose.aboveTablet`
  display: none;
`}
`

Mobile.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  element: PropTypes.node
}
Mobile.defaultProps = {
  display: 'block',
  element: 'div'
}

const Default = styled(({element, children, ...props}) => {
  delete props.displayTarget
  return React.createElement(element, props, children)
})`
display: none;
${props => props.theme.breakpointsVerbose[props.displayTarget]`
  display: ${props => props.display};
`}
`

Default.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  element: PropTypes.node
}
Default.defaultProps = {
  display: 'block',
  element: 'div',
  displayTarget: 'belowTabletMax'
}

export {Desktop, Tablet, Mobile, Default}