React Hooks Released! (Finally 🎉)

・1 min read

After a lot of waiting...

We finally have React with Hooks to use! https://reactjs.org/blog/2019/02/06/react-v16.8.0.html

I also created a custom hook to use scroll position last month:

neo / react-use-scroll-position

A react hook to use scroll position

react-use-scroll-position

npm package

A react hook to use scroll position.

Usage

In a React functional component:

import React from 'react'
// Usually you would just need to import one of the following
import { useScrollPosition, useScrollXPosition, useScrollYPosition } from 'react-use-scroll-position'
function Example() {
  const { x, y } = useScrollPosition()
  const scrollX = useScrollXPosition();
  const scrollY = useScrollYPosition();
  return (
    <>
      <p>
        {x} should equal to {scrollX}.
      </p>
      <p>
        {y} should equal to {scrollY}.
      </p>
    </>
  );
}

In a custom React hook

import { useScrollPosition } from 'react-use-scroll-position';

function useYourImagination() {
  const { x, y } = useScrollPosition();
  return getSomethingAwesomeWith(x, y);
}

Implementation details

The scroll event handler is throttled by requestAnimationFrame

DISCUSS (3)
 

I can find myself using react-use-scroll-position 👍

And I found that devDependencies are still not up to date.

github.com/neo/react-use-scroll-po...

I believe react should be updated to v16.8.0 (which I did for my small hook library 😉) while TypeScript is now 3.3.x as well as the type definition .

 

Very good point! Thank you v much for pointing it out!

 

You're welcome. I had a similar problem this morning not updating dev deps :)

Classic DEV Post from Jan 9

Migrating to TypeScript, Part 1: Introduction and getting started

In this first article of a multi-part series on migrating to TypeScript, we look into the things you need to do to prepare your project for the Big Rewrite.

Making fancy and novel web stuff 🤯