https://github.com/sectorlabs/react-slim-media-query

A really lightweight CSS media query component for React.
https://github.com/sectorlabs/react-slim-media-query

media-query react responsive

Last synced: about 2 months ago
JSON representation

A really lightweight CSS media query component for React.

• Host: GitHub
• URL: https://github.com/sectorlabs/react-slim-media-query
• Owner: SectorLabs
• License: mit
• Created: 2019-02-19T08:56:52.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T13:00:46.000Z (over 3 years ago)
• Last Synced: 2025-03-27T15:51:22.078Z (about 1 year ago)
• Topics: media-query, react, responsive
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-slim-media-query
• Size: 950 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-slim-media-query

[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/hyperium/hyper/master/LICENSE)

[![npm version](https://badge.fury.io/js/react-slim-media-query.svg)](https://badge.fury.io/js/react-slim-media-query)

A really lightweight CSS media query component for React (1640B GZipped).

## Usage

MediaQuery is a wrapper component that will render its children if the provided media query will match.

There are 2 ways to specify the query:

- Sending a `query` prop containg a CSS like media query.

- Sending specific props like `minWidth`, `maxWidth` etc. These can be numbers or strings. The current supported features are:

`minAspectRatio`, `maxAspectRatio`, `minDeviceAspectRatio`, `maxDeviceAspectRatio`, `minHeight`, `maxHeight`, `minDeviceHeight`,

`maxDeviceHeight`, `minWidth`, `maxWidth`, `minDeviceWidth`, `maxDeviceWidth`, `minColor`, `maxColor`, `minColorIndex`, `maxColorIndex`,

`minMonochrome`, `maxMonochrome`, `minResolution`, `maxResolution`.

```jsx

import { MediaQuery } from 'react-slim-media-query';

const App = () => (

    


        

            
The width should be 1000 or higher.

        

        

            
The width should be 1000 or higher.

        

        

            
The width should be 800 or less.

        

        

            
The width should be 800 or less.

        

        

            
The width should be 800 or less.

        

    

);


```

## Server Side Rendering

When rendered on server the query will always match. In order to override this behaviour you can set an initial state.

```jsx

import { MediaQuery } from 'react-slim-media-query';

const App = () => (

    


        

            
I should be visible when rendered on the server

        

    

);

```