viewport-tracker

Компонент, который передаёт подкомпоненту флаг (isVisible) о его видимости в браузере

Демонстрация.

Фичи

• Не использует findDOMNode
• Вхождение в область видимости, может фиксироваться однажды, если указать once
• Оптимизированы обработчики по скроллу

Установка

npm install --save viewport-tracker

Как пользоваться

import React           from 'react';
import ViewportTracker from 'viewport-tracker';
 
const TrackedComponent = ({isVisible}) => {
    const style = {
        background: isVisible ? 'red' : 'blue'
    }
 
    return (
        <div style={style}>
            Hello
        </div>
    )
}
 
const App = () => {
    return (
        <ViewportTracker>
            <TrackedComponent />
        </ViewportTracker>
    )
}
 

License

Большинство функционального кода спизжено из https://github.com/fkhadra/react-on-screen

Licensed under MIT