responsive ViewPicker.tsx

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 5x
5x
 
5x
 
5x
 
 
 
 
1004x
1004x
 
 
 
 
 
 
5x
  import React, { memo, FunctionComponent } from 'react';
import Media, { MediaQueryObject, MultiQueryProps } from 'react-media';
 
import { MOBILE_MAX_WIDTH } from './breakpoints';
 
const queries = {
    print: 'print',
    mobile: `screen and (max-width: ${MOBILE_MAX_WIDTH}px)`,
};
 
const ViewPicker: FunctionComponent<Pick<MultiQueryProps<MediaQueryObject>, 'children'>> = ({ children }) => {
    return (
        <Media queries={ queries }>
            { children }
        </Media>
    );
};
 
export default memo(ViewPicker);