@bitrise/bitkit 13.214.0 → 13.215.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.214.0",
+  "version": "13.215.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Provider/Provider.tsx

@@ -6,6 +6,7 @@ import '@fontsource/figtree/600.css';
 import '@fontsource/figtree/700.css';
 import '@fontsource/source-code-pro/400.css';
 
+import { ResponsiveProvider } from '../../hooks/useResponsive';
 import theme from '../../theme';
 
 type ProviderProps = {
@@ -33,7 +34,7 @@ const Provider = ({ children, toastOptions }: ProviderProps) => {
         },
       }}
     >
-      {children}
+      <ResponsiveProvider>{children}</ResponsiveProvider>
     </ChakraProvider>
   );
 };

package/src/hooks/{useResponsive.ts → useResponsive.tsx}

@@ -1,3 +1,4 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
 import { useMediaQuery } from '@chakra-ui/react';
 import { breakpoints } from '../theme';
 import { BREAKPOINTS } from '../types/bitkit';
@@ -16,9 +17,19 @@ const mediaQueries = [
   `(min-width: ${breakpoints[BREAKPOINTS.WIDEDESKTOP]})`,
 ];
 
-const useResponsive = () => {
+const ResponsiveContext = createContext({ isDesktop: false, isMobile: false, isTablet: false, isWideDesktop: false });
+export const ResponsiveProvider = ({ children }: { children: ReactNode }) => {
   const [isMobile, isTablet, isDesktop, isWideDesktop] = useMediaQuery(mediaQueries);
-  return { isDesktop, isMobile, isTablet, isWideDesktop };
+  const context = useMemo(
+    () => ({ isDesktop, isMobile, isTablet, isWideDesktop }),
+    [isMobile, isTablet, isDesktop, isWideDesktop],
+  );
+
+  return <ResponsiveContext.Provider value={context}>{children}</ResponsiveContext.Provider>;
+};
+
+const useResponsive = () => {
+  return useContext(ResponsiveContext);
 };
 
 export default useResponsive;