React-хуки

@macrulez/inview-react даёт те же четыре возможности, что и Vue-composables, построенные на useSyncExternalStore поверх тех же framework-agnostic движков ядра — тот же API, то же поведение, зеркалированное 1:1. Импортируйте всё из @macrulez/inview-react.

Отличия от Vue — структурные, а не поведенческие: обычные значения вместо Ref (без .value), простой HTMLElement | null для target вместо MaybeRefOrGetter (у React нет примитива «реф как реактивное значение», который можно было бы туда принять — используйте callback-реф с состоянием, а не обычный useRef, если target должен меняться после монтирования), и статичный снапшот, который возвращается на сервере через getServerSnapshot. Что именно значит каждое поле — смотрите на связанных страницах ядра/Vue ниже, здесь перечислены только React-специфичные моменты.

Реактивное состояние скролла

useScroll() — React-эквивалент Реактивного состояния скролла.

function useScroll(
  target?: Window | HTMLElement | null,
  options?: UseScrollOptions,
): UseScrollReturn

Те же поля (x, y, direction, progress, velocity, isScrolling, scrollTo), но как обычные значения вместо рефов. options.idleTimeout (по умолчанию 150) работает так же.

Возвращаемое значение

Поле	Тип
x, y	number
direction	'up' | 'down' | 'left' | 'right' | null
progress, velocity	number
isScrolling	boolean
scrollTo	(position: number | { x?: number; y?: number }, options?: ScrollToOptions) => void

Пример:

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

function ScrollIndicator() {
  const { y, isScrolling } = useScroll()
  return isScrolling ? <p>{y}px</p> : null
}

Видимость элемента

useElementVisibility() — React-эквивалент Видимости элемента.

function useElementVisibility(
  target: HTMLElement | null,
  options?: UseElementVisibilityOptions,
): UseElementVisibilityReturn

Использует тот же общий пулящийся движок видимости. options — threshold, rootMargin, once, onEnter, onLeave — той же формы, что и во Vue, кроме root: HTMLElement | null (обычное значение, не MaybeRefOrGetter).

Реальное поведенческое отличие, о котором стоит знать: этот хук не читает viewportDefaults/setViewportDefaults — они есть только у Vue/Nuxt. threshold/rootMargin по умолчанию берутся здесь как 0/'0px' исключительно из собственного фолбэка ядрового пула обсерверов, так что вызов setViewportDefaults() из Vue-пакета никак не влияет на React-адаптер.

Возвращаемое значение

Поле	Тип
isVisible	boolean
ratio	number

Позиция элемента во viewport

useElementViewport() — React-эквивалент Позиции элемента во viewport.

function useElementViewport(target: HTMLElement | null): UseElementViewportReturn

Возвращает ту же форму — rect, viewportProgress, distanceFromCenter — как обычные значения.

Параллакс-слой

useParallaxLayer() — React-эквивалент Параллакс-слоя.

function useParallaxLayer(
  target: HTMLElement | null,
  options: UseParallaxLayerOptions,
): UseParallaxLayerReturn

Те же опции (speed обязателен, axis, clamp, easing, range), та же логика преобразования, то же поведение с prefers-reduced-motion. style/progress мемоизируются через useMemo, а не являются Vue-шным computed.

Возвращаемое значение

Поле	Тип
style	{ transform: string }
progress	number

Пример:

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

function ParallaxImage() {
  const ref = useRef<HTMLImageElement | null>(null)
  const { style } = useParallaxLayer(ref.current, { speed: 0.6 })
  return <img ref={ref} style={style} src="/hero.jpg" />
}