Simple helper components to make responsive design easier in React.
npm install react-matches
Simple helper components to make responsive design easier in React.
yarn add react-matches
npm install react-matches --save
``js
import { Media, Container } from 'react-matches'
const queries = {
sm: {
maxWidth: 400
},
md: {
minWidth: 600
},
lg: {
minWidth: 960
}
}
const ResponsiveMediaComponent = () => (
{({ matches, resolve }) =>
...
,,,
}
)
const ResponsiveContainerComponent = () => (
queries={{ fullWidth: minWidth: 600 }}
>
{({ matches, resolve }) =>
matches.fullWidth
? { marginRight: 8 }
: { marginBottom: 8 }
}
/>
}
)
`
#### queries: PropTypes.object
Pass any valid query that you can pass to json2mq.
#### onUpdate: PropTypes.func
A prop callback that fires when a query has changed.
#### children: PropTypes.func
Children must be a function. It returns the following back:
`js`
{
matches, // an object matching your queries shape with active queries
resolve // an easier way to work with multiple boolean operations
}
#### tag: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
The tag to render. Pass any regular element props along with this. If set to false a containerRef function will be passed down that must be placed on an element ref.
#### queries: PropTypes.object
An object of queries using { minWidth, maxWidth, minHeight, maxHeight }.
`js`
{
sm: { maxWidth: 399 },
md: { minWidth: 400 },
lg: { minWidth: 800, maxWidth: 1200 },
}
#### onUpdate: PropTypes.func
A prop callback that fires when a query has changed.
#### children: PropTypes.func
Children must be a function. It returns the following back:
`js`
{
containerRef, // if tag is false, you must pass the containerRef down to the component you want measured
matches, // an object matching your queries shape with active queries
resolve // an easier way to work with multiple boolean operations
}
clone repo
git clone git@github.com:souporserious/react-matches.git
move into folder
cd ~/react-matches
install dependencies
yarn
run dev mode
yarn dev
open your browser and visit: http://localhost:8080/`
Huge thank you to Daiwei Lu and Michael Jackson. Most of the code in here is heavily inspired by what they have done.