├── .gitignore ├── README.md ├── useAxios ├── index.js └── useAxios.js ├── useBeforeLeave ├── README.md ├── index.js ├── package.json └── useBeforeLeave.js ├── useConfirm ├── README.md ├── index.js ├── package.json └── useConfirm.js ├── useFadeIn ├── README.md ├── index.js ├── package.json └── useFadeIn.js ├── useFullScreen ├── README.md ├── index.js ├── package.json └── useFullScreen.js ├── useHover ├── README.md ├── index.js ├── package.json └── useHover.js ├── useInput ├── README.md ├── index.js └── useInput.js ├── useNetwork ├── README.md ├── index.js ├── package.json └── useNetwork.js ├── useNotification ├── index.js └── useNotification.js ├── usePreventLeave ├── README.md ├── index.js ├── package.json └── usePreventLeave.js ├── useScroll ├── README.md ├── index.js ├── package.json └── useScroll.js ├── useTabs ├── index.js └── useTabs.js └── useTitle ├── README.md ├── index.js ├── package-lock.json ├── package.json └── useTitle.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nooks 2 | 3 | Collection of sexy React Hooks ready to install with NPM 4 | 5 | ## Each hook has its own pacakge 6 | 7 | | Hook | Description | Documentation | NPM Page | 8 | | --------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------ | 9 | | useTitle | Update your document's title. | [Documentation](https://github.com/nomadcoders/nooks/tree/master/useTitle) | [NPM Page](https://www.npmjs.com/package/@nooks/use-title) | 10 | | useConfirmation | Prompt a confirmation before executing a function. | [Documentation](https://github.com/nomadcoders/nooks/tree/master/useConfirm) | [NPM Page](https://www.npmjs.com/package/@nooks/use-confirm) | 11 | | useHover | Detect a hover on any React Element. | [Documentation](https://github.com/nomadcoders/nooks/tree/master/useHover) | [NPM Page](https://www.npmjs.com/package/@nooks/use-hover) | 12 | | useBeforeLeave | Execute a function when the mouse leaves the document. | [Documentation](https://github.com/nomadcoders/nooks/tree/master/useBeforeLeave) | [NPM Page](https://www.npmjs.com/package/@nooks/use-before-leave) | 13 | | useNetwork | Listen when the user goes online or offline. | [Documentation](https://github.com/nomadcoders/nooks/tree/master/useNetwork) | [NPM Page](https://www.npmjs.com/package/@nooks/use-network) | 14 | | useScroll | Get X/Y coordinates of current position of the scroll. | [Documentation](https://github.com/nomadcoders/nooks/tree/master/useScroll) | [NPM Page](https://www.npmjs.com/package/@nooks/use-scroll) | 15 | | usePreventLeave | Prompt the user for confirmation before leaving the page. | [Documentation](https://github.com/nomadcoders/nooks/tree/master/usePreventLeave) | [NPM Page](https://www.npmjs.com/package/@nooks/use-prevent-leave) | 16 | | useFadeIn | Fade in any element. | [Documentation](https://github.com/nomadcoders/nooks/tree/master/useFadeIn) | [NPM Page](https://www.npmjs.com/package/@nooks/use-fade-in) | 17 | | useFullscreen | Make any element go Fullscreen | [Documentation](https://github.com/nomadcoders/nooks/tree/master/useFullScreen) | [NPM Page](https://www.npmjs.com/package/@nooks/use-fullscreen) | -------------------------------------------------------------------------------- /useAxios/index.js: -------------------------------------------------------------------------------- 1 | export { useAxios as default } from "./useAxios"; 2 | -------------------------------------------------------------------------------- /useAxios/useAxios.js: -------------------------------------------------------------------------------- 1 | import defaultAxios from "axios"; 2 | import { useState, useEffect } from "react"; 3 | 4 | export const useAxios = (opts, axiosInstance = defaultAxios) => { 5 | const [state, setState] = useState({ 6 | loading: true, 7 | error: null, 8 | data: null 9 | }); 10 | const [trigger, setTrigger] = useState(0); 11 | if (!opts.url) { 12 | return; 13 | } 14 | const refetch = () => { 15 | setState({ 16 | ...state, 17 | loading: true 18 | }); 19 | setTrigger(Date.now()); 20 | }; 21 | useEffect(() => { 22 | axiosInstance(opts) 23 | .then(data => { 24 | setState({ 25 | ...state, 26 | loading: false, 27 | data 28 | }); 29 | }) 30 | .catch(error => { 31 | setState({ ...state, loading: false, error }); 32 | }); 33 | }, [trigger]); 34 | return { ...state, refetch }; 35 | }; 36 | -------------------------------------------------------------------------------- /useBeforeLeave/README.md: -------------------------------------------------------------------------------- 1 | # @nooks/use-before-leave 2 | 3 | React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics. 4 | 5 | ## Installation 6 | 7 | #### yarn 8 | 9 | `yarn add @nooks/use-before-leave` 10 | 11 | #### npm 12 | 13 | `npm i @nooks/use-before-leave` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from "react"; 19 | import useBeforeLeave from "@nooks/use-before-leave"; 20 | 21 | function App() { 22 | const beforeLeave = () => console.log("User is leaving..."); 23 | useBeforeLeave(beforeLeave); 24 | return

