React Hooks are somewhat a new addition to React. They allow you to use React features without the need to use a class. But I am not going to go through an introduction in this post, there are many great intro posts out there. This post shows you a few nifty hooks and what you can achieve with them.
react-use-form-state hook
Forms are a very common pattern when it comes to getting information from users. From small to large forms, they all have their own state we have to manage, whether it's for validation or to populate another input based on previous selection.
This hook is a handy tool which allows you simplify managing form's state using the native HTML input fields.
{values:{name:'Mary Poppins',email:'mary@example.com',password:'1234',plan:'free',},touched:{name:true,email:true,password:true,plan:true,},validity:{name:true,email:true,password:false,plan:true,},errors:{password:'Please lengthen this text to 8 characters or more',},clear:Function,clearField:Function,reset:Function,resetField:Function,setField:Function,}
It also allow you to initialise it via initialState object, a wide variety of on form event handlers, advanced input options, custom input validation, custom controls and much more. Definitely check their GitHub Repo for more information.
This tiny hook is really handy if you're trying to deliver a responsive user experience. It tracks the state of a CSS media query and lets you act on that.
With useEffect:
importuseMediafrom'use-media';// Alternatively, you can import as:// import {useMedia} from 'use-media';constDemo=()=>{// Accepts an object of features to testconstisWide=useMedia({minWidth:1000});// Or a regular media query stringconstreduceMotion=useMedia('(prefers-reduced-motion: reduce)');return(<div>Screeniswide:{isWide?'😃':'😢'}</div>
);};
With useLayoutEffect:
import{useMediaLayout}from'use-media';constDemo=()=>{// Accepts an object of features to testconstisWide=useMediaLayout({minWidth:1000});// Or a regular media query stringconstreduceMotion=useMediaLayout('(prefers-reduced-motion: reduce)');return(<div>Screeniswide:{isWide?'😃':'😢'}</div>
);};
For more information about this nifty little hook, visit this GitHub repo.
useMedia React hook to track CSS media query state
react-firebase-hooks
I don't have to tell you how great firebase is, but what if you could use a set of hooks to easily integrate with it? It's got 4 set of hooks for you to use:
Many times has happened for me to need to be aware of when the user clicks outside of an element. This might be to change something or perform an action. This little hook allows you to do exactly that:
As you can see, you can provide a ref to an element and pass it to the hook. If there is a click anywhere outside of the element, the the call-back function, in this case close is called.
React hook for listening for clicks outside of an element.
useIntersectionObserver hook
You might remember I did a post on image optimisation and how IntersectionObserver API is a handy tool to load an image lazily when it appears on viewport.
This hook allows you to use this great API:
importReact,{useRef,useState}from"react";import{useIntersectionObserver}from"react-hook-intersection-observer";constApp=()=>{constroot=useRef();// We need a ref to our "root" or our parent,consttarget=useRef();// We need a ref to our "target" or our child-to-watch,// Let's use a bit of state.const[isThingIntersecting,setThingIntersecting]=useState(false);// Here's our hook! Let's give it some configuration...useIntersectionObserver({root,target,// What do we do when it intersects?// The signature of this callback is (collectionOfIntersections, observerElement).onIntersect:([{isIntersecting}])=>setThingIntersecting(isIntersecting)});return(<divclassName="App"><h1>useIntersectionObserver</h1>
<h2>Thethingiscurrently{""}{!isThingIntersecting&&<spanstyle={{color:"red"}}>not</span>}{" "}
<spanstyle={{color:isThingIntersecting?"green":"black"}}>intersecting</span>
!</h2>
<divref={root}className="black-box"><divclassName="larger-box"><divref={target}>THETHING</div>
</div>
</div>
</div>
);};
React Redux now offers a set of hook APIs as an alternative to the existing connect() Higher Order Component. These APIs allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in connect().
Here is the useSelector hook returns a part of all of store using a selector function.
I was surprised to find out how many hooks have already being developed by the community to be honest. There are so many and I can't go through all of them here. But if you're hungry for more, check this gem I found which has a collection of tools, hooks, tutorials, videos, podcasts, and more.