@schibstedspain/sui-react-hooks

ReactHooks

Useful hooks to be used in your React projects

Installation

$ npm install @schibstedspain/sui-react-hooks --save

Avaiable hooks

useMount

Hook that will be executed when the component mounts. Similar behaviour to old componentDidMount but useMount could return a function that will executed when the component unmounts. Useful for clearing events or timers.

import { useMount } from '@schibstedspain/sui-react-hooks'

export default () => {
  useMount(() => {
    window.analytics.track('component did mount!')
  })

  useMount(() => {
    const onScroll = () => console.log('scrolling')
    document.addEventListener('scroll', onScroll)
    return () => document.removeEventListener('scroll', onScroll)
  })

  const [currentUser, setCurrentUser] = useState(null)

  useMount(async () => {
    const user = await getUser()
    setCurrentUser(user)
  })

  return currentUser && <h1>Hello {currentUser.name} !!</h1>
}

useOnScreen

Hook to detect if an element is on the screen. Useful for lazy loading components, images or fetching of data.

You could configure if it should only be fired once by using the parameter with the same name (default: true).

import { useOnScreen } from '@schibstedspain/sui-react-hooks'

export default () => {
  const [isIntersecting, outerRef] = useOnScreen({ once: true })
  const [isIntersectingBlock, outerRefBlock] = useOnScreen({ once: false })

  return (
    <div ref={outerRef}>
      {isIntersecting && <img src='huge-image.png' />}
      <div>
    </div>
  )
}

useNearScreen

Similar to useOnScreen but it let you configure when the distance is enough to return true. By default if the element is 200px near the screen it will change the inner state of the hook. You could define the offset in pixels to fire the event sooner or later.

import { useNearScreen } from '@schibstedspain/sui-react-hooks'

export default () => {
  const [isNear, outerRef] = useNearScreen({ offset: '300px' })

  return (
    <div ref={outerRef}>
      {isNear && <p>This is 300px near to the viewport!</p>}
      <div>
    </div>
  )
}

Find full description and more examples in the demo page.