Hello Nooks

; 25 | } 26 | ``` 27 | 28 | ### Arguments 29 | 30 | | Argument | Type | Description | Required | 31 | | ------------- | -------- | -------------------------------------------------------- | -------- | 32 | | onBeforeLeave | function | Function to be called when the mouse leaves the document | yes | 33 | -------------------------------------------------------------------------------- /useBeforeLeave/index.js: -------------------------------------------------------------------------------- 1 | export { useBeforeLeave as default } from "./useBeforeLeave"; 2 | -------------------------------------------------------------------------------- /useBeforeLeave/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-before-leave", 3 | "version": "1.0.1", 4 | "description": "React Hook to execute a function when the mouse leaves the document.", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/nomadcoders/nooks.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "hooks", 13 | "leave", 14 | "beforeleave", 15 | "unload", 16 | "mouseleave" 17 | ], 18 | "author": "Nicolás Serrano Arévalo ", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/nomadcoders/nooks/issues" 22 | }, 23 | "homepage": "https://github.com/nomadcoders/nooks#readme", 24 | "peerDependencies": { 25 | "react": "^16.8.6", 26 | "react-dom": "^16.8.6" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /useBeforeLeave/useBeforeLeave.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | 3 | export const useBeforeLeave = onBefore => { 4 | if (typeof onBefore !== "function") { 5 | return; 6 | } 7 | const handle = event => { 8 | const { clientY } = event; 9 | if (clientY <= 0) { 10 | onBefore(); 11 | } 12 | }; 13 | useEffect(() => { 14 | document.addEventListener("mouseleave", handle); 15 | return () => document.removeEventListener("mouseleave", handle); 16 | }, []); 17 | }; 18 | -------------------------------------------------------------------------------- /useConfirm/README.md: -------------------------------------------------------------------------------- 1 | # @nooks/use-confirm 2 | 3 | React Hook to ask the user for a confirmation before executing a function. 4 | 5 | ## Installation 6 | 7 | #### yarn 8 | 9 | `yarn add @nooks/use-confirm` 10 | 11 | #### npm 12 | 13 | `npm i @nooks/use-confirm` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from "react"; 19 | import useConfirm from "@nooks/use-confirm"; 20 | 21 | function App() { 22 | const deleteWorld = () => console.log("Deleting world..."); 23 | const confirmDelete = useConfirm("Are you sure?", deleteWorld); 24 | return ; 25 | } 26 | ``` 27 | 28 | ### Arguments 29 | 30 | | Argument | Type | Description | Required | 31 | | --------- | -------- | --------------------------------------------------- | -------- | 32 | | message | string | Message to show the user on the confirmation propmt | yes | 33 | | onConfirm | function | Function to be executed when the user confirms | yes | 34 | | onCancel | function | Function to be executed when the user cancels | no | 35 | 36 | ### Return 37 | 38 | | Return value | Type | Description | Default value | 39 | | ------------ | -------- | ---------------------------------------------- | ------------- | 40 | | function | function | Function wrapped around the confirmation logic | null | 41 | -------------------------------------------------------------------------------- /useConfirm/index.js: -------------------------------------------------------------------------------- 1 | export { useConfirm as default } from "./useConfirm"; 2 | -------------------------------------------------------------------------------- /useConfirm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-confirm", 3 | "version": "1.0.3", 4 | "description": "React Hook to prompt a confirmation before executing a function", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/nomadcoders/nooks.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "hooks", 13 | "confirm", 14 | "prompt" 15 | ], 16 | "author": "Nicolás Serrano Arévalo ", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/nomadcoders/nooks/issues" 20 | }, 21 | "homepage": "https://github.com/nomadcoders/nooks#readme", 22 | "peerDependencies": { 23 | "react": "^16.8.6", 24 | "react-dom": "^16.8.6" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /useConfirm/useConfirm.js: -------------------------------------------------------------------------------- 1 | export const useConfirm = (message = "", onConfirm, onCancel) => { 2 | if (!onConfirm || typeof onConfirm !== "function") { 3 | return; 4 | } 5 | if (onCancel && typeof onCancel !== "function") { 6 | return; 7 | } 8 | const confirmAction = () => { 9 | if (confirm(message)) { 10 | onConfirm(); 11 | } else { 12 | onCancel(); 13 | } 14 | }; 15 | return confirmAction; 16 | }; 17 | -------------------------------------------------------------------------------- /useFadeIn/README.md: -------------------------------------------------------------------------------- 1 | # @nooks/use-fade-in 2 | 3 | React Hook to fade in any element. 4 | 5 | ## Installation 6 | 7 | #### yarn 8 | 9 | `yarn add @nooks/use-fade-in` 10 | 11 | #### npm 12 | 13 | `npm i @nooks/use-fade-in` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from "react"; 19 | import useFadeIn from "@nooks/use-fade-in"; 20 | 21 | function App() { 22 | const fadeIn = useFadeIn(5, 10); 23 | return

