Zipped Useful React Hooks Ready To Install With NPM.
| Hook | Description | Documentation | NPM |
|---|---|---|---|
| useAxios | React Hook for Requesting and Refetching API | Documentation | NPM Page |
| useBeforeTop | React Hook for detecting if mouse is located at browser's top bar | Documentation | NPM Page |
| useClick | React Hook for detecting clicked a component and react it | Documentation | NPM Page |
| useFadeIn | React Hook for fade in a selected element | Documentation | NPM Page |
| useFullscreen | React Hook for change a component to fullscreen mode and normal mode | Documentation | NPM Page |
| useGeolocation | React Hook for get geolocation about client | Documentation | NPM Page |
| useInput | React Hook for validate a value and change value | Documentation | NPM Page |
| useNetwork | React Hook for get if network is connected | Documentation | NPM Page |
| useNotification | React Hook for notify on browser | Documentation | NPM Page |
| useScroll | React Hook for get current scroll position | Documentation | NPM Page |
| useTabs | React Hook for get value in array more convenient | Documentation | NPM Page |
| useTitle | React Hook for changing a title from HTML | Documentation | NPM Page |
React Hook for Requesting and Refetching API. You Can Request API More Convenient.
yarn add @ziphooks/use-axios
npm i @ziphooks/use-axios
import React from "react";
import useAxios from "@ziphooks/use-axios";
function App() {
const { loading, data, error, refetch } = useAxios({
url: "API Url"
});
return (
<div>
<h1>{data && data.status}</h1>
<h2>{loading ? "Loading" : "Loaded"}</h2>
<button onClick={refetch}>Refetch</button>
</div>
);
};| Argument | Type | Description | required |
|---|---|---|---|
| options | Object | An object that options for requesting API | true |
| axiosInstance | Function | A function fot requesting API | false |
| Return value | Type | Description |
|---|---|---|
| loading | Boolean | A boolean that means if requesting API is over |
| data | Object | An object which contains requested API's response and status |
| error | Object | An object which contains error |
| refetch | Function | A function that refetches the API |
React Hook for detecting if mouse is located at browser's top bar. You can use this React Hook for prevent exiting without saving.
yarn add @ziphooks/use-before-top
npm i @ziphooks/use-before-top
import React from "react";
import useBeforeTop from "@ziphooks/use-before-top";
function App() {
useBeforeTop(() => alert("Are you saved some stuffs?"));
return <h1>Some Stuffs</h1>;
};| Argument | Type | Description | required |
|---|---|---|---|
| onBefore | Boolean | A boolean that means if requesting API is over | true |
React Hook for detecting clicked a component and react it.
yarn add @ziphooks/use-click
npm i @ziphooks/use-click
import React from "react";
import useClick from "@ziphooks/use-click";
function App() {
const title = useClick(() => alert("Clicked!"));
return (
<h1 ref={title}>Click me</h1>
);
};| Argument | Type | Description | required |
|---|---|---|---|
| onClick | Function | A function that is executed when a selected element is clicked | true |
| Return value | Type | Description |
|---|---|---|
| element | HTML Tag | A HTML tag selected in arguments |
React Hook for fade in a selected element. Useful on fade motion intro.
yarn add @ziphooks/use-fade-in
npm i @ziphooks/use-fade-in
import React from "react";
import useFadeIn from "@ziphooks/use-fade-in";
function App() {
const title = useFadeIn(0.3, 0.5);
return (
<h1 ref={title}>Fade In</h1>
);
};| Argument | Type | Description | required |
|---|---|---|---|
| Duration | Number | A number that duration of fade in | false |
| Delay | Number | A number that delay of fade in | false |
| Name | Type | Description |
|---|---|---|
| ref | React Ref | A ref created to fadeIn the element |
| style | Object | Style object containing { opacity: 0 } to give to the element as a default |
React Hook for change a component to fullscreen mode and normal mode.
yarn add @ziphooks/use-fullscreen
npm i @ziphooks/use-fullscreen
import React from "react";
import useFullscreen from "@ziphooks/use-fullscreen";
function App() {
const { element, triggerFull, exitFull } = useFullscreen(isFull => alert(isFull ? "I am FULL" : "I am not FULL")));
return (
<div ref={element}>
<h1>Hello</h1>
<button onClick={triggerFull}>Enter Fullscreen</button>
<button onClick={exitFull}>Exit Fullscreen</button>
</div>
);
};| Argument | Type | Description | Required |
|---|---|---|---|
| onChange | Function | A function to be called when the screen goes Fullscreen or exits is | false |
| Return value | Type | Description |
|---|---|---|
| element | React Ref | A ref to add to the element that you want to make fullscreen |
| triggerFull | Function | A function to make the element enter fullscreen |
| exitFull | Function | A function to make the document exit fullscreen |
React Hook for get geolocation about client.
yarn add @ziphooks/use-geolocation
npm i @ziphooks/use-geolocation
import React from "react";
import useGeolocation from "@ziphooks/use-geolocation";
function App() {
const { lat, lon, reload } = useGeolocation();
return (
<>
<h1>latitude: {lat}</h1>
<h1>longitude: {lon}</h1>
<button onClick={reload}>Reload</button>
</>
);
};| Return value | Type | Description |
|---|---|---|
| lat | Number | A number latitude of current geolocation |
| lon | Number | A number longitude of current geolocation |
| reload | Function | A function to reload geolocation |
React Hook for validate a value and change value. This is useful on manage special input value.
yarn add @ziphooks/use-input
npm i @ziphooks/use-input
import React from "react";
import useInput from "@ziphooks/use-input";
function App() {
const onlyPureText = useInput("asdf", (value) => !value.trim().match(/[!@#$%^&*()\-_=+[\]{}\\|;:'"<>,./?`~]/g));
return (
<div ref={element}>
<h1>Please write only pure text</h1>
<input {...onlyPureText} />
</div>
);
};| Argument | Type | Description | Required |
|---|---|---|---|
| initialValue | Not A Function | A data for initial value | true |
| validator | Function | A function to validate a enter value | false |
| Return value | Type | Description |
|---|---|---|
| value | Any | A data that is current a value |
| onChange | Function | A function to set a value |
React Hook for get if network is connected.
yarn add @ziphooks/use-network
npm i @ziphooks/use-network
import React from "react";
import useNetwork from "@ziphooks/use-network";
function App() {
const isOnline = useNetwork((online) => {
if (online) {
alert("You are online");
} else {
alert("You are offline");
};
});
return <h1>You are {isOnline ? "online" : "offline"}</h1>;
};| Argument | Type | Description | Required |
|---|---|---|---|
| onChange | Function | A function called after confirming that the network is connected | true |
| Return value | Type | Description |
|---|---|---|
| status | Boolean | A boolean if it is connected online |
React Hook for notify on browser.
yarn add @ziphooks/use-notification
npm i @ziphooks/use-notification
import React from "react";
import useNotification from "@ziphooks/use-notification";
function App() {
const sayHello = useNotification("Hello", { body: "From @ziphooks/use-notification" });
return (
<div>
<h1>Say Hello</h1>
<button onClick={sayHello}>Click me</button>
</div>
);
};| Argument | Type | Description | Required |
|---|---|---|---|
| title | String | A string for use in title on notification | true |
| options | Object | An object for use notification options | false |
| Return value | Type | Description |
|---|---|---|
| fireNotification | Function | A function to fire notification |
React Hook for get current scroll position. It is useful when make animations.
yarn add @ziphooks/use-scroll
npm i @ziphooks/use-scroll
import React from "react";
import useScroll from "@ziphooks/use-scroll";
function App() {
const scrollPosition = useScroll();
return (
<div>
<h1>X: {scrollPosition.x}</h1>
<h1>Y: {scrollPosition.y}</h1>
</div>
);
};| Return value | Type | Description |
|---|---|---|
| state | Object | An object that gives you scroll x position and scroll y position |
React Hook for get value in array more convenient. It can use on moving section.
yarn add @ziphooks/use-tabs
npm i @ziphooks/use-tabs
import React from "react";
import useTabs from "@ziphooks/use-tabs";
function App() {
const sections = [
{
"title": "Home",
"body": "Welcome to Home"
},
{
"title": "Blog",
"body": "Welcome to Blog"
},
{
"title": "Contact",
"body": "Welcome to Contact"
}
];
const { currentItem, changeItem } = useTabs(0, sections);
return (
<div>
{sections.map((section, index) => (
<button onClick={() => changeItem(index)}>
{section.title}
</button>
))}
<h1>{currentItem.title}</h1>
<p>{currentItem.body}</p>
</div>
);
};| Argument | Type | Description | Required |
|---|---|---|---|
| initalTab | Number | A number for initial tab's index | true |
| allTabs | Array | An array for use in this React Hook | true |
| Return value | Type | Description |
|---|---|---|
| currentItem | Any | A data that is current tab |
| changeItem | Function | A function that receives index to change current tab |
React Hook for changing a title from HTML.
yarn add @ziphooks/use-title
npm i @ziphooks/use-title
import React from "react";
import useTitle from "@ziphooks/use-title";
function App() {
const changeTitle = useTitle("Home");
setTimeout(() => {
changeTitle("Hi");
}, 3000);
return <h1>The title is going to change to 'Home' and change to 'Hi' in 3 seconds</h1>;
};| Argument | Type | Description | Required |
|---|---|---|---|
| initialTitle | String | A string for initial a title from HTML | true |
| Return value | Type | Description |
|---|---|---|
| setTitle | Function | A function to change a title from HTML |