import { useContext } from 'react';
import Context from '../Context';

const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];

export default function useMedia() {
  const viewport = useContext(Context);

  return {
    up(point) {
      return breakpoints.indexOf(viewport) >= breakpoints.indexOf(point);
    },
    down(point) {
      return breakpoints.indexOf(viewport) <= breakpoints.indexOf(point);
    },
    only(point) {
      return viewport === point;
    },
    between(lower, upper) {
      return this.up(lower) && this.down(upper);
    },
  };
}

@@ -12,16 +12,37 @@
 eContext
+, useState, useEffect
  %7D from 
@@ -50,16 +50,87 @@
 react';%0A
+import Dimensions from 'react-native-web/dist/cjs/exports/Dimensions';%0A
 import C
@@ -161,16 +161,44 @@
 ;%0A%0Aconst
+ calculateViewport = (width,
  breakpo
@@ -205,41 +205,243 @@
 ints
+)
  =
- %5B'xs', 'sm', 'md', 'lg',
+%3E %7B%0A  if (width %3C breakpoints.sm) %7B%0A    return 'xs';%0A  %7D%0A  if (width %3C breakpoints.md) %7B%0A    return 'sm';%0A  %7D%0A  if (width %3C breakpoints.lg) %7B%0A    return 'md';%0A  %7D%0A  if (width %3C breakpoints.xl) %7B%0A    return 'lg';%0A  %7D%0A  return
  'xl'
-%5D
+;%0A%7D
 ;%0A%0Ae
@@ -484,24 +484,44 @@
   const 
-v
+%7B ssrV
 iewport
+, breakpoints %7D
  = useCo
@@ -535,16 +535,538 @@
 ontext);
+%0A  const %5Bviewport, setViewport%5D = useState(ssrViewport);%0A%0A  useEffect(() =%3E %7B%0A    const handleChange = dimensions =%3E %7B%0A      const nextViewport = calculateViewport(%0A        dimensions.window.width,%0A        breakpoints,%0A      );%0A%0A      if (viewport !== nextViewport) %7B%0A        setViewport(nextViewport);%0A      %7D%0A    %7D;%0A    Dimensions.addEventListener('change', handleChange);%0A%0A    return () =%3E %7B%0A      Dimensions.removeEventListener('change', handleChange);%0A    %7D;%0A  %7D);%0A%0A  const breakpointKeys = Object.keys(breakpoints);
 %0A%0A  retu
@@ -1101,32 +1101,35 @@
 eturn breakpoint
+Key
 s.indexOf(viewpo
@@ -1137,32 +1137,35 @@
 t) %3E= breakpoint
+Key
 s.indexOf(point)
@@ -1206,32 +1206,35 @@
 eturn breakpoint
+Key
 s.indexOf(viewpo
@@ -1250,16 +1250,19 @@
 eakpoint
+Key
 s.indexO

Update useMedia hook