It’s been a while since React hooks were released, and everyone has fallen in love with them. I understand because I’m one of you too. Hooks got me hooked!.
Welcome everybody in this two part series of articles. Where we are gonna create a some custom react hooks to increase features as well as productivity of your react app.
Here's the list of hooks we are going to create a in these two parts:
Part 1 :
-
use-window-dimensions
(for getting window's width and height) -
use-outside-click
(for detecting outside click from a element)
Part 2:
-
use-window-positions
(for detecting window's position) -
use-scroll-direction
(for detecting scroll(up or down))
So before we get started for those who don't know what React and React hooks are? let's have brief introduction for them.
Prerequisites.
- Basic understanding of Javascript and DOM.
- Basic understanding of React and React Hooks.
Project Setup
Now let's back to our main agenda.
First we are going new React App with create-react-app
. I'd call it custom-react-hooks.
So, open terminal and run the following command.
npx create-react-app custom-react-hooks
Open project in favorite IDE/Text-Editor.In this tutorial I am using VSCode.
After that, go to src
folder and create a new folder call hooks
.
Till now, our react-app
should look like this.
Now, clean src/App.js
file like this:
import React from 'react';
import "./App.css";
const App = () => {
return <div>Hello, let's start coding are custom hooks.</div>;
};
export default App;
You can also delete src/App.test.js
, src/setuptest.js
, src/logo.svg
. I am gonna do so.
Now, that's enough. let's start coding our first custom-react-hooks
1.use-window-dimensions
:
In src/hooks
folder I'll make a new file called use-window-dimensions.js
. This is the file where we'll create our use-window-dimensions
hook.
import { useState, useEffect } from "react";
const getDimensions = () => {
const { innerWidth : width, innerHeight : height } = window;
return { width, height }
}
const useWindowDimensions = () => {
const [windowDimensions,setWindowDimensions] = useState(getDimensions());
useEffect( () => {
function handleResize(){
setWindowDimensions(getDimensions());
}
window.addEventListener("resize", handleResize)
return ( () => { window.removeEventListener("resize", handleResize) } )
} ,[])
return windowDimensions
}
export default useWindowDimensions;
Now let's break the code down :
-
getDimensions()
function is simply returning window's width and height. -
useWindowDimensions()
function is our hook that will return window dimensions. - In
useWindowDimensions()
functions we've first store window's dimensions in the state. - Next we run a
useEffect
hook to change our state(dimensions) wheneverresize
event hired on window. - And then in our hook we are returning window's height and width.
Testing our hook.
We are going to test our hooks in App.js
.
import React from "react";
import "./App.css";
import useWindowDimensions from "./hooks/use-window-dimensions";
const App = () => {
const { width, height } = useWindowDimensions();
return (
<div>
<h1># First custom hook:</h1>
<p>
Window's width is {width} and height is{height}
</p>
</div>
);
};
export default App;
Run dev server on localhost:
npm start
OR
yarn start
Now you outputs should like this:
And that it.
👍 Awesome! we made it.
Now let's move to the next hook.
2. use-outside-click
Like what we've done before create a new file in src/hooks
folder called use-outside-click.js
import { useEffect } from "react";
export default function useOutsideClick(ref,onClick) {
useEffect(() => {
if(!ref) return;
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
onClick(event);
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref,onClick]);
}
useOutsideClick
is hook which is taking two arguments firstref
of element on which we want to detect outside click and second a function that will run when it detect outside click from element.on every
mousedown
event we check whether the area we clicked on contains targeted element or not. If it contains we are running a function that we'll pass in hook as second argument.
Let's test it.
In src/App.js
, let's check whether it's working or not.
import React, { useRef } from "react";
import useOutsideClick from "./hooks/use-outside-click";
import "./App.css";
const App = () => {
const boxRef = useRef(null);
useOutsideClick(boxRef, () => {
console.log("clicked detected outside the box");
});
return (
<div className='app'>
<div
ref={boxRef}
className='box'
style={{
width: "200px",
height: "200px",
backgroundColor: "lightgreen"
}}
>
Hi, I am the box.
</div>
</div>
);
};
export default App;
And when we clicked outside the green box the it should logged in console as following :
Amazing 😲, it's working.
Part 2 (coming soon)
Happy coding 😍.
Top comments (1)
Why create one when you can get all awesome hooks in a single library?
Try scriptkavi/hooks. Copy paste style and easy to integrate with its own CLI