Merge pull request #511 from gluestack/release/@gluestack-style/react…

…@1.0.11

Release/@gluestack style/[email protected]

example/storybook/.storybook/preview.js

@@ -48,7 +48,7 @@ export const parameters = {
           'CSS Variables Plugin',
         ],
         'hooks',
-        ['useBreakPointValue', 'useColorMode', 'useToken'],
+        ['useBreakPointValue', 'useMedia', 'useColorMode', 'useToken'],
         'configuration',
         [
           'Theme Tokens',

example/storybook/src/hooks/useMedia/index.stories.mdx

@@ -0,0 +1,46 @@
+---
+title: useTheme | gluestack-style
+description: useTheme
+showHeader: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="hooks/useMedia" />
+
+# useMedia
+
+**useMedia** is a custom hook that returns the breakpoints object with boolean value if your current screen size is a particular breakpoint or not. It is also responsive to window resizing and returning the appropriate value according to the new window size.
+
+### Import
+
+To use the `useMedia` in your project, import `useMedia` from `@gluestack-style/react`. as Demonstrated below.
+
+```jsx
+import { useMedia } from '@gluestack-style/react';
+```
+
+```jsx
+const MediaExample = () => {
+  const media = useMedia();
+
+  return (
+    <View
+      style={{
+        flexDirection: media.lg ? 'row' : 'column',
+        gap: 10,
+      }}
+    >
+      <StyledBox>
+        <StyledText>Universal</StyledText>
+      </StyledBox>
+      <StyledBox>
+        <StyledText>Performant</StyledText>
+      </StyledBox>
+      <StyledBox>
+        <StyledText>Accessible</StyledText>
+      </StyledBox>
+    </View>
+  );
+};
+```

example/storybook/src/hooks/useMedia/useMedia.stories.tsx

@@ -0,0 +1,11 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import { MediaHookStory } from './useMedia';
+
+const MediaQueryMeta: ComponentMeta<typeof MediaHookStory> = {
+  title: 'hooks/stories/useMedia',
+  component: MediaHookStory,
+};
+
+export { MediaHookStory } from './useMedia';
+
+export default MediaQueryMeta;

example/storybook/src/hooks/useMedia/useMedia.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  useMediaQuery,
+  styled,
+  useBreakpointValue,
+  useMedia,
+} from '@gluestack-style/react';
+import Wrapper from '../../components/Wrapper';
+import { View, Text } from 'react-native';
+
+const StyledBox = styled(View, {
+  w: 100,
+  h: 100,
+  justifyContent: 'center',
+  alignItems: 'center',
+  bg: '$cyan500',
+  rounded: '$md',
+}) as any;
+
+const StyledText = styled(Text, {
+  color: '$white',
+  fontSize: '$md',
+});
+
+export const MediaHookStory = () => {
+  return (
+    <Wrapper>
+      <BreakPointValue />
+    </Wrapper>
+  );
+};
+
+const BreakPointValue = () => {
+  const media = useMedia();
+
+  return (
+    <View
+      style={{
+        flexDirection: media.lg ? 'row' : 'column',
+        gap: 10,
+      }}
+    >
+      <StyledBox>
+        <StyledText>Universal</StyledText>
+      </StyledBox>
+      <StyledBox>
+        <StyledText>Performant</StyledText>
+      </StyledBox>
+      <StyledBox>
+        <StyledText>Accessible</StyledText>
+      </StyledBox>
+    </View>
+  );
+};
+export { useMediaQuery };
+export default MediaHookStory;

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 1.0.11
+
+### Patch Changes
+
+- - added `useMedia` hook [PR](https://github.com/gluestack/gluestack-style/pull/509)
+
 ## 1.0.10
 
 ### Patch Changes

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "keywords": [
     "React Native",
     "Next.js",

packages/react/src/hooks/index.ts

@@ -3,3 +3,4 @@ export { useMediaQuery };
 export { useBreakpointValue } from './useBreakpointValue';
 export { useToken } from './useToken';
 export { useColorMode } from './useColorMode';
+export { useMedia } from './useMedia';

packages/react/src/hooks/useMedia.ts

@@ -0,0 +1,26 @@
+import { useWindowDimensions } from 'react-native';
+import { isValidBreakpoint } from '../generateStylePropsFromCSSIds';
+import { useStyled } from '../StyledProvider';
+import type { GSConfig } from '../types';
+
+type BreakPointValue = Partial<{
+  [key in keyof GSConfig['tokens']['breakpoints']]: boolean;
+}>;
+
+export const useMedia = (): BreakPointValue => {
+  const theme = useStyled();
+  const { width } = useWindowDimensions();
+  const mediaQueries = theme?.config?.tokens?.mediaQueries;
+
+  const breakpoints: any = {};
+
+  Object.keys(mediaQueries).forEach((currentBreakPoint: any) => {
+    breakpoints[currentBreakPoint] = isValidBreakpoint(
+      theme?.config,
+      mediaQueries[currentBreakPoint],
+      width
+    );
+  });
+
+  return breakpoints;
+};