Reactjs Custom Hooks Without Third-Party Libraries

4 min read

In this article I will be listing all the react custom hooks I use in my projects. I will be updating this resource from time to time.

1. useForm Hook

import { useState } from 'react'
const useForm = (formState) => {
const [user, setUser] = useState(formState)
const onChangeInput = (e) => {
const { name, value } = e.target
setUser({ ...user, [name]: value })
}
const onSubmitForm = (e) => {
e.preventDefault()
console.log('user', user)
}
return {
user,
onChangeInput,
onSubmitForm,
}
}
export default useForm

We can extend this hook by adding errors, and other features too.

How to use useForm hook

In case if we want to uss this hook in Subscription form component, it will look like this,

import Button from '../components/Button'
import Input from '../components/Input'
import useForm from '../hooks/useForm'
const SubscriptionForm = () => {
const { user, onChangeInput, onSubmitForm } = useForm({ name: '', email: '' })
const { name, email } = user
return (
<form onSubmit={onSubmitForm}>
<Input
name="name"
value={name}
type="text"
placeholder="Type your name..."
onChange={onChangeInput}
/>
<Input
name="email"
value={email}
type="email"
placeholder="Type your email..."
onChange={onChangeInput}
/>
<Button title="Submit" type="submit" />
</form>
)
}
export default SubscriptionForm

Use cases of useForm hook

This hook can be used for login, signup, and other forms too

2. useWindowSize (Window Width and Height)

import { useState, useLayoutEffect } from 'react'
function useWindowSize() {
let [size, setSize] = useState([0, 0])
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight])
}
window.addEventListener('resize', updateSize)
updateSize()
return () => window.removeEventListener('resize', updateSize)
}, [])
return size
}
export default useWindowSize

How to use useWindowSize hook

import { useState, useLayoutEffect } from 'react'
function useWindowSize() {
let [size, setSize] = useState([0, 0])
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight])
}
window.addEventListener('resize', updateSize)
updateSize()
return () => window.removeEventListener('resize', updateSize)
}, [])
return size
}
export default useWindowSize

Use cases of useWindowSize hook

I use this hook when I need to perform some action on particular window width or height.

3. useMediaQuery

import { useState, useEffect } from 'react'
export function useMediaQuery(query) {
const [matches, setMatches] = useState(false)
useEffect(() => {
const media = window.matchMedia(query)
if (media.matches !== matches) {
setMatches(media.matches)
}
const listener = () => {
setMatches(media.matches)
}
media.addListener(listener)
return () => media.removeListener(listener)
}, [matches, query])
return matches
}

How to use useMediaQuery hook

import { useMediaQuery } from './hooks/useMediaQuery'
const App = () => {
let isPageWide = useMediaQuery('(min-width: 800px)')
console.log('width', width, 'height', height)
return (
<div>
{isPageWide && <h1>Hello World</h1>}
........
</div>
)
}
export default App

This content will only be visible if the page width will be 800px or greater.

Use cases of useMediaQuery hook

A useful hook helps us when it comes to responsiveness.

This hook was learned from Cassidy Williams article.

4. useOnClickOutside hook

import { useEffect } from 'react'
const useOnClickOutside = (ref, callback) => {
const handleClick = (e) => {
if (ref.current && !ref.current.contains(e.target)) {
callback()
}
}
useEffect(() => {
document.addEventListener('click', handleClick)
return () => {
document.removeEventListener('click', handleClick)
}
})
}
export default useOnClickOutside

How to use useOnClickOutside hook

useOnClickOutside hook takes two params, one for reference and the other one is callback.

import { useRef } from 'react'
import useOnClickOutside from './hooks/useOnClickOutside'
const App = () => {
const clickRef = useRef()
const handleClickOutSide = () => {
console.log('clicked')
}
useOnClickOutside(clickRef, handleClickOutSide)
return (
<div ref={clickRef}>
<h1>Click Outside</h1>
</div>
)
}
export default App

This hook was learned from 30 seconds of code article.