react-in-view

InViewWrapper.coffee

module.exports = React.createClass

	displayName: 'InViewWrapper'

	propsTypes:
		onInView: React.PropTypes.func.isRequired
		inViewOffset: React.PropTypes.number

	getDefaultProps: ->
		inViewOffset: 0

	getInitialState: ->
		submerged: false

	render: ->
		React.DOM.div _.omit(@props, ['onInView', 'onInViewData', 'inViewOffset']), @props.children

	componentWilllUnmount: ->
		window.removeEventListener 'scroll', @debouncedCheckPosition

	componentWillMount: ->
		@debouncedCheckPosition = _.throttle @checkPosition, 300
		window.addEventListener 'scroll', @debouncedCheckPosition

	checkPosition: ->
		rect = @getDOMNode().getBoundingClientRect()
		top = rect.top
		height = rect.height
		if (not @state.submerged and top < @props.inViewOffset) or (@state.submerged and top + height > @props.inViewOffset)
			@setState submerged: !@state.submerged
			@props.onInView @props.onInViewData