Skip to content

Commit 76199ca

Browse files
Viraj-10Viraj-10
committed
feat: added docs for the hook
1 parent a9db0b8 commit 76199ca

File tree

5 files changed

+333
-3
lines changed

5 files changed

+333
-3
lines changed

‎example/storybook-nativewind/.storybook/preview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export const parameters = {
8585
['Fab', 'Skeleton'],
8686
],
8787
'Hooks',
88-
['useBreakPointValue'],
88+
['useBreakPointValue', 'useMediaQuery'],
8989
'Apps',
9090
['Dashboard App', 'Starter Kit', 'Storybook App'],
9191
'Guides',

‎example/storybook-nativewind/src/hooks/useBreakPointValue/index.nw.stories.mdx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ This is an illustration of **useBreakPointValue** hook.
3838
<CodePreview
3939
_rendererWrapper={{ px: '$2.5' }}
4040
showComponentRenderer={true}
41-
showArgsController={true}
41+
showArgsController={false}
4242
metaData={{
4343
code: `
4444
function App(){
@@ -155,7 +155,7 @@ This section provides a comprehensive reference list for the hook arguments, det
155155
<Table.TText>Arguments</Table.TText>
156156
</Table.TH>
157157
<Table.TH>
158-
<Table.TText>Value</Table.TText>
158+
<Table.TText>Type</Table.TText>
159159
</Table.TH>
160160
<Table.TH>
161161
<Table.TText>Default</Table.TText>
@@ -180,3 +180,7 @@ This section provides a comprehensive reference list for the hook arguments, det
180180
</Table>
181181
</TableContainer>
182182
</>
183+
184+
### Return Value
185+
186+
The **useBreakPointValue** hook returns value, based on given break point value object.

‎example/storybook-nativewind/src/hooks/useMediaQuery/index.nw.stories.mdx

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
---
2+
title: gluestack-ui Alert Component | Installation, Usage, and API
3+
4+
description: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
5+
6+
pageTitle: Alert
7+
8+
pageDescription: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
9+
10+
showHeader: true
11+
---
12+
13+
import { Meta } from '@storybook/addon-docs';
14+
15+
<Meta title="with-nativewind/Hooks/UseMediaQueryBasic" />
16+
17+
import {
18+
Box,
19+
Text,
20+
Heading,
21+
Icon,
22+
} from '../../core-components/nativewind';
23+
import { Smartphone, Tablet, Laptop, Tv } from 'lucide-react-native';
24+
import { useMediaQuery } from '../../core-components/hooks/use-media-query.ts';
25+
import { transformedCode } from '../../utils';
26+
import {
27+
AppProvider,
28+
CodePreview,
29+
Table,
30+
InlineCode,
31+
TableContainer,
32+
Tabs
33+
} from '@gluestack/design-system';
34+
import { CollapsibleCode } from '@gluestack/design-system';
35+
import Wrapper from '../../core-components/nativewind/Wrapper';
36+
37+
**useMediaQuery** is a custom hook that helps detect matches between a single media query or multiple media queries. React Native does not natively support media queries, so useMediaQuery is still limited.
38+
39+
<Wrapper>
40+
<CodePreview
41+
_rendererWrapper={{ px: '$2.5' , height:300}}
42+
showComponentRenderer={true}
43+
showArgsController={false}
44+
metaData={{
45+
code: `
46+
function App(){
47+
const [isMobile, isTablet, isSmallScreen, isLargeScreen] = useMediaQuery([
48+
{
49+
maxWidth: 480,
50+
},
51+
{
52+
minWidth: 481,
53+
maxWidth: 768,
54+
},
55+
{
56+
minWidth: 769,
57+
maxWidth: 1300,
58+
},
59+
{
60+
minWidth: 1301,
61+
},
62+
]);
63+
return (
64+
<Box className="justify-center items-center gap-4">
65+
<Heading>useMediaQuery</Heading>
66+
<Text>Resize your browser windows to see changes.</Text>
67+
<Box className="flex-row flex-wrap gap-8 justify-center">
68+
<Box
69+
className={
70+
'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
71+
(isMobile ? 'border-green-500 bg-green-50' : '')
72+
}
73+
>
74+
<Icon as={Smartphone} size={'xs'} />
75+
<Text size="sm">Small</Text>
76+
</Box>
77+
<Box
78+
className={
79+
'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
80+
(isTablet ? 'border-green-500 bg-green-50' : '')
81+
}
82+
>
83+
<Icon as={Tablet} />
84+
<Text size="sm">medium</Text>
85+
</Box>
86+
<Box
87+
className={
88+
'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
89+
(isSmallScreen ? 'border-green-500 bg-green-50' : '')
90+
}
91+
>
92+
<Icon as={Laptop} />
93+
<Text size="sm">Large</Text>
94+
</Box>
95+
<Box
96+
className={
97+
'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
98+
(isLargeScreen ? 'border-green-500 bg-green-50' : '')
99+
}
100+
>
101+
<Icon as={Tv} />
102+
<Text size="sm">Extra Large</Text>
103+
</Box>
104+
</Box>
105+
</Box>
106+
);
107+
}
108+
`,
109+
transformCode: (code) => {
110+
return transformedCode(code, 'function', 'App');
111+
},
112+
scope: {
113+
Box,
114+
Text,
115+
Heading,
116+
Icon,
117+
Smartphone,
118+
Tablet,
119+
Laptop,
120+
Tv,
121+
useMediaQuery,
122+
Wrapper,
123+
},
124+
argsType: {
125+
},
126+
}}
127+
/>
128+
</Wrapper>
129+
130+
<br />
131+
132+
## Installation
133+
134+
<Tabs value="cli" type="section">
135+
<Tabs.TabList>
136+
<Tabs.Tab value="cli">
137+
<Tabs.TabTitle>CLI</Tabs.TabTitle>
138+
</Tabs.Tab>
139+
<Tabs.Tab value="manual">
140+
<Tabs.TabTitle>Manual</Tabs.TabTitle>
141+
</Tabs.Tab>
142+
</Tabs.TabList>
143+
<Tabs.TabPanels>
144+
<Tabs.TabPanel value="cli">
145+
<>
146+
147+
### Run the following command:
148+
```bash
149+
npx gluestack-ui add useMediaQuery
150+
```
151+
</>
152+
</Tabs.TabPanel>
153+
<Tabs.TabPanel value="manual">
154+
<>
155+
156+
157+
### Step 1: Copy and paste the following code into your project.
158+
159+
<CollapsibleCode>
160+
161+
```jsx
162+
%%-- File: core-components/hooks/use-media-query.ts --%%
163+
```
164+
165+
</CollapsibleCode>
166+
167+
### Step 2: Update the import paths to match your project setup.
168+
</>
169+
</Tabs.TabPanel>
170+
</Tabs.TabPanels>
171+
</Tabs>
172+
173+
## API Reference
174+
175+
To use this component in your project, include the following import statement in your file.
176+
177+
```jsx
178+
import { useMediaQuery } from '@/components/hooks/use-media-query';
179+
```
180+
181+
```jsx
182+
const flexDir = useMediaQuery({
183+
minWidth: 480,
184+
maxWidth: 1280,
185+
});
186+
```
187+
188+
### Hook Arguments
189+
190+
This section provides a comprehensive reference list for the hook arguments, detailing descriptions, properties, types, and default behavior for easy project integration.
191+
192+
#### useBreakPointValue
193+
194+
<>
195+
<TableContainer>
196+
<Table>
197+
<Table.THead>
198+
<Table.TR>
199+
<Table.TH>
200+
<Table.TText>Arguments</Table.TText>
201+
</Table.TH>
202+
<Table.TH>
203+
<Table.TText>Type</Table.TText>
204+
</Table.TH>
205+
<Table.TH>
206+
<Table.TText>Default</Table.TText>
207+
</Table.TH>
208+
</Table.TR>
209+
</Table.THead>
210+
<Table.TBody>
211+
<Table.TR>
212+
<Table.TD>
213+
<Table.TText>
214+
<InlineCode>1</InlineCode>
215+
</Table.TText>
216+
</Table.TD>
217+
<Table.TD>
218+
<Table.TText>{`{ [key: maxHeight | maxWidth | minHeight | minWidth | orientation] : value } \nArray<{ [key: maxHeight | maxWidth | minHeight | minWidth | orientation] : value }`}></Table.TText>
219+
</Table.TD>
220+
<Table.TD>
221+
<Table.TText>-</Table.TText>
222+
</Table.TD>
223+
</Table.TR>
224+
</Table.TBody>
225+
</Table>
226+
</TableContainer>
227+
</>
228+
229+
230+
### Return Value
231+
232+
The **useMediaQuery** hook returns an array of booleans, indicating whether the given query matches or queries match.
233+
234+
### Why an array?
235+
236+
**useMediaQuery** accepts both an object and an array of object, but will always return an array. This way, you can combine multiple media queries which will be individually matched in a single call. The options to use are still limited to maxWidth, minWidth, maxHeight, minHeight, orientation.

‎example/storybook-nativewind/src/hooks/useMediaQuery/useMediaQuery.stories.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { ComponentMeta } from '@storybook/react-native';
2+
import UseMediaQueryBasic from './useMediaQuery';
3+
4+
const UseMediaQueryBasicMeta: ComponentMeta<typeof UseMediaQueryBasic> = {
5+
title: 'stories/UseMediaQueryBasic',
6+
component: UseMediaQueryBasic,
7+
// metaInfo is required for figma generation
8+
// @ts-ignore
9+
metaInfo: {},
10+
argTypes: {},
11+
args: {},
12+
};
13+
14+
export default UseMediaQueryBasicMeta;
15+
16+
export { UseMediaQueryBasic };

‎example/storybook-nativewind/src/hooks/useMediaQuery/useMediaQuery.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
import { Text } from '@/components/ui/text';
3+
import { Heading } from '@/components/ui/heading';
4+
import { Box } from '@/components/ui/box';
5+
import { Icon } from '@/components/ui/icon';
6+
import { useMediaQuery } from '@/components/hooks/use-media-query';
7+
import { Smartphone, Tablet, Laptop, Tv } from 'lucide-react-native';
8+
const UseMediaQueryBasic = ({ ...props }: any) => {
9+
const [isMobile, isTablet, isSmallScreen, isLargeScreen] = useMediaQuery([
10+
{
11+
maxWidth: 480,
12+
},
13+
{
14+
minWidth: 481,
15+
maxWidth: 768,
16+
},
17+
{
18+
minWidth: 769,
19+
maxWidth: 1300,
20+
},
21+
{
22+
minWidth: 1301,
23+
},
24+
]);
25+
26+
return (
27+
<Box {...props} className={`justify-center items-center gap-4`}>
28+
<Heading>useMediaQuery</Heading>
29+
<Text>Resize your browser windows to see changes.</Text>
30+
<Box className="flex-row flex-wrap gap-8 justify-center">
31+
<Box
32+
className={
33+
'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
34+
(isMobile ? 'border-green-500 bg-green-50' : '')
35+
}
36+
>
37+
<Icon as={Smartphone} size={'xs'} />
38+
<Text size="sm">Small</Text>
39+
</Box>
40+
<Box
41+
className={
42+
'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
43+
(isTablet ? 'border-green-500 bg-green-50' : '')
44+
}
45+
>
46+
<Icon as={Tablet} />
47+
<Text size="sm">medium</Text>
48+
</Box>
49+
<Box
50+
className={
51+
'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
52+
(isSmallScreen ? 'border-green-500 bg-green-50' : '')
53+
}
54+
>
55+
<Icon as={Laptop} />
56+
<Text size="sm">Large</Text>
57+
</Box>
58+
<Box
59+
className={
60+
'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
61+
(isLargeScreen ? 'border-green-500 bg-green-50' : '')
62+
}
63+
>
64+
<Icon as={Tv} />
65+
<Text size="sm">Extra Large</Text>
66+
</Box>
67+
</Box>
68+
</Box>
69+
);
70+
};
71+
72+
UseMediaQueryBasic.description =
73+
'This is a basic Alert component example. Alerts are used to communicate a state that affects a system, feature or page';
74+
export default UseMediaQueryBasic;

0 commit comments

Comments
 (0)