Package Exports

react-match-breakpoints

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-match-breakpoints) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Match Breakpoints

Lightweight, performant and easy to use media query React library 📱💻🖥️

_{Define your whatever media query configuration once and use it across project either as components or simply as an object.}

Coverage

Motivation

React Match Breakpoints goal is to provide a consistent way of handling responsiveness in your React app. Highlights:

Universal - can be used with ease both in declarative and imperative code. You can use it as a Component, HOC or hook. It also handles SSR well
Consistent - regardless of how it will be used, initial configuration is SSOT.
Flexible - allows any media query string that is supported by matchMedia API
Performant - built on top of matchMedia API. No window.onresize handlers
Lightweight - no dependencies and it only weighs around 2kb (minified and gzipped)
Mature - Build using Typescript and fully tested

Installation

$ npm install react-match-breakpoints --save

$ yarn add react-match-breakpoints

Docs

Please head to https://michalklim.github.io/react-match-breakpoints/ for full documentation and interactive examples

Basic usage

First, you have to initialize RMB by calling initMatchBreakpoints method and wrap your application with returned Provider and you are ready to go:

⚠️⚠️ notice that initMatchBreakpoints is called before actaul app starts to render. This is intentional and required way of setting up RMB

import React from 'react'
import { initMatchBreakpoints } from 'react-match-breakpoints'
import App from './App'

const breakpointsConfig = {
  mobile: 'screen and (max-width: 767px)',
  tablet: 'screen and (min-width: 768px) and (max-width: 1024px)',
}

const BreakpointsProvider = initMatchBreakpoints(breakpointsConfig)

ReactDOM.render(
  <BreakpointsProvider>
    <App />
  </BreakpointsProvider>,
  document.getElementById('root'),
)

Using Breakpoint component

import React from 'react'
import Breakpoint from 'react-match-breakpoints'

const ResponsiveComponent = () => {
  return (
    <Breakpoint.mobile>
      <span>I will be showed on mobile devices</span>
    </Breakpoint.mobile>

    <Breakpoint.tablet>
      <span>I will be showed on tablet devices</span>
    </Breakpoint.tablet>
  )
}

Using useBreakpoints hook

import React from 'react'
import { useBreakpoints } from 'react-match-breakpoints'

const ResponsiveComponent = () => {
  const breakpoints = useBreakpoints()

  const text = breakpoints.mobile ? 'I will be showed on mobile devices' : 'I will be showed on non mobile devices'

  return <span>{text}</span>
}

Using withBreakpoints HOC

import React from 'react'
import { withBreakpoints } from 'react-match-breakpoints'

const ResponsiveComponent = props => {
  const text = props.breakpoints.mobile ? 'I will be shown on mobile devices' : 'I will be shown on other devices'

  return <span>{text}</span>
}

export default withBreakpoints(ResponsiveComponent)

Support

RMB is supported basically by every browser that implements the full ES5 spec. It might be a good idea to include matchMedia polyfill for some older browsers.

⚠️⚠️ On browsers that don't support Proxy you won't see warnings if you try to access Breakpoints components that are not defined