Table of Content

• Installation
• How to use
• Definition

Installation:

You can install using:

yarn add media-hooks

// or

npm install media-hooks

How to use:

Media hooks provides two ways to use.

First way:

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;

Second way:

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;

Definition:

<MediaProvider />

| Prop | Description | Example | | :------: | ------------------ | ------------------------------------------------------------------------------------ | | patterns | object patterns. | <MediaProvider patterns={{ mobile: '(min-width: 768px)' }}>...</MediaProvider> | | patterns | object patterns. | <MediaProvider patterns={{ mobile: { minWidth: 768 } }}>...</MediaProvider> |

useMedia()

| 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 }) |

useCustomMedia()

| 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