This will fade in.

; 24 | } 25 | ``` 26 | 27 | ### Arguments 28 | 29 | | Argument | Type | Description | Required | Default value | 30 | | -------- | ------ | ----------------------------------------------- | -------- | ------------- | 31 | | duration | number | Sets the duration of the transition. In seconds | no | 1 | 32 | | delay | number | Delays of transition's start. In seconds | no | 0 | 33 | 34 | ### Return 35 | 36 | `useScroll` returns an object containing the following: 37 | 38 | | Name | Type | Description | 39 | | ----- | --------- | ------------------------------------------------------------------------- | 40 | | ref | React Ref | A ref created to fadeIn the element | 41 | | style | Object | Style object containing `{opacity:0}` to give to the element as a default | 42 | 43 | It's recommended to just spread the returned object on the element as shown in the Usage section above. 44 | -------------------------------------------------------------------------------- /useFadeIn/index.js: -------------------------------------------------------------------------------- 1 | export { useFadeIn as default } from "./useFadeIn"; 2 | -------------------------------------------------------------------------------- /useFadeIn/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-fade-in", 3 | "version": "1.0.0", 4 | "description": "React Hook to fade in any element.", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/nomadcoders/nooks.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "hooks", 13 | "scroll", 14 | "coords", 15 | "x/y" 16 | ], 17 | "author": "Nicolás Serrano Arévalo ", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/nomadcoders/nooks/issues" 21 | }, 22 | "homepage": "https://github.com/nomadcoders/nooks#readme", 23 | "peerDependencies": { 24 | "react": "^16.8.6", 25 | "react-dom": "^16.8.6" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /useFadeIn/useFadeIn.js: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from "react"; 2 | 3 | export const useFadeIn = (duration = 1, delay = 0) => { 4 | if (typeof duration !== "number" || typeof delay !== "number") { 5 | return; 6 | } 7 | const element = useRef(); 8 | useEffect(() => { 9 | if (element.current) { 10 | const { current } = element; 11 | current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`; 12 | current.style.opacity = 1; 13 | } 14 | }, []); 15 | return { ref: element, style: { opacity: 0 } }; 16 | }; 17 | -------------------------------------------------------------------------------- /useFullScreen/README.md: -------------------------------------------------------------------------------- 1 | # @nooks/use-fullscreen 2 | 3 | React Hook to make any element go Fullscreen 4 | 5 | ## Installation 6 | 7 | #### yarn 8 | 9 | `yarn add @nooks/use-fullscreen` 10 | 11 | #### npm 12 | 13 | `npm i @nooks/use-fullscreen` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from "react"; 19 | import useFullscreen from "@nooks/use-fullscreen"; 20 | 21 | function App() { 22 | const onChange = isFull => 23 | console.log(isFull ? "We are in Fullscreen" : "We are not in Fullscreen"); 24 | const { element, triggerFull, exitFull } = useFullscreen(onChange); 25 | return ( 26 |
27 |

