Notoriously Problematic Merge

    use-match-media-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    use-match-media

    useMatchMedia react hook for responsive components.

    There are cases that is needed to set conditions outside the render/return of the component. For that another way to set a condition depending on the media query, is using a hook.

    Installation

    1. Install yarn add use-match-media-hook or npm i --save use-match-media-hook

    Arguments

    • queries : array of media queries following the spec.
    • defaultValues : default values in case you want to control SSR default value, defaults to false

    Usage

    Common usage:

    import useMatchMedia from 'use-match-media-hook'
     
    const queries = [
      '(max-width: 400px)',
      '(min-width: 800px)'
    ]
     
    const Component = () => {
      const [mobile, desktop] = useMatchMedia(queries)
     
      if(mobile) return <MobileComponent />
     
      return desktop ? <ComponentOne /> : <ComponentTwo />
    }

    Desktop first strategy

    The following example will render true in the server (if window doesn't exists).

    import useMatchMedia from 'use-match-media-hook'
     
    const queries = [
      '(min-width: 600px)'
    ]
     
    const Component = () => {
      const [desktop] = useMatchMedia(queries)
     
      return desktop ? <ComponentOne /> : <ComponentTwo />
    }

    Server side compatible

    Since there is not a reliable-simple way to know the client window, the library doesn't make any assuptions, but it lets you decide which is your SSR strategy.

    The second argument is the initial value that is used in the SSR, so depending of the strategy you might want to set it as false or true.

    import useMatchMedia from 'use-match-media-hook'
     
    const queries = [
      '(min-width: 600px)'
    ]
     
    const Component = () => {
      const [desktop] = useMatchMedia(queries, [true]) // it receives a second argument with the SSR value, false by default
     
      return desktop ? <ComponentOne /> : <ComponentTwo />
    }

    Keywords

    none

    Install

    npm i use-match-media-hook

    DownloadsWeekly Downloads

    1,216

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    18.1 kB

    Total Files

    23

    Last publish

    Collaborators

    • jepser