1.1.5 • Published 2 years ago
react-responsive-renderer v1.1.5
react-responsive-renderer
A React component that renders its children based on media query matches.
Installation
npm i react-responsive-renderer
or
yarn add react-responsive-renderer
Implementation
Uses the Window.matchmedia
api that takes a media query and returns a MediaQueryList
object representing the parsed result. read more.
This module is written in Typescript.
Usage
Wrap your React component(s) in the ReactResponsiveRenderer and supply a valid media query via the query
prop.
The child component(s) will only render when the media query is satisfied. The ResponsiveRenderer will react to changes in viewport dimensions.
import { ResponsiveRenderer } from "react-responsive-renderer";
<ResponsiveRenderer query="only screen and (max-width: 480px)">
<PhoneOnlyComponent />
</ResponsiveRenderer>
<ResponsiveRenderer query="only screen and (min-width: 480px)">
<TabletComponent />
</ResponsiveRenderer>