Hello

28 | 29 | 30 |
31 | ); 32 | } 33 | ``` 34 | 35 | ### Arguments 36 | 37 | | Argument | Type | Description | Arguments | Required | 38 | | -------- | -------- | ----------------------------------------------------------------- | ---------------- | -------- | 39 | | onChange | function | Function to be called when the screen goes Fullscreen or exits is | isFull : Boolean | no | 40 | 41 | ### Return 42 | 43 | `useFullscreen` returns an object containing the following: 44 | 45 | | Return value | Type | Description | 46 | | ------------ | --------- | ---------------------------------------------------------- | 47 | | element | React Ref | Ref to add to the element that you want to make fullscreen | 48 | | triggerFull | Function | Function to make the element enter fullscreen | 49 | | exitFull | Function | Function to make the document exit fullscreen | 50 | -------------------------------------------------------------------------------- /useFullScreen/index.js: -------------------------------------------------------------------------------- 1 | export { useFullScreen as default } from "./useFullScreen"; 2 | -------------------------------------------------------------------------------- /useFullScreen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-fullscreen", 3 | "version": "1.0.0", 4 | "description": "React Hook to make any element go Fullscreen", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/nomadcoders/nooks.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "hooks", 13 | "fullscreen" 14 | ], 15 | "author": "Nicolás Serrano Arévalo ", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/nomadcoders/nooks/issues" 19 | }, 20 | "homepage": "https://github.com/nomadcoders/nooks#readme", 21 | "peerDependencies": { 22 | "react": "^16.8.6", 23 | "react-dom": "^16.8.6" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /useFullScreen/useFullScreen.js: -------------------------------------------------------------------------------- 1 | export const useFullscreen = callback => { 2 | const element = useRef(); 3 | const runCb = isFull => { 4 | if (callback && typeof callback === "function") { 5 | callback(isFull); 6 | } 7 | }; 8 | const triggerFull = () => { 9 | if (element.current) { 10 | if (element.current.requestFullscreen) { 11 | element.current.requestFullscreen(); 12 | } else if (element.current.mozRequestFullScreen) { 13 | element.current.mozRequestFullScreen(); 14 | } else if (element.current.webkitRequestFullscreen) { 15 | element.current.webkitRequestFullscreen(); 16 | } else if (element.current.msRequestFullscreen) { 17 | element.current.msRequestFullscreen(); 18 | } 19 | runCb(true); 20 | } 21 | }; 22 | const exitFull = () => { 23 | document.exitFullscreen(); 24 | if (document.exitFullscreen) { 25 | document.exitFullscreen(); 26 | } else if (document.mozCancelFullScreen) { 27 | document.mozCancelFullScreen(); 28 | } else if (document.webkitExitFullscreen) { 29 | document.webkitExitFullscreen(); 30 | } else if (document.msExitFullscreen) { 31 | document.msExitFullscreen(); 32 | } 33 | runCb(false); 34 | }; 35 | return { element, triggerFull, exitFull }; 36 | }; 37 | -------------------------------------------------------------------------------- /useHover/README.md: -------------------------------------------------------------------------------- 1 | # @nooks/use-hover 2 | 3 | React Hook to detect a hover on an any React Element 4 | 5 | ## Installation 6 | 7 | #### yarn 8 | 9 | `yarn add @nooks/use-hover` 10 | 11 | #### npm 12 | 13 | `npm i @nooks/use-hover` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from "react"; 19 | import useHover from "@nooks/use-hover"; 20 | 21 | function App() { 22 | const onHover = () => console.log("Somebody hovered!"); 23 | const markedRef = useClick(onHover); 24 | return

Hello Nooks

; 25 | } 26 | ``` 27 | 28 | ### Arguments 29 | 30 | | Argument | Type | Description | Required | 31 | | -------- | -------- | ------------------------------------------------- | -------- | 32 | | onHover | function | Function to be called when the element is hovered | yes | 33 | 34 | ### Return 35 | 36 | | Return value | Type | Description | Default value | 37 | | ------------ | --------- | --------------------------------------------------------------- | ------------- | 38 | | ref | React Ref | A React Ref listening to the hover event, add it to any element | null | 39 | -------------------------------------------------------------------------------- /useHover/index.js: -------------------------------------------------------------------------------- 1 | export { useHover as default } from "./useHover"; 2 | -------------------------------------------------------------------------------- /useHover/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-hover", 3 | "version": "1.0.3", 4 | "description": "React Hook to detect a hover on an any React Element", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/nomadcoders/nooks.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "hooks", 13 | "hover" 14 | ], 15 | "author": "Nicolás Serrano Arévalo ", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/nomadcoders/nooks/issues" 19 | }, 20 | "homepage": "https://github.com/nomadcoders/nooks#readme", 21 | "peerDependencies": { 22 | "react": "^16.8.6", 23 | "react-dom": "^16.8.6" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /useHover/useHover.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from "react"; 2 | 3 | export const useHover = onHover => { 4 | if (typeof onHover !== "function") { 5 | return; 6 | } 7 | const element = useRef(); 8 | useEffect(() => { 9 | if (element.current) { 10 | element.current.addEventListener("mouseenter", onHover); 11 | } 12 | return () => { 13 | if (element.current) { 14 | element.current.removeEventListener("mouseenter", onHover); 15 | } 16 | }; 17 | }, []); 18 | return element; 19 | }; 20 | -------------------------------------------------------------------------------- /useInput/README.md: -------------------------------------------------------------------------------- 1 | # Usage 2 | 3 | ```js 4 | import useInput from "@nooks/use-input" 5 | 6 | const App = () => { 7 | const validator = value => !value.includes("@"); 8 | const name = useInput("Mr. ", validator); 9 | return ( 10 |
11 |

