Установка

Требования

Окружение	Минимальная версия
Node.js	18+
Vue (для @macrulez/inview-vue, опционально)	3.3+
Nuxt (для @macrulez/inview-nuxt, опционально)	3.9+ или 4.0+
React (для @macrulez/inview-react, опционально)	18+ или 19+

У самого @macrulez/inview-core нет peer-зависимостей — он работает где угодно, в том числе вообще без фреймворка.

Установка

Установите адаптер, соответствующий вашему проекту — каждый из них уже зависит от @macrulez/inview-core, так что сам core ставить отдельно не нужно, если только вы не используете его напрямую, без фреймворка.

# Только framework-agnostic ядро
npm install @macrulez/inview-core

# Vue 3
npm install @macrulez/inview-vue

# Nuxt (подтягивает Vue-адаптер)
npm install @macrulez/inview-nuxt

# React
npm install @macrulez/inview-react

Быстрый старт — Vanilla / Core

import { createScrollEngine } from '@macrulez/inview-core'

const scroll = createScrollEngine()

scroll.subscribe((state) => {
  console.log(state.y, state.direction, state.progress)
})

Быстрый старт — Vue

<script setup>
import { useScroll } from '@macrulez/inview-vue'

const { y, direction, progress } = useScroll()
</script>

<template>
  <div>{{ y }}px, скролл {{ direction }}, {{ Math.round(progress * 100) }}%</div>
</template>

Быстрый старт — Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/inview-nuxt'],
  inview: {
    defaultRootMargin: '-10% 0px',
  },
})

<script setup>
// useScroll авто-импортируется — явный импорт не нужен
const { y, isScrolling } = useScroll()
</script>

Быстрый старт — React

import { useScroll } from '@macrulez/inview-react'

function ScrollIndicator() {
  const { y, direction, progress } = useScroll()
  return (
    <div>
      {y}px, скролл {direction}, {Math.round(progress * 100)}%
    </div>
  )
}