React Matches 🔥
Simple helper components to make responsive design easier in React.
Install
yarn add react-matches
npm install react-matches --save
Example Usage
const queries = sm: maxWidth: 400 md: minWidth: 600 lg: minWidth: 960 const ResponsiveMediaComponent = <Media queries=queries> <Row> <Column size=> ... <Column size=> <Column> </Column> </Row> <Media> const ResponsiveContainerComponent = <Container tag="div" queries= fullWidth: minWidth: 600 > <Flex row=matchesfullWidth> <Input style= matchesfullWidth ? marginRight: 8 : marginBottom: 8 /> <Submit> </Flex> <Container>
Media
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:
matches // an object matching your queries shape with active queries resolve // an easier way to work with multiple boolean operations
Container
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 }
.
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:
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
Running Locally
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/
Thank You
Huge thank you to Daiwei Lu and Michael Jackson. Most of the code in here is heavily inspired by what they have done.