Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

React Component Query

npm version Dependency Status

True component queries 🎉

Write one query and drop the mic 🎙

You're going to love it 👌

Check out the demo page to see it in action 💥


npm install react-component-query --save

<script src=""></script>
(UMD library exposed as `withComponentQueries`)

Example Usage

import React, { Component } from 'react'
import { withComponentQueries } from 'react-component-query'
import { ViewPager, Frame, Track, View } from 'react-view-pager'

const componentQueries = [{
  name: 'sm',
  breakpoint: {
    minWidth: 0
  props: {
    viewsToShow: 1
}, {
  name: 'md',
  breakpoint: {
    minWidth: 375
  props: {
    viewsToShow: 2
}, {
  name: 'lg',
  breakpoint: {
    minWidth: 800
  props: {
    viewsToShow: 3

class Slider extends Component {
  render() {
    const { matchedQueries, matchedProps, dimensions } = this.props
    const { sm, md, lg } = matchedQueries
    const { viewsToShow, swipe } = matchedProps
    const { width, height, top, right, bottom, left } = dimensions
    return (
            {[0, 1, 2, 3, 4, 5].map(index =>
              <View key={index}>
                {index + 1}

export default withComponentQueries(Slider, componentQueries)

Example Usage w/ stateless component

const ResponsiveSlider = withComponentQueries(({ matchedProps, children }) => (
  <Slider viewsToShow={matchedProps.viewsToShow}>
), [{
  name: 'sm',
  breakpoint: {
    minWidth: 0
  props: {
    viewsToShow: 1
}, {
  name: 'md',
  breakpoint: {
    minWidth: 600
  props: {
    viewsToShow: 2

withComponentQueries HoC (higher-order component)

Accepts an array of key-value pairs which will be your query. It uses React Measure under the hood to detect component changes and pass down matchedQueries, matchedProps, and dimensions into your component.


Each object in the queries array requires at least two properties: name and breakpoint.

property type value
name String (required) The name of the query
breakpoint Object (required) An object of constraints { minWidth, maxWidth, minHeight, maxHeight }
props Object (optional) Any props to be matched against this breakpoint. Last prop in range returned in matchedProps


An object of the currently matched queries.

  'sm': true,
  'md': true,
  'lg': false


The current matched props. For instance, this.props.matchedProps.viewsToShow might equal 1 or 3 depending on the last active query.


The same dimensions passed back in React Measure.

Running Locally

clone repo

git clone

move into folder

cd ~/react-component-query

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/

Thank You

Initial inspiration for this library came from React Container Query.