useMatchMedia( )

1// Define an object for different device types, each associated with a media
2// query string that describes the screen size ranges for those devices
3const devices = {
4    isMobile: '(max-width: 766px)',
5    isTablet: '(min-width: 767px) and (max-width: 1199px)',
6    isDesktop: '(min-width: 1200px)',
7};
8
9// Create an array by mapping over the values of the `devices` object,
10// to generate a `MediaQueryList` object for each media query string.
11// These objects are used to check if the document matches the media query
12const mediaQueryLists = Object.values(devices).map((query) => {
13    return window.matchMedia(query);
14});
15
16// Function to get an array of boolean values by mapping over `mediaQueryLists`,
17// where each boolean indicates whether the respective media query
18// currently matches the document state
19const getValues = (): boolean[] => {
20    return mediaQueryLists.map((list: MediaQueryList) => list.matches);
21};
22
23// Define the return type of the hook.
24// The keys represent device types, and the values indicate the match status for each device type
25type MatchMediaResult = Record<string, boolean>;
26
27const useMatchMedia = (): MatchMediaResult => {
28    const [values, setValues] = useState<boolean[]>(getValues);
29
30    useLayoutEffect(() => {
31        // Define the handler function that updates the state when the status of a media query changes
32        const handleChange = () => {
33            setValues(getValues());
34        };
35
36        // Attach an event listener for the `change` event to each `MediaQueryList`
37        // in `mediaQueryLists`, so that `handleChange` is called whenever the match
38        // status of a media query changes
39        mediaQueryLists.forEach((list) =>
40            list.addEventListener('change', handleChange)
41        );
42
43        // Return a cleanup function that removes the event listeners
44        // from each `MediaQueryList` when the component unmounts,
45        // ensuring there are no duplicate listeners
46        return () =>
47            mediaQueryLists.forEach((list) =>
48                list.removeEventListener('change', handleChange)
49            );
50    }, []);
51
52    // Create an object by reducing over the keys of devices,
53    // mapping each device type to its corresponding boolean value
54    // from the values array, which represents the match status
55    const deviceIndicators: MatchMediaResult = Object.keys(devices).reduce(
56        (acc, screen, index) => ({
57            ...acc,
58            [screen]: values[index],
59        }),
60        {}
61    );
62
63    // Return the object containing device indicators,
64    // which provide a boolean value for each device type indicating
65    // whether the current screen size matches the corresponding media query
66    return deviceIndicators;
67};
68
69export default useMatchMedia;
70

1const { isMobile, isTablet, isDesktop } = useMatchMedia();
2

1const Container: FC = () => {
2    // Destructure the values returned by the custom hook
3    const { isMobile, isTablet } = useMatchMedia();
4
5    return (
6        <Layer title="Container">
7            {
8                // Render different components based on the device type
9                isMobile ? (
10                    // If the device is mobile, render the `MobileComponent`
11                    <MobileComponent />
12                ) : // If the device is not mobile, check if it's a tablet
13                isTablet ? (
14                    // If it's, render the `TabletComponent`,
15                    <TabletComponent />
16                ) : (
17                    // otherwise, render the `DesktopComponent`
18                    <DesktopComponent />
19                )
20            }
21        </Layer>
22    );
23};
24

1const Container: FC = () => {
2    const { isMobile } = useMatchMedia();
3
4    return (
5        <Layer title="Container">
6            {
7                // Conditional rendering of menu component based on device type
8                isMobile ? <HamburgerMenu /> : <RegularMenu />
9            }
10        </Layer>
11    );
12};
13

1.container {
2    /* Styles for mobile devices */
3    /* Blocks are stacked vertically */
4    display: grid;
5    grid-template-columns: repeat(1, 1fr);
6    gap: 8px;
7    max-height: 320px;
8    overflow-y: auto;
9    padding: 16px 0;
10    width: 100%;
11}
12
13.tablet {
14    /* Additional styles for tablet devices */
15    /* Blocks are arranged in a 2-column grid */
16    grid-template-columns: repeat(2, 1fr);
17}
18
19.desktop {
20    /* Additional styles for desktop devices */
21    /* Blocks are arranged in a 3-column grid */
22    grid-template-columns: repeat(3, 1fr);
23}
24

1const items = loadData(6);
2
3const Container: FC = () => {
4    const { isTablet, isDesktop } = useMatchMedia();
5
6    // Determine the container class based on the device type.
7    // If the device is a desktop, set the container class to "desktop".
8    // If it's a tablet, set the container class to "tablet".
9    // otherwise (if it's a mobile device) keep it as "container".
10    const containerClass = isDesktop ? 'desktop' : isTablet ? 'tablet' : '';
11
12    return (
13        <Layer title="Container">
14            <Message>
15                Dynamic styling adapted to your device. Block positions adjust
16                seamlessly based on screen size.
17            </Message>
18            <div className="relative border-y-4 border-neutral-900 dark:border-neutral-100">
19                <div className={cn('container', containerClass)}>
20                    {items.map((item) => (
21                        <Square key={item.id}>
22                            <span className="font-monoBrand p-4 text-center text-2xl">
23                                {item.name}
24                            </span>
25                        </Square>
26                    ))}
27                </div>
28            </div>
29        </Layer>
30    );
31};
32