with-breakpoints

A react component that used for use css mediaquery as you know.

This component is created using window.matchMedia that can show the information at a resolution that matches a particular media query. Also, you can receive props the matches status of the mediaquery set by HOC component.

Installation

Install with npm:

npm install with-breakpoints

Install with yarn:

yarn add with-breakpoints

Using a UMD:

<script src="https://unpkg.com/with-breakpoints/dist/umd/with-breakpoints.js"></script>
<script src="https://unpkg.com/with-breakpoints/dist/umd/with-breakpoints.min.js"></script>

Notice: You must include react, react-dom, prop-types if you are using a UMD

Usage

You can use like other react component or HOC.

Using a react component

Basic usage

import Breakpoint from 'with-breakpoints'

const Component = (props) => (
  <Breakpoint mq='screen and (max-width: 767px)'>
    Hello world!
  </Breakpoint>
)

Render child with function

import Breakpoint from 'with-breakpoints'

const Component = (props) => (
  <Breakpoint mq='screen and (max-width: 767px)'>
    {(matches) => {
      return matches ? 'Hello world!' : 'Not matches'
    }}
  </Breakpoint>
)

Server side rendering

import Breakpoint from 'with-breakpoints'

const Component = (props) => (
  <Breakpoint
    mq='screen and (max-width: 767px)'
    defaultMatches={true}
  >
    Hello world!
  </Breakpoint>
)

Notice: defaultMatches only can used at node. Browser will be ignored.

Using a HOC

Basic usage

import { withBreakpoints } from 'with-breakpoints'

const Component = ({ pc, mobile }) => (
  pc ? 'Hello pc!' : mobile ? 'Hello mobile!' : null
)

const mqs = [
  { name: 'pc', mq: 'screen and (min-width: 768px)' },
  { name: 'mobile', mq: 'screen and (max-width: 767px)' }
]

export default withBreakpoints(mqs)(Component)

Server side rendering

import { withBreakpoints } from 'with-breakpoints'

const Component = ({ pc, mobile }) => (
  pc ? 'Hello pc!' : mobile ? 'Hello mobile!' : null
)

const mqs = [
  { name: 'pc', mq: 'screen and (min-width: 768px)', defaultMatches: true },
  { name: 'mobile', mq: 'screen and (max-width: 767px)', defaultMatches: false }
]

export default withBreakpoints(mqs)(Component)

Notice: defaultMatches only can used at node. Browser will be ignored.

Props

Below components's mq props is used be json2mq. Therefore, you can pass the mqs as an object or array.

Breakpoint

Props	Type	Default	Required	Description
mq	`string,object,array`	`all`	`false`	CSS mediaqueries
defaultMatches	`bool`	`true`	`false`	Default match for server side rendering (Browser will be ignored)
onChange	`func`		`false`	onChange event (This function will get 'matches' argument)