Media Query

import { createMediaQuery } from 'seitu/web'
import { useSubscription } from 'seitu/react'

const isDesktop = createMediaQuery({ query: '(min-width: 768px)' })

// Usage with subscribe
isDesktop.subscribe(matches => {
  console.log(matches)
})

const state = isDesktop.get()
console.log(state)

import { createMediaQuery } from 'seitu/web'
import { useSubscription } from 'seitu/react'

const isDesktop = createMediaQuery({ query: '(min-width: 768px)' })

// Usage with some function component
function Layout() {
  const matches = useSubscription(isDesktop)
  return matches ? 'i am desktop' : 'i am mobile'
}

import { createMediaQuery } from 'seitu/web'
import { useSubscription } from 'seitu/react'

createMediaQuery({ query: '(min-width: ' })
Type '"(min-width: "' is not assignable to type '`(min-width: ${number}px)` | `(min-width: ${number}em)` | `(min-width: ${number}rem)` | `(min-width: ${number}vw)` | `(min-width: ${number}vh)` | `(min-width: ${number}dvw)` | `(min-width: ${number}dvh)` | `(min-width: ${number}svw)` | `(min-width: ${number}svh)` | `(min-width: ${number}lvw)` | `(min-width: ${number...'.

createMediaQuery({ query: '(min-width: 768' })
Type '"(min-width: 768"' is not assignable to type '"(min-width: 768px)" | "(min-width: 768em)" | "(min-width: 768rem)" | "(min-width: 768vw)" | "(min-width: 768vh)" | "(min-width: 768dvw)" | "(min-width: 768dvh)" | "(min-width: 768svw)" | ... 11 more ... | "(min-width: 768pc)"'. Did you mean '"(min-width: 768px)"'?