@evo/react-in-view

React-in-view

Компонент вычисляет, находится ли дочерний элемент во viewport, и позволяет навесить обработчики на появление в видимой области и уход из неё.

Важно!

Дочерний элемент должен быть либо React-компонентом, либо обычным DOM-узлом. Если нужно использовать несколько дочерних компонентов либо текст, их нужно будет обернуть в общего родителя.

Usage

Пример:

import InView from '@evo/react-in-view';

const Example = () => (
    <InView
        onEnter={() => {console.log('Element is entering viewport')}}
    >
        <div>Targeted element</div>
    </InView>
);

Dependencies

В проекте, который будет использовать данный компонент, должны быть установлены следующие зависимости:

"peerDependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "prop-types": "^15.6.1"
},

API

Компонент принимает в себя обработчики событий onEnter, onExit, onceEnter, onceExit, а также настройки offset и threshold.

Обработчики

onEnter & onExit

Задают функции, который будут срабатывать каждый раз, когда элемент появляется/покидает экран соответственно:

...
<InView
    onEnter={() => {console.log('Element is entering viewport')}}
    onExit={() => {console.log('Element is leaving viewport')}}
>
    ...
</InView>
...

onceEnter & onceExit

Задают функции, который сработают только один раз, когда элемент впервые появится или покинет экран:

...
<InView
    onceEnter={() => {console.log(`Element entered viewport for the first time, you'll never see this message again`)}}
    onceExit={() => {console.log(`Element leaved viewport for the first time, you'll never see this message again`)}}
>
    ...
</InView>
...

Параметры

threshold

Этот параметр указывает, какая часть элемента будет на экране/вне его, чтобы он посчитался видимым/скрытым. Принимает число от 0 до 1, значение по умолчанию равно 0 (любая часть элемента должна пересечь границу viewport, чтобы сработали обработчики).

...
<InView
    onEnter={() => {console.log(`Now half of the element is visible`)}}
    threshold={0.5}
>
    ...
</InView>
...

offset

Задаёт расстояние в пикселях от границы viewport, при достижении которого будут срабатывать обработчики событий. Может принимать либо число, которое задаст расстояния со всех сторон, либо объект с возможными ключами top, right, bottom и left и чисельными значениями. Значение по умолчанию равно 0. Пример использования:

...
<InView
    onEnter={() => {console.log(`Element is visible while it's at least for 200px far from left and for 300px far from top`)}}
    offset={{
        left: 200,
        top: 300
    }}
>
    ...
</InView>
...

test

Принимает функцию, которая будет использована вместо встроенной для проверки, находится ли элемент во viewport. Функция принимает DOM-узел для проверки и объект настроек, должна возвращать boolean. Объект настроек будет включать в себя параметры threshold и offset (в данном случае объект), описанные выше.

...
<InView
    onEnter={() => {console.log(`Element is "visible" only if its top coordinate bigger than bottom`)}}
    test={(element, options) => {
        const { top, bottom } = element.getBoundingClientRect();
        return top > bottom;
    }}
>
    ...
</InView>
...