کوئری مدیا در React به روش برنامه نویسی شده — راهنمای کاربردی

1window.matchMedia('(max-width: 100px)')

1const mql = window.matchMedia(mediaQueryString);

1mql.matches //returns true or false

1const listenerFunc = () => {
2// Listening logic goes here
3};
4mql.addListener(listenerFunc);

1const queries = {
2xs: '(max-width: 320px)', //query for xs devices
3sm: '(max-width: 720px)',
4md: '(max-width: 1024px)'
5}

1{
2xs: false,
3sm: true,
4md: true
5}
6// here our matches are sm and md

1const mediaQueryLists = {}; //Add all MediaQueryList object here.
2const keys = Object.keys(queries);
3const matches = {}; //contains initial query matches
4
5keys.forEach(media => {
6if (typeof queries[media] === 'string') {
7/* Adding MediaQueryList object for each and every query to
8  mediaQueryLists object
9 */
10mediaQueryLists[media] = window.matchMedia(queries[media]);
11
12//Get initial matches of each query
13matches[media] = mediaQueryLists[media].matches 
14} else {
15matches[media] = false
16}
17});

1 const handleQueryListener = () => {
2      const updatedMatches = keys.reduce((acc, media) => {
3        acc[media] = !!(mediaQueryLists[media] && mediaQueryLists[media].matches);
4        return acc;
5      }, {})
6      console.log('Matches', updatedMatches)
7    }
8 
9 keys.forEach(media => {
10        if(typeof queries[media] === 'string') {
11          mediaQueryLists[media].addListener(handleQueryListener)
12        }
13      });

1const useBreakpoint = (queries) => {
2  const [queryMatch, setQueryMatch] = useState(null);
3
4  useEffect(() => {
5    const mediaQueryLists = {};
6    const keys = Object.keys(queries);
7    
8    // To check whether event listener is attached or not
9    let isAttached = false;
10
11    const handleQueryListener = () => {
12      const updatedMatches = keys.reduce((acc, media) => {
13        acc[media] = !!(mediaQueryLists[media] && mediaQueryLists[media].matches);
14        return acc;
15      }, {})
16      //Setting state to the updated matches 
17      // when document either starts or stops matching a query
18      setQueryMatch(updatedMatches)
19    }
20
21    if (window && window.matchMedia) {
22      const matches = {};
23      keys.forEach(media => {
24        if (typeof queries[media] === 'string') {
25          mediaQueryLists[media] = window.matchMedia(queries[media]);
26          matches[media] = mediaQueryLists[media].matches
27        } else {
28          matches[media] = false
29        }
30      });
31      //Setting state to initial matching queries
32      setQueryMatch(matches);
33      isAttached = true;
34      keys.forEach(media => {
35        if(typeof queries[media] === 'string') {
36          mediaQueryLists[media].addListener(handleQueryListener);
37        }
38      });
39    }
40
41    return () => {
42    //If event listener is attached then remove it when deps change
43      if(isAttached) {
44        keys.forEach(media => {
45          if(typeof queries[media] === 'string') {
46            mediaQueryLists[media].removeListener(handleQueryListener);
47          }
48        });
49      }
50    }
51  }, [queries]);
52
53  return queryMatch;
54}
55
56export default useBreakpoint;

1import useBreakpoint from './useBreakpointext'
2const queries = {
3  xs: '(max-width: 320px)',
4  md: '(max-width: 720px)',
5  lg: '(max-width: '1024px)',
6}
7const App = () => {
8  const matchPoints = useBreakpoint(queries);
9  //Rest Code goes here
10}

1const defaultValue = {};
2const BreakpointContext = createContext(defaultValue);

1import React, {
2  useState, 
3  createContext,
4  useContext} from 'react';
5
6const defaultValue = {}
7
8const BreakpointContext = createContext(defaultValue);
9
10const BreakpointProvider = ({children, queries}) => {
11  //State in which we maintain our matching query
12  const [queryMatch, setQueryMatch] = useState({});
13  
14  //Our Logic to get matching query goes here
15
16  return (
17    <BreakpointContext.Provider value={queryMatch}>
18      {children}
19    </BreakpointContext.Provider>
20  )
21
22}
23
24function useBreakpoint() {
25  const context = useContext(BreakpointContext);
26  if(context === defaultValue) {
27    throw new Error('useBreakpoint must be used within BreakpointProvider');
28  }
29  return context;
30}
31export {useBreakpoint, BreakpointProvider};

1import React, {
2  useState,
3  useEffect,
4  createContext,
5  useContext} from 'react';
6
7const defaultValue = {}
8
9const BreakpointContext = createContext(defaultValue);
10
11const BreakpointProvider = ({children, queries}) => {
12  const [queryMatch, setQueryMatch] = useState({});
13
14  useEffect(() => {
15    const mediaQueryLists = {};
16    const keys = Object.keys(queries);
17    let isAttached = false;
18
19    const handleQueryListener = () => {
20      const updatedMatches = keys.reduce((acc, media) => {
21        acc[media] = !!(mediaQueryLists[media] && mediaQueryLists[media].matches);
22        return acc;
23      }, {})
24      setQueryMatch(updatedMatches)
25    }
26
27    if (window && window.matchMedia) {
28      const matches = {};
29      keys.forEach(media => {
30        if (typeof queries[media] === 'string') {
31          mediaQueryLists[media] = window.matchMedia(queries[media]);
32          matches[media] = mediaQueryLists[media].matches
33        } else {
34          matches[media] = false
35        }
36      });
37      setQueryMatch(matches);
38      isAttached = true;
39      keys.forEach(media => {
40        if(typeof queries[media] === 'string') {
41          mediaQueryLists[media].addListener(handleQueryListener)
42        }
43      });
44    }
45
46    return () => {
47      if(isAttached) {
48        keys.forEach(media => {
49          if(typeof queries[media] === 'string') {
50            mediaQueryLists[media].removeListener(handleQueryListener)
51          }
52        });
53      }
54    }
55  }, [queries]);
56
57  return (
58    <BreakpointContext.Provider value={queryMatch}>
59      {children}
60    </BreakpointContext.Provider>
61  )
62
63}
64
65function useBreakpoint() {
66  const context = useContext(BreakpointContext);
67  if(context === defaultValue) {
68    throw new Error('useBreakpoint must be used within BreakpointProvider');
69  }
70  return context;
71}
72export {useBreakpoint, BreakpointProvider};

1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './App';
4import {BreakpointProvider} from './breakpoint'
5
6
7
8const queries = {
9  xs: '(max-width: 320px)',
10  sm: '(max-width: 720px)',
11  md: '(max-width: 1024px)',
12  or: '(orientation: portrait)', // we can check orientation also
13}
14
15ReactDOM.render(
16<BreakpointProvider queries={queries}>
17  <App />
18</BreakpointProvider>, document.getElementById('root'));

1import React from 'react'
2import {useBreakpoint} from './breakpoint.js'
3
4const Usage = () => {
5  const breakpoints = useBreakpoint();
6  
7  const matchingList = Object.keys(breakpoints).map(media => (
8    <li key={media}>{media} ---- {breakpoints[media] ? 'Yes' : 'No'}</li>
9  ))
10  
11  return (
12    <ol>
13      {matchingList}
14    </ol>
15  )
16}