Skip to content

Instantly share code, notes, and snippets.

@thebuilder thebuilder/useInView.tsx
Last active Jul 16, 2019

Embed
What would you like to do?
useInView
/* eslint-disable react-hooks/exhaustive-deps */
import * as React from 'react'
import { observe, unobserve } from './intersection'
import { InViewHookResponse, IntersectionOptions } from './index'
type State = {
inView: boolean
entry?: IntersectionObserverEntry
}
export function useInView(
options: IntersectionOptions = {},
): InViewHookResponse {
const ref = React.useRef<Element>()
const [state, setState] = React.useState<State>({
inView: false,
entry: undefined,
})
const setRef = React.useCallback(
node => {
if (ref.current) {
unobserve(ref.current)
}
if (node) {
observe(
node,
(inView, intersection) => {
setState({ inView, entry: intersection })
if (inView && options.triggerOnce) {
// If it should only trigger once, unobserve the element after it's inView
unobserve(node)
}
},
options,
)
}
// Store a reference to the node
ref.current = node
},
[options.threshold, options.root, options.rootMargin, options.triggerOnce],
)
React.useDebugValue(state.inView)
return [setRef, state.inView, state.entry]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.