Skip to content

Интеграции

React-хуки

Импорт из os-detect/react. Требуется React 17+.

tsx
import { useOS, useIsWindows11 } from 'os-detect/react'

useOS()

Синхронно возвращает текущую строку ОС. Значение вычисляется один раз и стабильно между рендерами.

tsx
function Banner() {
  const os = useOS() // 'windows' | 'macos' | 'ios' | ...

  return <p>Running on {os}</p>
}

useIsWindows11()

Запускает асинхронное определение внутри useEffect и обновляет состояние при получении результата. Возвращает null, пока определение выполняется.

tsx
function WindowsBadge() {
  const isWin11 = useIsWindows11() // null → true | false

  if (isWin11 === null) return <Spinner />
  return <p>{isWin11 ? 'Windows 11' : 'Windows 10 или старше'}</p>
}
ХукВозвращаетЗаметки
useOS()OSСинхронно, кэшируется, стабильно
useIsWindows11()boolean | nullnull во время определения

Composables для Vue

Импорт из os-detect/vue. Требуется Vue 3+.

ts
import { useOS, useIsWindows11 } from 'os-detect/vue'

useOS()

Возвращает readonly Ref с текущей строкой ОС. Определение синхронно и кэшируется.

vue
<script setup lang="ts">
import { useOS } from 'os-detect/vue'

const os = useOS() // Readonly<Ref<OS>>
</script>

<template>
  <p>Running on {{ os }}</p>
</template>

useIsWindows11()

Возвращает readonly Ref, который начинается со значения null и разрешается в true или false после завершения асинхронного определения внутри onMounted.

vue
<script setup lang="ts">
import { useOS, useIsWindows11 } from 'os-detect/vue'

const os = useOS() // Readonly<Ref<OS>>
const isWin11 = useIsWindows11() // Readonly<Ref<boolean | null>>
</script>

<template>
  <p v-if="isWin11 === null">Определяем версию Windows…</p>
  <p v-else-if="isWin11">Windows 11</p>
  <p v-else-if="os === 'windows'">Windows 10 или старше</p>
  <p v-else>OS: {{ os }}</p>
</template>
ComposableВозвращаетЗаметки
useOS()Readonly<Ref<OS>>Синхронно, кэшируется
useIsWindows11()Readonly<Ref<boolean | null>>null во время определения

Node.js и SSR

Все базовые функции работают в Node.js. Когда navigator отсутствует, библиотека читает process.platform вместо userAgent.

ts
import { getOS, detectIsWindows, detectIsWindows11 } from 'os-detect'

getOS() // 'macos' | 'windows' | 'linux' | 'android' | 'unknown'
detectIsWindows() // true на Windows

const isWin11 = await detectIsWindows11() // использует номер сборки из os.release()

Соответствие process.platform

process.platformОпределяется как
darwinmacOS
win32Windows (32-битная и 64-битная)
linuxLinux
androidAndroid
что угодно другое'unknown'

Функции, требующие браузерного окружения (detectIsIOS(), detectIsChromeOS()), в Node.js всегда возвращают false — там нет ни userAgent, ни maxTouchPoints для чтения.

Замечание про гидратацию SSR

В Next.js или Nuxt SSR getOS() во время серверного рендеринга возвращает ОС сервера, а не клиента. Чтобы избежать несовпадений при гидратации, запускайте определение только на клиенте:

React (Next.js):

tsx
import { useEffect, useState } from 'react'
import { getOS } from 'os-detect'
import type { OS } from 'os-detect'

function OSBanner() {
  const [os, setOS] = useState<OS | null>(null)

  useEffect(() => {
    setOS(getOS())
  }, [])

  if (!os) return null
  return <p>OS: {os}</p>
}

Vue (Nuxt):

vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getOS } from 'os-detect'
import type { OS } from 'os-detect'

const os = ref<OS | null>(null)
onMounted(() => {
  os.value = getOS()
})
</script>

<template>
  <p v-if="os">OS: {{ os }}</p>
</template>

В качестве альтернативы используйте Vue composable useOS() из os-detect/vue — он вызывает getOS() внутри ref(), который вычисляется только на клиенте при использовании с <script setup> и SSR-безопасной композицией.

UMD / CDN

Готовая UMD-сборка доступна через unpkg и jsDelivr — сборка проекта не требуется.

html
<script src="https://unpkg.com/os-detect/dist/index.umd.js"></script>
<script>
  console.log(OsDetect.getOS())
  console.log(OsDetect.detectIsIOS())
  console.log(OsDetect.isMobileDevice())

  OsDetect.detectIsWindows11().then((isWin11) => {
    console.log('Windows 11:', isWin11)
  })
</script>

Глобальное имя — OsDetect. Все функции базовой точки входа доступны через него.