git.iko.soy/bridge
on 703ff86 help sign in
bridge/src/lib/MediaQuery.jsx
24 lines 684 B history raw
1import React from 'react';
3import { createContext, useContext } from 'react';
4import useMedia from './useMedia';
6// sync with //indigo/indigo/css/src/lib/_breakpoints.scss
7const BREAKPOINTS = [
8 '(min-width: 550px)', // ns
9 '(min-width: 750px)', // md
10 '(min-width: 960px)', // lg
11];
13export const MediaQueryContext = createContext(null);
14// provide the index to consumers so they can easily index an array
15export const MediaQueryProvider = ({ children }) => (
16 <MediaQueryContext.Provider value={useMedia(BREAKPOINTS, [0, 1, 2], 0)}>
17 {children}
18 </MediaQueryContext.Provider>
19);
21// Hook version
22export function useMediaQuery() {
23 return useContext(MediaQueryContext);