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