higimo-scroll-spy/src/demo.js

Компонент следит за тем, до какого элемента доскроллил клиент и передает сообщение в другой элемент

var React       = require('react')
var ReactDOM    = require('react-dom')
var ScrollSpy   = require('./ScrollSpy')
var MainContent = require('./MainContent')

const MainElements = [
	{
		name: 'Играть в Халкошки-мышки',
		sub: 'Играть в кошки-мышки'
	},
	{
		name: 'Брать Халколичеством',
		sub: 'Брать количеством'
	},
	{
		name: 'Странная история доктора Джекила и мистера Халкйда',
		sub: 'Странная история доктора Джекила и мистера Хайда'
	},
	{
		name: 'Халкарнавальная ночь',
		sub: 'Карнавальная ночь'
	},
	{
		name: 'Халкосмическая одиссея 2001 года',
		sub: 'Космическая одиссея 2001 года'
	},
	{
		name: 'Халкриминальное чтиво',
		sub: 'Криминальное чтиво'
	},
	{
		name: 'Танцы с Халками',
		sub: 'Танцы с волками'
	},
	{
		name: 'Халкалейдоскоп ужасов',
		sub: 'Калейдоскоп ужасов'
	},
	{
		name: 'Халкоролевский госпиталь',
		sub: 'Королевский госпиталь'
	},
	{
		name: 'Халкапитанская дочка',
		sub: 'Капитанская дочка'
	},
	{
		name: 'Забить Халку',
		sub: 'Забить стрелку'
	},
	{
		name: 'Как на Халках',
		sub: 'Как на иголках'
	},
	{
		name: 'Брать с Халка',
		sub: 'Брать с потолка'
	},
	{
		name: 'Халки трясутся',
		sub: 'Поджилки трясутся'
	},
	{
		name: 'Три очка в Халку',
		sub: 'Три очка в копилку'
	},
	{
		name: 'Халкрокодиловы слезы',
		sub: 'Крокодиловы слезы'
	},
	{
		name: 'Не в своей Халке',
		sub: 'Не в своей тарелке'
	}
]

const Row = ({className, children}) => (
	<div className="row">
		{children}
	</div>
)

const MetaContent = ({visible, children}) => (
	<div>
		<div className="fixedMenu">
			{MainElements.map((item, key) => {
				return (
					<span key={`menu_${key}`} style={{fontWeight: (visible === item.name ? 600 : 200)}}>{item.name} </span>
				)
			})}
		</div>
	</div>
)

const SpyRow = ({name, sub, update}) => (
	<ScrollSpy name={name} update={update}>
		<Row>
			<h2>{name}</h2>
			<h3>{sub}</h3>
		</Row>
	</ScrollSpy>
)

const App = () => (
	<div>
		<MainContent>
			<MetaContent />
			{
				MainElements.map((item, key) =>
					(
					<SpyRow key={`SpyRow_${key}`} name={item.name} sub={item.sub} />
					)
				)
			}
		</MainContent>
	</div>
)
ReactDOM.render(<App />, document.getElementById('application'))