Hello

12 | 13 |
14 | ); 15 | }; 16 | ``` 17 | -------------------------------------------------------------------------------- /useInput/index.js: -------------------------------------------------------------------------------- 1 | export { useInput as default } from "./useInput"; 2 | -------------------------------------------------------------------------------- /useInput/useInput.js: -------------------------------------------------------------------------------- 1 | export const useInput = (initialValue, validator) => { 2 | const [value, setValue] = useState(initialValue); 3 | const onChange = event => { 4 | const { 5 | target: { value } 6 | } = event; 7 | let willUpdate = true; 8 | if (typeof validator === "function") { 9 | willUpdate = validator(value); 10 | } 11 | if (willUpdate) { 12 | setValue(value); 13 | } 14 | }; 15 | return { props: { value, onChange }, utils: { setValue } }; 16 | }; 17 | -------------------------------------------------------------------------------- /useNetwork/README.md: -------------------------------------------------------------------------------- 1 | # @nooks/use-network 2 | 3 | React Hook to listen when the user goes online or offline. 4 | 5 | ## Installation 6 | 7 | #### yarn 8 | 9 | `yarn add @nooks/use-network` 10 | 11 | #### npm 12 | 13 | `npm i @nooks/use-network` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from "react"; 19 | import useNetwork from "@nooks/use-network"; 20 | 21 | function App() { 22 | const onNetworkChange = isOnline => 23 | console.log(isOnline ? "We are back online" : "We just got offline"); 24 | const isOnline = useNetwork(onNetworkChange); 25 | return

{isOnline ? "We are online" : "We are offline"}

; 26 | } 27 | ``` 28 | 29 | ### Arguments 30 | 31 | | Argument | Type | Description | Arguments | Required | 32 | | --------------- | -------- | ----------------------------------------------------- | ------------------ | -------- | 33 | | onNetworkChange | function | Function to be called when the network status changes | isOnline : Boolean | no | 34 | 35 | ### Return 36 | 37 | | Return value | Type | Description | Default value | 38 | | ------------ | ------- | --------------------------------------------------- | ------------- | 39 | | isOnline | Boolean | A boolean representing if the user is online or not | true | 40 | -------------------------------------------------------------------------------- /useNetwork/index.js: -------------------------------------------------------------------------------- 1 | export { useNetwork as default } from "./useNetwork"; 2 | -------------------------------------------------------------------------------- /useNetwork/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-network", 3 | "version": "1.0.0", 4 | "description": "React Hook to listen when the user goes online or offline.", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/nomadcoders/nooks.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "hooks", 13 | "online", 14 | "offline", 15 | "network", 16 | "status" 17 | ], 18 | "author": "Nicolás Serrano Arévalo ", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/nomadcoders/nooks/issues" 22 | }, 23 | "homepage": "https://github.com/nomadcoders/nooks#readme", 24 | "peerDependencies": { 25 | "react": "^16.8.6", 26 | "react-dom": "^16.8.6" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /useNetwork/useNetwork.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | export const useNetwork = onChange => { 4 | const [status, setStatus] = useState(navigator.onLine || true); 5 | const handleChange = () => { 6 | if (onChange && typeof onChange === "function") { 7 | onChange(navigator.onLine); 8 | } 9 | setStatus(navigator.onLine); 10 | }; 11 | useEffect(() => { 12 | window.addEventListener("online", handleChange); 13 | window.addEventListener("offline", handleChange); 14 | () => { 15 | window.removeEventListener("online", handleChange); 16 | window.removeEventListener("offline", handleChange); 17 | }; 18 | }, []); 19 | return status; 20 | }; 21 | -------------------------------------------------------------------------------- /useNotification/index.js: -------------------------------------------------------------------------------- 1 | export { useNotification as default } from "./useNotification"; 2 | -------------------------------------------------------------------------------- /useNotification/useNotification.js: -------------------------------------------------------------------------------- 1 | export const useNotification = (title, options) => { 2 | if (!("Notification" in window)) { 3 | return; 4 | } 5 | const fireNotif = () => { 6 | if (Notification.permission !== "granted") { 7 | Notification.requestPermission().then(permission => { 8 | if (permission === "granted") { 9 | new Notification(title, options); 10 | } else { 11 | return; 12 | } 13 | }); 14 | } else { 15 | new Notification(title, options); 16 | } 17 | }; 18 | return fireNotif; 19 | }; 20 | -------------------------------------------------------------------------------- /usePreventLeave/README.md: -------------------------------------------------------------------------------- 1 | # @nooks/use-prevent-leave 2 | 3 | React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved. 4 | 5 | ## Installation 6 | 7 | #### yarn 8 | 9 | `yarn add @nooks/use-prevent-leave` 10 | 11 | #### npm 12 | 13 | `npm i @nooks/use-prevent-leave` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from "react"; 19 | import usePreventLeave from "@nooks/use-prevent-leave"; 20 | 21 | function App() { 22 | const { enablePrevent, disablePrevent } = usePreventLeave(); 23 | const saveChanges = async () => { 24 | enablePrevent(); 25 | await sendToApi(); 26 | disablePrevent(); 27 | }; 28 | return ; 29 | } 30 | ``` 31 | 32 | ### Return 33 | 34 | | Return value | Type | Description | 35 | | ------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------- | 36 | | Functions | Object | A object containing functions `enablePrevent` and `disablePrevent`, use this functions to enable/disable the leaving prevention | 37 | -------------------------------------------------------------------------------- /usePreventLeave/index.js: -------------------------------------------------------------------------------- 1 | export { usePreventLeave as default } from "./usePreventLeave"; 2 | -------------------------------------------------------------------------------- /usePreventLeave/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-prevent-leave", 3 | "version": "1.0.0", 4 | "description": "React Hook to prompt the user for confirmation before leaving the page.", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/nomadcoders/nooks.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "hooks", 13 | "beforeunload", 14 | "onleave", 15 | "save", 16 | "changes" 17 | ], 18 | "author": "Nicolás Serrano Arévalo ", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/nomadcoders/nooks/issues" 22 | }, 23 | "homepage": "https://github.com/nomadcoders/nooks#readme", 24 | "peerDependencies": { 25 | "react": "^16.8.6", 26 | "react-dom": "^16.8.6" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /usePreventLeave/usePreventLeave.js: -------------------------------------------------------------------------------- 1 | export const usePreventLeave = () => { 2 | const listener = event => { 3 | event.preventDefault(); 4 | event.returnValue = ""; 5 | }; 6 | const enablePrevent = () => window.addEventListener("beforeunload", listener); 7 | const disablePrevent = () => 8 | window.removeEventListener("beforeunload", listener); 9 | return { enablePrevent, disablePrevent }; 10 | }; 11 | -------------------------------------------------------------------------------- /useScroll/README.md: -------------------------------------------------------------------------------- 1 | # @nooks/use-scroll 2 | 3 | React Hook to get X/Y coordinates of current position of the scroll. 4 | 5 | ## Installation 6 | 7 | #### yarn 8 | 9 | `yarn add @nooks/use-scroll` 10 | 11 | #### npm 12 | 13 | `npm i @nooks/use-scroll` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from "react"; 19 | import useScroll from "@nooks/use-scroll"; 20 | 21 | function App() { 22 | const { x, y } = useScroll(); 23 | return ( 24 |

