expo / Match Media
Licence: mit
Universal polyfill for match media API using Expo APIs on mobile
Stars: ✭ 95
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Match Media
Expo Dark Mode Switch
A beautiful React dark mode switch component for iOS, Android, and Web
Stars: ✭ 137 (+44.21%)
Mutual labels: expo, react-native-web, css-in-js
react-flappy-bird
A side-scroller where the player controls a bird, attempting to fly between columns of green pipes without hitting them.
Stars: ✭ 55 (-42.11%)
Mutual labels: react-native-web, expo
Responsive Bootstrap Toolkit
Responsive Bootstrap Toolkit allows for easy breakpoint detection in JavaScript
Stars: ✭ 364 (+283.16%)
Mutual labels: responsive, breakpoint
use-breakpoint
React `useBreakpoint` hook to have different values for a variable based on a breakpoints.
Stars: ✭ 17 (-82.11%)
Mutual labels: responsive, breakpoint
Expo Spotify
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app
Stars: ✭ 287 (+202.11%)
Mutual labels: expo, react-native-web
react-native-expo-web
All-in-one React Native project (Expo + react-native-web)
Stars: ✭ 16 (-83.16%)
Mutual labels: react-native-web, expo
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. 💅
Stars: ✭ 428 (+350.53%)
Mutual labels: css-in-js, breakpoint
Examples
Example projects that demonstrate how to use Expo APIs and integrate Expo with other popular tools
Stars: ✭ 747 (+686.32%)
Mutual labels: expo, react-native-web
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+7401.05%)
Mutual labels: responsive, css-in-js
pro-chat
Full featured chat app built with 💙 Expo & Firebase 🔥
Stars: ✭ 24 (-74.74%)
Mutual labels: react-native-web, expo
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools.
Stars: ✭ 33 (-65.26%)
Mutual labels: responsive, css-in-js
react-native-responsive-query
Responsive style hook for react native.
Stars: ✭ 43 (-54.74%)
Mutual labels: responsive, react-native-web
react-matchmedia-connect
Higher order components for matchMedia
Stars: ✭ 49 (-48.42%)
Mutual labels: responsive, breakpoint
Instagram
A universal instagram clone built with Expo
Stars: ✭ 258 (+171.58%)
Mutual labels: expo, react-native-web
Snackui
SnackUI 🍑 - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: ✭ 55 (-42.11%)
Mutual labels: react-native-web, css-in-js
apple-notes
A clone of the Apple Notes app but made universally with Expo
Stars: ✭ 53 (-44.21%)
Mutual labels: react-native-web, expo
breaking-point
BREAKING-POINT lets you quickly define and subscribe to screen (i.e. window) breakpoints in your re-frame application
Stars: ✭ 36 (-62.11%)
Mutual labels: responsive, breakpoint
React Native Web
React Native Components and APIs for the Web
Stars: ✭ 19,563 (+20492.63%)
Mutual labels: react-native-web, css-in-js
👋 Welcome to
@expo/match-media
Universal polyfill for match media API using Expo APIs on mobile
TL;DR: Demo
🏁 Setup
Install @expo/match-media in your project.
yarn add @expo/match-media
If you're using a React Native app that wasn't bootstrapped with the
expo-clithen you'll need to install and link theexpomodule to use this package.
⚽️ Usage
Import the polyfill at the top of your file before using the window.matchMedia API.
import '@expo/match-media';
// use the match media API
What this does
- In the browser: Nothing
- In React Native apps: Polyfills the
matchMediaAPI so you can use awesome libraries likereact-responsive.
License
The Expo source code is made available under the MIT license. Some of the dependencies are licensed differently, with the BSD license, for example.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].