feat(visible): show an element only in a specific breakpoint

src/components/Visible/Visible.tsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect, Fragment } from 'react';
+import { withTheme } from 'emotion-theming';
+
+import { Types } from '../../types';
+import { getBreakpoint } from '../../utils/getBreakpoint';
+
+function Visible({
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  theme,
+  children,
+}: Types.StyleProps & Types.VisibleProps) {
+  const [{ screen }, setState] = useState({ screen: 'xs' });
+
+  useEffect(() => {
+    const setScreen = () => {
+      const currentScreen = getBreakpoint(theme);
+
+      if (currentScreen !== screen) {
+        setState({
+          screen: currentScreen,
+        });
+      }
+    };
+
+    setScreen();
+
+    //SSR typecheck
+    if (typeof window !== 'undefined') {
+      window.addEventListener('orientationchange', setScreen, false);
+      window.addEventListener('resize', setScreen, false);
+    }
+
+    return () => {
+      window.removeEventListener('orientationchange', setScreen);
+      window.removeEventListener('resize', setScreen);
+    };
+  }, [theme, screen]);
+
+  const isVisible = () => {
+    switch (screen) {
+      case 'xs':
+        return xs;
+
+      case 'sm':
+        return sm;
+
+      case 'md':
+        return md;
+
+      case 'lg':
+        return lg;
+
+      case 'xl':
+        return xl;
+    }
+  };
+
+  return isVisible() ? <Fragment>{children}</Fragment> : null;
+}
+
+export default withTheme(Visible);

src/components/Visible/index.ts

@@ -0,0 +1 @@
+export { default as Visible } from './Visible';