React Custom Hooks Tutorial — Creating useOnline, Testing and Publishing It

What are Custom Hooks?

Setup

mkdir use-online
cd use-online
npm init
npm i --save-dev react @babel/cli copyfiles

Implementing useOnline

import { useState, useEffect } from 'react'

function useOnline () {

}

export default useOnline
function useOnline () {
const [online, setOnline] = useState(navigator.onLine);

}
function useOnline () {
const [online, setOnline] = useState(navigator.onLine)

useEffect (() => {
window.addEventListener('online', function () {
//TODO change state to online
});

window.addEventListener('offline', function () {
//TODO change state to offline
});
}, [])
}
useEffect (() => {
window.addEventListener('online', function () {
setOnline(true)
});

window.addEventListener('offline', function () {
setOnline(false)
});
}, [])
function offlineHandler () {
setOnline(false)
}

function onlineHandler () {
setOnline(true)
}

useEffect (() => {
window.addEventListener('online', onlineHandler)
window.addEventListener('offline', offlineHandler)

return () => {
window.removeEventListener('online', onlineHandler)
window.removeEventListener('offline', offlineHandler)
}
}, [])
import { useState, useEffect } from 'react'

function useOnline () {
const [online, setOnline] = useState(navigator.onLine)

function offlineHandler () {
setOnline(false)
}

function onlineHandler () {
setOnline(true)
}

useEffect (() => {
setOnline(navigator.onLine)
window.addEventListener('online', onlineHandler)
window.addEventListener('offline', offlineHandler)

return () => {
window.removeEventListener('online', onlineHandler)
window.removeEventListener('offline', offlineHandler)
}
}, [])

return online
}

export default useOnline;

Preparing the NPM Package

"devDependencies": {
"react": "^17.0.1",
"@babel/cli": "^7.13.14",
"copyfiles": "^2.4.1"
}
"peerDependencies": {
"react": "^16.8.0 || ^17.0.1"
},
"devDependencies": {
"@babel/cli": "^7.13.14",
"copyfiles": "^2.4.1"
}
"scripts": {
"prebuild": "npm i",
"build": "babel src --out-dir dist"
},
import useOnline from 'use-online'
"main": "dist/useOnline.js"
"files": [
"dist"
],
declare module 'use-online' {
export default function useOnline (): boolean
}
"scripts": {
"prebuild": "npm i",
"build": "babel src --out-dir dist",
"postbuild": "copyfiles -u 1 ./src/useOnline.d.ts ./dist"
},
"types": "dist/useOnline.d.ts",

Testing Our Custom Hook Locally

npx create-react-app example
npm install <PACKAGE_NAME>
npm link
cd example
npm link use-online
npm run build
import useOnline from 'use-online'
function App() {
const online = useOnline()

//... rest of the code
}
return (
<div className="App">
<header className="App-header">
{!online && <p>You're Offline</p>}
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
{!online&amp;&amp;&lt;p&gt;You're Offline&lt;/p&gt;}
npm start

Publishing Your Custom Hook

npm login
npm publish
"name": "NEW_PACKAGE_NAME"
npm install PACKAGE_NAME
npm version TYPE

Full stack developer. http://shahednasser.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store