25 | We are in: {x} / {y} 26 |

27 | ); 28 | } 29 | ``` 30 | 31 | ### Return 32 | 33 | | Return value | Type | Description | Default value | 34 | | ------------ | ------ | ----------------------------------------------------------------------- | ------------- | 35 | | Coords | Object | An object containing the x/y coordinates of the current scroll position | `{x:0, y:0}` | 36 | -------------------------------------------------------------------------------- /useScroll/index.js: -------------------------------------------------------------------------------- 1 | export { useScroll as default } from "./useScroll"; 2 | -------------------------------------------------------------------------------- /useScroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-scroll", 3 | "version": "1.0.0", 4 | "description": "React Hook to get X/Y coordinates of current position of the scroll.", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/nomadcoders/nooks.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "hooks", 13 | "scroll", 14 | "coords", 15 | "x/y" 16 | ], 17 | "author": "Nicolás Serrano Arévalo ", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/nomadcoders/nooks/issues" 21 | }, 22 | "homepage": "https://github.com/nomadcoders/nooks#readme", 23 | "peerDependencies": { 24 | "react": "^16.8.6", 25 | "react-dom": "^16.8.6" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /useScroll/useScroll.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | export const useScroll = () => { 4 | const [state, setState] = useState({ 5 | x: 0, 6 | y: 0 7 | }); 8 | const onScroll = () => { 9 | setState({ y: window.scrollY, x: window.scrollX }); 10 | }; 11 | useEffect(() => { 12 | window.addEventListener("scroll", onScroll); 13 | return () => window.removeEventListener("scroll", onScroll); 14 | }, []); 15 | return state; 16 | }; 17 | -------------------------------------------------------------------------------- /useTabs/index.js: -------------------------------------------------------------------------------- 1 | export { useTabs as default } from "./useTabs"; 2 | -------------------------------------------------------------------------------- /useTabs/useTabs.js: -------------------------------------------------------------------------------- 1 | export const useTabs = (initialTab, allTabs) => { 2 | if (!allTabs || !Array.isArray(allTabs)) { 3 | return; 4 | } 5 | const [currentIndex, setCurrentIndex] = useState(initialTab); 6 | return { 7 | currentItem: allTabs[currentIndex], 8 | changeItem: setCurrentIndex 9 | }; 10 | }; 11 | -------------------------------------------------------------------------------- /useTitle/README.md: -------------------------------------------------------------------------------- 1 | # @nooks/use-title 2 | 3 | React Hook to update your document's title. 4 | 5 | ## Installation 6 | 7 | #### yarn 8 | 9 | `yarn add @nooks/use-title` 10 | 11 | #### npm 12 | 13 | `npm i @nooks/use-title` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from "react"; 19 | import useTitle from "@nooks/use-title"; 20 | 21 | function App() { 22 | useTitle("Welcome"); 23 | return

Welcome

; 24 | } 25 | ``` 26 | 27 | ### Arguments 28 | 29 | | Argument | Type | Description | Required | 30 | | -------- | ------ | ------------------------------------------ | -------- | 31 | | title | string | The title you want to use on your document | yes | 32 | -------------------------------------------------------------------------------- /useTitle/index.js: -------------------------------------------------------------------------------- 1 | export { useTitle as default } from "./useTitle"; 2 | -------------------------------------------------------------------------------- /useTitle/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-title", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "js-tokens": { 8 | "version": "4.0.0", 9 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 10 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" 11 | }, 12 | "loose-envify": { 13 | "version": "1.4.0", 14 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", 15 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", 16 | "requires": { 17 | "js-tokens": "^3.0.0 || ^4.0.0" 18 | } 19 | }, 20 | "object-assign": { 21 | "version": "4.1.1", 22 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 23 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" 24 | }, 25 | "prop-types": { 26 | "version": "15.7.2", 27 | "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", 28 | "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", 29 | "requires": { 30 | "loose-envify": "^1.4.0", 31 | "object-assign": "^4.1.1", 32 | "react-is": "^16.8.1" 33 | } 34 | }, 35 | "react": { 36 | "version": "16.8.6", 37 | "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", 38 | "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", 39 | "requires": { 40 | "loose-envify": "^1.1.0", 41 | "object-assign": "^4.1.1", 42 | "prop-types": "^15.6.2", 43 | "scheduler": "^0.13.6" 44 | } 45 | }, 46 | "react-dom": { 47 | "version": "16.8.6", 48 | "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", 49 | "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", 50 | "requires": { 51 | "loose-envify": "^1.1.0", 52 | "object-assign": "^4.1.1", 53 | "prop-types": "^15.6.2", 54 | "scheduler": "^0.13.6" 55 | } 56 | }, 57 | "react-is": { 58 | "version": "16.8.6", 59 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", 60 | "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" 61 | }, 62 | "scheduler": { 63 | "version": "0.13.6", 64 | "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", 65 | "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", 66 | "requires": { 67 | "loose-envify": "^1.1.0", 68 | "object-assign": "^4.1.1" 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /useTitle/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nooks/use-title", 3 | "version": "1.0.1", 4 | "description": "React Hook to update your document's title", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/nomadcoders/nooks.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "hooks", 13 | "title" 14 | ], 15 | "author": "Nicolás Serrano Arévalo ", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/nomadcoders/nooks/issues" 19 | }, 20 | "homepage": "https://github.com/nomadcoders/nooks#readme", 21 | "peerDependencies": { 22 | "react": "^16.8.6", 23 | "react-dom": "^16.8.6" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /useTitle/useTitle.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const useTitle = initialTitle => { 4 | const [title, setTitle] = useState(initialTitle); 5 | const updateTitle = () => { 6 | const htmlTitle = document.querySelector("title"); 7 | htmlTitle.innerText = title; 8 | }; 9 | useEffect(updateTitle, [title]); 10 | return setTitle; 11 | }; 12 | --------------------------------------------------------------------------------