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="https://unpkg.com/react-component-query/dist/react-component-query.js"></script>
(UMD library exposed as `withComponentQueries`)
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)
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
}
}])
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.
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/
Initial inspiration for this library came from React Container Query.