You can install using:
yarn add media-hooks
// or
npm install media-hooks
Media hooks provides two ways to use.
Use provider with patterns. Current support one operator (AND | OR).
App.js
import MediaProvider from 'media-hooks';
const App = () => {
const patterns = {
mobile: '(max-width: 768px)', // or { minWidth: 768 }
tablet: '(min-width: 769px) and (max-width: 1023px)', // or { minWidth: 769, operator: 'and', maxWidth: 1023 }
desktop: '(min-width: 1024px)' // or { maxWidth: 1024 }
}
return (
<MediaProvider patterns={patterns}>
<Component />
</MediaProvider>
);
}
export default App;
Component.js
import { useMedia } from 'media-hooks';
const Component = () => {
const isMobile = useMedia('mobile');
const isTablet = useMedia('tablet');
const isDesktop = useMedia('desktop');
return (
<>
{isMobile && <MobileComponent />}
{isTablet && <TabletComponent />}
{isDesktop && <DesktopComponent />}
</>
);
}
export default Component;
Use custom CSS Media Query.
Component.js
import { useCustomMedia } from 'media-hooks';
const Component = () => {
const isMobile = useCustomMedia('(max-width: 768px)');
const isTablet = useCustomMedia('(min-width: 769px) and (max-width: 1023px)');
const isDesktop = useCustomMedia('(min-width: 1024px)');
return (
<>
{isMobile && <MobileComponent />}
{isTablet && <TabletComponent />}
{isDesktop && <DesktopComponent />}
</>
);
}
export default Component;
Prop | Description | Example |
---|---|---|
patterns | object patterns. |
<MediaProvider patterns={{ mobile: '(min-width: 768px)' }}>...</MediaProvider> |
patterns | object patterns. |
<MediaProvider patterns={{ mobile: { minWidth: 768 } }}>...</MediaProvider> |
Param | Description | Example |
---|---|---|
pattern | string pattern key in patterns. |
const isMobile = useMedia('mobile') |
config | object configuration object |
const isMobile = useMedia('mobile', { default: true }) |
config.default | bool fallback used when Media API is unavailable |
const isMobile = useMedia('mobile', { default: true }) |
Param | Description | Example |
---|---|---|
query | string CSS Media Query. |
const isMobile = useCustomMedia('max-width: 768px') |
config | object configuration object |
const isMobile = useCustomMedia('max-width: 768px', { default: true }) |
config.default | bool fallback used when Media API is unavailable |
const isMobile = useCustomMedia('max-width: 768px', { default: true }) |
P.S: If Media API is unavailable and default value is not provided the hooks will return undefined
;
MIT License
Copyright (c) 2021 Matheus Pelegrinetti