Component queries in React
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
src
.babelrc
.gitignore
CHANGELOG.md
LICENSE
README.md
package.json
webpack.banner.js
webpack.config.js
webpack.prod.config.js
yarn.lock

README.md

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 💥

Usage

npm install react-component-query --save

<script src="https://unpkg.com/react-component-query/dist/react-component-query.js"></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 (
      <ViewPager>
        <Frame>
          <Track
            viewsToShow={viewsToShow}
            viewsToMove={viewsToShow}
            contain
          >
            {[0, 1, 2, 3, 4, 5].map(index =>
              <View key={index}>
                {index + 1}
              </View>
            )}
          </Track>
        </Frame>
      </ViewPager>
    )
  }
}

export default withComponentQueries(Slider, componentQueries)

Example Usage w/ stateless component

const ResponsiveSlider = withComponentQueries(({ matchedProps, children }) => (
  <Slider viewsToShow={matchedProps.viewsToShow}>
    {children}
  </Slider>
), [{
  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.

query

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

matchedQueries

An object of the currently matched queries.

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

matchedProps

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

dimensions

The same dimensions passed back in React Measure.

Running Locally

clone repo

git clone git@github.com:souporserious/react-component-query.git

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.