react-media - CSS media queries for React

  •        25

react-media is a CSS media query component for React.A component listens for matches to a CSS media query and renders stuff based on whether the query matches or not.

https://github.com/ReactTraining/react-media

Dependencies:

json2mq : ^0.2.0
prop-types : ^15.5.10

Tags
Implementation
License
Platform

   




Related Projects

react-responsive - Media queries in react for responsive design

  •    Javascript

The best supported, easiest to use react media query module. This module is pretty straightforward: You specify a set of requirements, and the children will be rendered if they are met. Also handles changes so if you resize or flip or whatever it all just works.

css-element-queries - CSS-Element-Queries Polyfill

  •    Javascript

Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+). It allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported) size while not causing performance lags due to event based implementation. It's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.

react-sizes - :left_right_arrow: Hoc to easily map window sizes to props.

  •    Javascript

React Sizes is a high-order component with a high performance that transform window sizes (width and height) into props. You can check inside your component, for example, if user's window is less than 480 pixels of width, and add a custom content. It can be very powerful for when you need to display different content for mobile and desktop. But it's not limited to this case. Just use that at your needs.

react-bounds - :left_right_arrow: The Future of Media Queries

  •    Javascript

Like Media Queries - Set min and max values like breakpoints. Use the Bounds in JS - Active bounds are passed down as props.

breakpoint - Really simple media queries in Sass

  •    CSS

Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best. Breakpoint also allows you to get the context of your media queries from your code, allowing you to write dynamic mixins based on their media query context.


styled-media-query - 💅💍 Better media queries for styled-component

  •    Javascript

Beautiful media queries better than CSS @media for styled-components with ability to specify custom breakpoints. Note: This documentation is for the latest version (v2). We still support v1 syntax but it'll be removed in v3.

responsive-html-email-template - Responsive HTML email template designed to work on all major email platforms and smartphones

  •    HTML

This template is designed to work on all major email platforms. It is built with media query, making it responsive for smartphones that support media query. It serves as a foundation that has been tested and thoroughly reviewed for compatibility, making it very easy to customize and make changes. Using MailChimp's html email template (blue-print) as the foundation, this template is an improved version with more row options, redefined structure and many fixes for Outlook, Yahoo, Hotmail, Gmail, e.t.c.

breakpoint - Breakpoint is a column based media query generator and responsive image framework.

  •    Javascript

Breakpoint is a grid system and responsive image solution. It's based on the concept that columns shouldn't stretch but get added or taken away as the screen changes size. This concept was taken from the Frameless Grid system developed by Joni Korpi. The Breakpoint grid is also floatless by using inline-block cells and border box sizing. This layout technique is taken from Griddle by Nicolas Gallagher. Breakpoint generates media queries at column break points that you determine. You can also label your media queries which allows JavaScript to pair them with responsive image sources. If you want to use Breakpoint for responsive images you need jQuery and EventEmitter. While not a requirement, you can get enhanced deferreds/callbacks when working with responsive images by installing imagesLoaded.

responsive-comments - A client-side solution to conditional loading.

  •    Javascript

ResponsiveComments was designed to bring simple conditional loading to the client side. Through the use of HTML comments, markup can be introduced to progressively enhance an experience as various media queries or feature detections evaluate to true. For more information and examples check out responsivecomments.com. To get started using ResponsiveComments, add a [data-responsive-comment-media] attribute containing a valid media query to any element containing children that you wish to conditionally load. The ResponsiveComments concept will only work in a progressivelty enhanced experience so make sure you use minimum width media queries.

sass-mq - A Sass mixin that helps you compose media queries in an elegant way.

  •    CSS

mq() is a Sass mixin that helps you compose media queries in an elegant way. Sass MQ was crafted in-house at the Guardian. Today, many more companies and developers are using it in their projects: see who uses Sass MQ.

veinjs - Injects CSS into the document (it's a perfectly legal procedure)

  •    Javascript

CSS injection is the process of injecting CSS definitions into a document dynamically. Media Query Support - You can inject media queries and work responsive magic with veinjs dynamically.

react-foundation - Foundation as React components.

  •    Javascript

Foundation as React components. Foundation is both feature-rich and easy to customize. React on the other hand is awesome because of its simplicity. It's even more awesome when combined with Redux and Immutable.

react-lz-editor - A multilingual react rich-text editor component includes media support such as texts, images, videos, audios, links etc

  •    Javascript

An open source react rich-text editor ( mordern react editor includes media support such as texts, images, videos, audios, links etc. ), development based on Draft-Js and Ant-design, good support html, markdown, draft-raw mode. It's supports multiple languages well and welcome you add your language supports. Disabled media insert feature on demo page, because of there was no online API support for the time being, here is The server side API demo in java you may want.

react-player - A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

  •    Javascript

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. Not using React? No problem. The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control playback and react to events such as buffering or media ending. See the demo source for a full example.

node-css-mqpacker - A tool for packing same CSS media query rules into one with PostCSS

  •    Javascript

It is a recommended way to use this tool. This package also installs a command line interface.

breakpoint-slicer - A very quick and efficient syntax for Breakpoint

  •    CSS

Along with Respond To, Breakpoint Slicer is an alternative syntax for Breakpoint. It offers a powerful yet very simple way to slice your media queries. See those spans between breakpoints? Let's name them "slices".

ember-responsive - Easy responsive layouts with Ember

  •    Javascript

ember-responsive is an ember-cli addon that give you a simple, Ember-aware way of dealing with media queries. This default config has already been provided for you. If you wish to change the values or add new ones, simply create a new app/breakpoints.js in your project and export your chosen config.

conditioner - 💆🏻 Frizz free, context-aware, JavaScript modules

  •    Javascript

Conditioner provides a straight forward Progressive Enhancement based solution for linking JavaScript modules to DOM elements. Modules can be linked based on contextual parameters like viewport size and element visibilty making Conditioner your perfect Responsive Design companion. Mount a component (like a Date Picker, Section Toggler or Carrousel), but only do it on wide viewports and when the user has seen it.

pure - A set of small, responsive CSS modules that you can use in every web project.

  •    HTML

Now, all Pure CSS files should be built into the `pure/build/` directory. Allfiles that are in this build directory are also available on the CDN. The namingconventions of the files in the `build/` directory follow these rules:* `[module]-core.css`: The minimal set of styles, ususally structural, that provide the base on which the rest of the module's styles build.* `[module]-nr.css`: Rollup of `[module]-core.css` + `[module].css` + `[module]-[feature].css` from the `src/[module]/` dir. This i

react-native-photo-browser - Local and remote media gallery with captions, selections and grid view support for react native

  •    Javascript

A full screen image gallery with captions, selections and grid view support for react-native. Layout and API design are inspired by great MWPhotoBrowser library. The component has both iOS and Android support.