Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

You can’t perform that action at this time.