From a54ebc348b6d0eb87a55de66e173e288abaf0e13 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 31 Oct 2023 12:47:18 +0530 Subject: [PATCH 1/3] feat: use media hook --- packages/react/src/hooks/index.ts | 1 + packages/react/src/hooks/useMedia.ts | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 packages/react/src/hooks/useMedia.ts diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts index 73f9b2f15..11d9d75ad 100644 --- a/packages/react/src/hooks/index.ts +++ b/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'; diff --git a/packages/react/src/hooks/useMedia.ts b/packages/react/src/hooks/useMedia.ts new file mode 100644 index 000000000..25ac28b22 --- /dev/null +++ b/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; +}; From 1a60bbb33d302fec72e48753ddac097347487202 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 31 Oct 2023 13:20:18 +0530 Subject: [PATCH 2/3] feat: use media hook docs --- example/storybook/.storybook/preview.js | 2 +- .../src/hooks/useMedia/index.stories.mdx | 46 +++++++++++++++ .../src/hooks/useMedia/useMedia.stories.tsx | 11 ++++ .../storybook/src/hooks/useMedia/useMedia.tsx | 56 +++++++++++++++++++ 4 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 example/storybook/src/hooks/useMedia/index.stories.mdx create mode 100644 example/storybook/src/hooks/useMedia/useMedia.stories.tsx create mode 100644 example/storybook/src/hooks/useMedia/useMedia.tsx diff --git a/example/storybook/.storybook/preview.js b/example/storybook/.storybook/preview.js index 15f32f0e2..27508f01f 100644 --- a/example/storybook/.storybook/preview.js +++ b/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', diff --git a/example/storybook/src/hooks/useMedia/index.stories.mdx b/example/storybook/src/hooks/useMedia/index.stories.mdx new file mode 100644 index 000000000..10e3e4ede --- /dev/null +++ b/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'; + + + +# 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 ( + + + Universal + + + Performant + + + Accessible + + + ); +}; +``` diff --git a/example/storybook/src/hooks/useMedia/useMedia.stories.tsx b/example/storybook/src/hooks/useMedia/useMedia.stories.tsx new file mode 100644 index 000000000..a9270def1 --- /dev/null +++ b/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 = { + title: 'hooks/stories/useMedia', + component: MediaHookStory, +}; + +export { MediaHookStory } from './useMedia'; + +export default MediaQueryMeta; diff --git a/example/storybook/src/hooks/useMedia/useMedia.tsx b/example/storybook/src/hooks/useMedia/useMedia.tsx new file mode 100644 index 000000000..9ac6c8c09 --- /dev/null +++ b/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 ( + + + + ); +}; + +const BreakPointValue = () => { + const media = useMedia(); + + return ( + + + Universal + + + Performant + + + Accessible + + + ); +}; +export { useMediaQuery }; +export default MediaHookStory; From c108e55b7fc3ce9c3402b564d3d9c01769e90165 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 31 Oct 2023 13:23:25 +0530 Subject: [PATCH 3/3] v1.0.11 --- packages/react/CHANGELOG.md | 6 ++++++ packages/react/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 0caade931..05688c4ce 100644 --- a/packages/react/CHANGELOG.md +++ b/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 diff --git a/packages/react/package.json b/packages/react/package.json index 011410b46..bd5369b9d 100644 --- a/packages/react/package.json +++ b/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",