diff --git a/404.html b/404.html index 50ba03a..a790072 100644 --- a/404.html +++ b/404.html @@ -6,13 +6,13 @@ Page Not Found | Zop Hooks - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/83cb20ff.7526655d.js b/assets/js/83cb20ff.a32c2a1c.js similarity index 57% rename from assets/js/83cb20ff.7526655d.js rename to assets/js/83cb20ff.a32c2a1c.js index 6e25b9d..13bb927 100644 --- a/assets/js/83cb20ff.7526655d.js +++ b/assets/js/83cb20ff.a32c2a1c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkzop_hooks_docs=self.webpackChunkzop_hooks_docs||[]).push([[483],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>h});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=r.createContext({}),c=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},m=function(e){var t=c(e.components);return r.createElement(u.Provider,{value:t},e.children)},p="mdxType",l={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),p=c(n),d=o,h=p["".concat(u,".").concat(d)]||p[d]||l[d]||i;return n?r.createElement(h,a(a({ref:t},m),{},{components:n})):r.createElement(h,a({ref:t},m))}));function h(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=d;var s={};for(var u in t)hasOwnProperty.call(t,u)&&(s[u]=t[u]);s.originalType=e,s[p]="string"==typeof e?e:o,a[1]=s;for(var c=2;c{n.r(t),n.d(t,{contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>s,toc:()=>u});var r=n(7462),o=(n(7294),n(3905));const i={sidebar_position:2,custom_edit_url:"https://github.com/PranuPranav97/zop-hooks-docs"},a="useTimer",s={unversionedId:"Hooks/useTimer",id:"Hooks/useTimer",isDocsHomePage:!1,title:"useTimer",description:"useTimer Hook",source:"@site/docs/Hooks/useTimer.md",sourceDirName:"Hooks",slug:"/Hooks/useTimer",permalink:"/zop-hooks-docs/docs/Hooks/useTimer",editUrl:"https://github.com/PranuPranav97/zop-hooks-docs",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,custom_edit_url:"https://github.com/PranuPranav97/zop-hooks-docs"},sidebar:"tutorialSidebar",previous:{title:"useClipboard",permalink:"/zop-hooks-docs/docs/Hooks/useClipboard"},next:{title:"useDeviceType",permalink:"/zop-hooks-docs/docs/Hooks/useDeviceType"}},u=[{value:"1.Import the Hook",id:"1import-the-hook",children:[]},{value:"2.Initialize the timer by calling the useTimer hook:",id:"2initialize-the-timer-by-calling-the-usetimer-hook",children:[]},{value:"3.Use the timer properties and methods in your component:",id:"3use-the-timer-properties-and-methods-in-your-component",children:[]},{value:"4.Render the timer and buttons in your component's JSX:",id:"4render-the-timer-and-buttons-in-your-components-jsx",children:[]},{value:"API",id:"api",children:[]},{value:"Example",id:"example",children:[]}],c={toc:u},m="wrapper";function p(e){let{components:t,...n}=e;return(0,o.kt)(m,(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"usetimer"},"useTimer"),(0,o.kt)("p",null,"useTimer Hook\nThe useTimer hook is a custom React hook that provides a timer functionality. It allows you to start, pause, reset, and retrieve the current state and time of the timer."),(0,o.kt)("h3",{id:"1import-the-hook"},"1.Import the Hook"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},'import useTimer from "zop-hooks";\n')),(0,o.kt)("h3",{id:"2initialize-the-timer-by-calling-the-usetimer-hook"},"2.Initialize the timer by calling the useTimer hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},"const timer = useTimer();\n")),(0,o.kt)("h3",{id:"3use-the-timer-properties-and-methods-in-your-component"},"3.Use the timer properties and methods in your component:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},"// Access the current time and state of the timer\nconst currentTime = timer.time;\nconst currentTimerState = timer.state;\n\n// Start the timer\nconst handleStart = () => {\n timer.start();\n};\n\n// Pause the timer\nconst handlePause = () => {\n timer.pause();\n};\n\n// Reset the timer\nconst handleReset = () => {\n timer.reset();\n};\n")),(0,o.kt)("h3",{id:"4render-the-timer-and-buttons-in-your-components-jsx"},"4.Render the timer and buttons in your component's JSX:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},"return (\n
\n

Time: {currentTime}

\n

State: {currentTimerState}

\n \n \n \n
\n);\n")),(0,o.kt)("h2",{id:"api"},"API"),(0,o.kt)("p",null,"The useTimer hook returns an object with the following properties and methods:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"time: number - The current time of the timer."),(0,o.kt)("li",{parentName:"ul"},'state: TimerState - The current state of the timer. Possible values are "idle", "running", or "paused".'),(0,o.kt)("li",{parentName:"ul"},"start: () => void - A function to start the timer."),(0,o.kt)("li",{parentName:"ul"},"pause: () => void - A function to pause the timer."),(0,o.kt)("li",{parentName:"ul"},"reset: () => void - A function to reset the timer.")),(0,o.kt)("h2",{id:"example"},"Example"),(0,o.kt)("p",null,"Here's a complete example of using the useTimer hook in a React component:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},'import React from "react";\nimport useTimer from "zop-hooks";\n\nconst TimerComponent = () => {\n const timer = useTimer();\n\n const currentTime = timer.time;\n const currentTimerState = timer.state;\n\n const handleStart = () => {\n timer.start();\n };\n\n const handlePause = () => {\n timer.pause();\n };\n\n const handleReset = () => {\n timer.reset();\n };\n\n return (\n
\n

Time: {currentTime}

\n

State: {currentTimerState}

\n \n \n \n
\n );\n};\n\nexport default TimerComponent;\n')),(0,o.kt)("p",null,"That's it! You can now use the useTimer hook in your project to add timer functionality to your components."))}p.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkzop_hooks_docs=self.webpackChunkzop_hooks_docs||[]).push([[483],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>h});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=r.createContext({}),c=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},m=function(e){var t=c(e.components);return r.createElement(u.Provider,{value:t},e.children)},p="mdxType",l={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),p=c(n),d=o,h=p["".concat(u,".").concat(d)]||p[d]||l[d]||i;return n?r.createElement(h,a(a({ref:t},m),{},{components:n})):r.createElement(h,a({ref:t},m))}));function h(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=d;var s={};for(var u in t)hasOwnProperty.call(t,u)&&(s[u]=t[u]);s.originalType=e,s[p]="string"==typeof e?e:o,a[1]=s;for(var c=2;c{n.r(t),n.d(t,{contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>s,toc:()=>u});var r=n(7462),o=(n(7294),n(3905));const i={sidebar_position:2,custom_edit_url:"https://github.com/PranuPranav97/zop-hooks-docs"},a="useTimer",s={unversionedId:"Hooks/useTimer",id:"Hooks/useTimer",isDocsHomePage:!1,title:"useTimer",description:"useTimer Hook",source:"@site/docs/Hooks/useTimer.md",sourceDirName:"Hooks",slug:"/Hooks/useTimer",permalink:"/zop-hooks-docs/docs/Hooks/useTimer",editUrl:"https://github.com/PranuPranav97/zop-hooks-docs",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,custom_edit_url:"https://github.com/PranuPranav97/zop-hooks-docs"},sidebar:"tutorialSidebar",previous:{title:"useClipboard",permalink:"/zop-hooks-docs/docs/Hooks/useClipboard"},next:{title:"useDeviceType",permalink:"/zop-hooks-docs/docs/Hooks/useDeviceType"}},u=[{value:"1.Import the Hook",id:"1import-the-hook",children:[]},{value:"2.Initialize the timer by calling the useTimer hook:",id:"2initialize-the-timer-by-calling-the-usetimer-hook",children:[]},{value:"3.Use the timer properties and methods in your component:",id:"3use-the-timer-properties-and-methods-in-your-component",children:[]},{value:"4.Render the timer and buttons in your component's JSX:",id:"4render-the-timer-and-buttons-in-your-components-jsx",children:[]},{value:"API",id:"api",children:[]},{value:"Example",id:"example",children:[]}],c={toc:u},m="wrapper";function p(e){let{components:t,...n}=e;return(0,o.kt)(m,(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"usetimer"},"useTimer"),(0,o.kt)("p",null,"useTimer Hook\nThe useTimer hook is a custom React hook that provides a timer functionality. It allows you to start, pause, reset, and retrieve the current state and time of the timer."),(0,o.kt)("h3",{id:"1import-the-hook"},"1.Import the Hook"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},'import { useTimer } from "zop-hooks";\n')),(0,o.kt)("h3",{id:"2initialize-the-timer-by-calling-the-usetimer-hook"},"2.Initialize the timer by calling the useTimer hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},"const timer = useTimer();\n")),(0,o.kt)("h3",{id:"3use-the-timer-properties-and-methods-in-your-component"},"3.Use the timer properties and methods in your component:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},"// Access the current time and state of the timer\nconst currentTime = timer.time;\nconst currentTimerState = timer.state;\n\n// Start the timer\nconst handleStart = () => {\n timer.start();\n};\n\n// Pause the timer\nconst handlePause = () => {\n timer.pause();\n};\n\n// Reset the timer\nconst handleReset = () => {\n timer.reset();\n};\n")),(0,o.kt)("h3",{id:"4render-the-timer-and-buttons-in-your-components-jsx"},"4.Render the timer and buttons in your component's JSX:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},"return (\n
\n

Time: {currentTime}

\n

State: {currentTimerState}

\n \n \n \n
\n);\n")),(0,o.kt)("h2",{id:"api"},"API"),(0,o.kt)("p",null,"The useTimer hook returns an object with the following properties and methods:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"time: number - The current time of the timer."),(0,o.kt)("li",{parentName:"ul"},'state: TimerState - The current state of the timer. Possible values are "idle", "running", or "paused".'),(0,o.kt)("li",{parentName:"ul"},"start: () => void - A function to start the timer."),(0,o.kt)("li",{parentName:"ul"},"pause: () => void - A function to pause the timer."),(0,o.kt)("li",{parentName:"ul"},"reset: () => void - A function to reset the timer.")),(0,o.kt)("h2",{id:"example"},"Example"),(0,o.kt)("p",null,"Here's a complete example of using the useTimer hook in a React component:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},'import React from "react";\nimport useTimer from "zop-hooks";\n\nconst TimerComponent = () => {\n const timer = useTimer();\n\n const currentTime = timer.time;\n const currentTimerState = timer.state;\n\n const handleStart = () => {\n timer.start();\n };\n\n const handlePause = () => {\n timer.pause();\n };\n\n const handleReset = () => {\n timer.reset();\n };\n\n return (\n
\n

Time: {currentTime}

\n

State: {currentTimerState}

\n \n \n \n
\n );\n};\n\nexport default TimerComponent;\n')),(0,o.kt)("p",null,"That's it! You can now use the useTimer hook in your project to add timer functionality to your components."))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.7bf9621c.js b/assets/js/runtime~main.fa3fdf6e.js similarity index 98% rename from assets/js/runtime~main.7bf9621c.js rename to assets/js/runtime~main.fa3fdf6e.js index 688b27e..b4f945c 100644 --- a/assets/js/runtime~main.7bf9621c.js +++ b/assets/js/runtime~main.fa3fdf6e.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,t,c,r,f={},o={};function d(e){var a=o[e];if(void 0!==a)return a.exports;var t=o[e]={id:e,loaded:!1,exports:{}};return f[e].call(t.exports,t,t.exports,d),t.loaded=!0,t.exports}d.m=f,d.c=o,e=[],d.O=(a,t,c,r)=>{if(!t){var f=1/0;for(i=0;i=r)&&Object.keys(d.O).every((e=>d.O[e](t[n])))?t.splice(n--,1):(o=!1,r0&&e[i-1][2]>r;i--)e[i]=e[i-1];e[i]=[t,c,r]},d.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return d.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var r=Object.create(null);d.r(r);var f={};a=a||[null,t({}),t([]),t(t)];for(var o=2&c&&e;"object"==typeof o&&!~a.indexOf(o);o=t(o))Object.getOwnPropertyNames(o).forEach((a=>f[a]=()=>e[a]));return f.default=()=>e,d.d(r,f),r},d.d=(e,a)=>{for(var t in a)d.o(a,t)&&!d.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((a,t)=>(d.f[t](e,a),a)),[])),d.u=e=>"assets/js/"+({3:"925b3f96",13:"01a85c17",14:"ce90636e",18:"e68948f3",36:"73664a40",53:"935f2afb",85:"1f391b9e",89:"a6aa9e1f",103:"ccc49370",121:"55960ee5",157:"53c2f6b2",195:"c4f5d8e4",267:"59362658",340:"5dcb43cb",362:"e273c56f",371:"c2a8a664",382:"aaeaa27b",384:"d9f32620",414:"393be207",451:"3165409d",472:"49819b8a",483:"83cb20ff",505:"7532310a",514:"1be78505",518:"ac6679ff",535:"814f3328",608:"9e4087bc",610:"6875c492",628:"0b9f6f16",635:"4220c86d",636:"f4f34a3a",642:"7661071f",671:"0e384e19",751:"3720c009",794:"d03b3739",814:"006ad939",818:"5d2c407c",839:"baffd50f",905:"8d6e64ae",914:"bf27aa14",918:"17896441",948:"8717b14a",987:"c43f2539"}[e]||e)+"."+{3:"8eaa8772",13:"f3773d47",14:"79e293ca",18:"ff1f825d",36:"fbb6c94e",53:"218ba491",75:"72c28c63",85:"e58228eb",89:"8ccad5d9",103:"555a63b4",121:"267b8b1f",157:"130804af",159:"80deb73c",195:"ee853c41",267:"68f8795c",340:"68e107fd",362:"cc031e34",371:"5d1c676b",382:"d247d5e3",384:"0882d4e9",414:"90578512",451:"a868f469",472:"617d5492",483:"7526655d",505:"be459493",514:"203ef331",518:"351e68e6",535:"0db89639",608:"6d899cea",610:"716134ac",628:"e41e7bc4",635:"87ec35d8",636:"e839ce32",642:"16875e0e",671:"97cc0482",698:"9e78fbcf",727:"562459d2",751:"089d6b95",794:"db982530",814:"998104b2",818:"a1981f64",839:"bd08e755",905:"c346c98c",914:"464016dd",918:"bbeef26e",948:"dc37301c",987:"a1ef30f9"}[e]+".js",d.miniCssF=e=>"assets/css/styles.a39c77e9.css",d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),c={},r="zop-hooks-docs:",d.l=(e,a,t,f)=>{if(c[e])c[e].push(a);else{var o,n;if(void 0!==t)for(var b=document.getElementsByTagName("script"),i=0;i{o.onerror=o.onload=null,clearTimeout(l);var r=c[e];if(delete c[e],o.parentNode&&o.parentNode.removeChild(o),r&&r.forEach((e=>e(t))),a)return a(t)},l=setTimeout(u.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=u.bind(null,o.onerror),o.onload=u.bind(null,o.onload),n&&document.head.appendChild(o)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/zop-hooks-docs/",d.gca=function(e){return e={17896441:"918",59362658:"267","925b3f96":"3","01a85c17":"13",ce90636e:"14",e68948f3:"18","73664a40":"36","935f2afb":"53","1f391b9e":"85",a6aa9e1f:"89",ccc49370:"103","55960ee5":"121","53c2f6b2":"157",c4f5d8e4:"195","5dcb43cb":"340",e273c56f:"362",c2a8a664:"371",aaeaa27b:"382",d9f32620:"384","393be207":"414","3165409d":"451","49819b8a":"472","83cb20ff":"483","7532310a":"505","1be78505":"514",ac6679ff:"518","814f3328":"535","9e4087bc":"608","6875c492":"610","0b9f6f16":"628","4220c86d":"635",f4f34a3a:"636","7661071f":"642","0e384e19":"671","3720c009":"751",d03b3739:"794","006ad939":"814","5d2c407c":"818",baffd50f:"839","8d6e64ae":"905",bf27aa14:"914","8717b14a":"948",c43f2539:"987"}[e]||e,d.p+d.u(e)},(()=>{var e={303:0,532:0};d.f.j=(a,t)=>{var c=d.o(e,a)?e[a]:void 0;if(0!==c)if(c)t.push(c[2]);else if(/^(303|532)$/.test(a))e[a]=0;else{var r=new Promise(((t,r)=>c=e[a]=[t,r]));t.push(c[2]=r);var f=d.p+d.u(a),o=new Error;d.l(f,(t=>{if(d.o(e,a)&&(0!==(c=e[a])&&(e[a]=void 0),c)){var r=t&&("load"===t.type?"missing":t.type),f=t&&t.target&&t.target.src;o.message="Loading chunk "+a+" failed.\n("+r+": "+f+")",o.name="ChunkLoadError",o.type=r,o.request=f,c[1](o)}}),"chunk-"+a,a)}},d.O.j=a=>0===e[a];var a=(a,t)=>{var c,r,f=t[0],o=t[1],n=t[2],b=0;if(f.some((a=>0!==e[a]))){for(c in o)d.o(o,c)&&(d.m[c]=o[c]);if(n)var i=n(d)}for(a&&a(t);b{"use strict";var e,a,t,c,r,f={},o={};function d(e){var a=o[e];if(void 0!==a)return a.exports;var t=o[e]={id:e,loaded:!1,exports:{}};return f[e].call(t.exports,t,t.exports,d),t.loaded=!0,t.exports}d.m=f,d.c=o,e=[],d.O=(a,t,c,r)=>{if(!t){var f=1/0;for(i=0;i=r)&&Object.keys(d.O).every((e=>d.O[e](t[n])))?t.splice(n--,1):(o=!1,r0&&e[i-1][2]>r;i--)e[i]=e[i-1];e[i]=[t,c,r]},d.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return d.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var r=Object.create(null);d.r(r);var f={};a=a||[null,t({}),t([]),t(t)];for(var o=2&c&&e;"object"==typeof o&&!~a.indexOf(o);o=t(o))Object.getOwnPropertyNames(o).forEach((a=>f[a]=()=>e[a]));return f.default=()=>e,d.d(r,f),r},d.d=(e,a)=>{for(var t in a)d.o(a,t)&&!d.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((a,t)=>(d.f[t](e,a),a)),[])),d.u=e=>"assets/js/"+({3:"925b3f96",13:"01a85c17",14:"ce90636e",18:"e68948f3",36:"73664a40",53:"935f2afb",85:"1f391b9e",89:"a6aa9e1f",103:"ccc49370",121:"55960ee5",157:"53c2f6b2",195:"c4f5d8e4",267:"59362658",340:"5dcb43cb",362:"e273c56f",371:"c2a8a664",382:"aaeaa27b",384:"d9f32620",414:"393be207",451:"3165409d",472:"49819b8a",483:"83cb20ff",505:"7532310a",514:"1be78505",518:"ac6679ff",535:"814f3328",608:"9e4087bc",610:"6875c492",628:"0b9f6f16",635:"4220c86d",636:"f4f34a3a",642:"7661071f",671:"0e384e19",751:"3720c009",794:"d03b3739",814:"006ad939",818:"5d2c407c",839:"baffd50f",905:"8d6e64ae",914:"bf27aa14",918:"17896441",948:"8717b14a",987:"c43f2539"}[e]||e)+"."+{3:"8eaa8772",13:"f3773d47",14:"79e293ca",18:"ff1f825d",36:"fbb6c94e",53:"218ba491",75:"72c28c63",85:"e58228eb",89:"8ccad5d9",103:"555a63b4",121:"267b8b1f",157:"130804af",159:"80deb73c",195:"ee853c41",267:"68f8795c",340:"68e107fd",362:"cc031e34",371:"5d1c676b",382:"d247d5e3",384:"0882d4e9",414:"90578512",451:"a868f469",472:"617d5492",483:"a32c2a1c",505:"be459493",514:"203ef331",518:"351e68e6",535:"0db89639",608:"6d899cea",610:"716134ac",628:"e41e7bc4",635:"87ec35d8",636:"e839ce32",642:"16875e0e",671:"97cc0482",698:"9e78fbcf",727:"562459d2",751:"089d6b95",794:"db982530",814:"998104b2",818:"a1981f64",839:"bd08e755",905:"c346c98c",914:"464016dd",918:"bbeef26e",948:"dc37301c",987:"a1ef30f9"}[e]+".js",d.miniCssF=e=>"assets/css/styles.a39c77e9.css",d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),c={},r="zop-hooks-docs:",d.l=(e,a,t,f)=>{if(c[e])c[e].push(a);else{var o,n;if(void 0!==t)for(var b=document.getElementsByTagName("script"),i=0;i{o.onerror=o.onload=null,clearTimeout(l);var r=c[e];if(delete c[e],o.parentNode&&o.parentNode.removeChild(o),r&&r.forEach((e=>e(t))),a)return a(t)},l=setTimeout(u.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=u.bind(null,o.onerror),o.onload=u.bind(null,o.onload),n&&document.head.appendChild(o)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/zop-hooks-docs/",d.gca=function(e){return e={17896441:"918",59362658:"267","925b3f96":"3","01a85c17":"13",ce90636e:"14",e68948f3:"18","73664a40":"36","935f2afb":"53","1f391b9e":"85",a6aa9e1f:"89",ccc49370:"103","55960ee5":"121","53c2f6b2":"157",c4f5d8e4:"195","5dcb43cb":"340",e273c56f:"362",c2a8a664:"371",aaeaa27b:"382",d9f32620:"384","393be207":"414","3165409d":"451","49819b8a":"472","83cb20ff":"483","7532310a":"505","1be78505":"514",ac6679ff:"518","814f3328":"535","9e4087bc":"608","6875c492":"610","0b9f6f16":"628","4220c86d":"635",f4f34a3a:"636","7661071f":"642","0e384e19":"671","3720c009":"751",d03b3739:"794","006ad939":"814","5d2c407c":"818",baffd50f:"839","8d6e64ae":"905",bf27aa14:"914","8717b14a":"948",c43f2539:"987"}[e]||e,d.p+d.u(e)},(()=>{var e={303:0,532:0};d.f.j=(a,t)=>{var c=d.o(e,a)?e[a]:void 0;if(0!==c)if(c)t.push(c[2]);else if(/^(303|532)$/.test(a))e[a]=0;else{var r=new Promise(((t,r)=>c=e[a]=[t,r]));t.push(c[2]=r);var f=d.p+d.u(a),o=new Error;d.l(f,(t=>{if(d.o(e,a)&&(0!==(c=e[a])&&(e[a]=void 0),c)){var r=t&&("load"===t.type?"missing":t.type),f=t&&t.target&&t.target.src;o.message="Loading chunk "+a+" failed.\n("+r+": "+f+")",o.name="ChunkLoadError",o.type=r,o.request=f,c[1](o)}}),"chunk-"+a,a)}},d.O.j=a=>0===e[a];var a=(a,t)=>{var c,r,f=t[0],o=t[1],n=t[2],b=0;if(f.some((a=>0!==e[a]))){for(c in o)d.o(o,c)&&(d.m[c]=o[c]);if(n)var i=n(d)}for(a&&a(t);b Archive | Zop Hooks - +

Archive

Archive

2019

2021

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/first-blog-post/index.html b/blog/first-blog-post/index.html index 2bd637a..300ccfb 100644 --- a/blog/first-blog-post/index.html +++ b/blog/first-blog-post/index.html @@ -6,13 +6,13 @@ First Blog Post | Zop Hooks - +

First Blog Post

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index ad570ff..b83c8b7 100644 --- a/blog/index.html +++ b/blog/index.html @@ -6,13 +6,13 @@ Blog | Zop Hooks - +

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/long-blog-post/index.html b/blog/long-blog-post/index.html index 34d152e..d970d84 100644 --- a/blog/long-blog-post/index.html +++ b/blog/long-blog-post/index.html @@ -6,13 +6,13 @@ Long Blog Post | Zop Hooks - +

Long Blog Post

· 3 min read
Endilie Yacop Sucipto

This is the summary of a very long blog post,

Use a <!-- truncate --> comment to limit blog post size in the list view.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/mdx-blog-post/index.html b/blog/mdx-blog-post/index.html index 2e89165..42074a2 100644 --- a/blog/mdx-blog-post/index.html +++ b/blog/mdx-blog-post/index.html @@ -6,13 +6,13 @@ MDX Blog Post | Zop Hooks - +
Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/tags/docusaurus/index.html b/blog/tags/docusaurus/index.html index 999eb48..aec662c 100644 --- a/blog/tags/docusaurus/index.html +++ b/blog/tags/docusaurus/index.html @@ -6,13 +6,13 @@ 4 posts tagged with "docusaurus" | Zop Hooks - +

4 posts tagged with "docusaurus"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/tags/facebook/index.html b/blog/tags/facebook/index.html index a4e7b26..0c3494b 100644 --- a/blog/tags/facebook/index.html +++ b/blog/tags/facebook/index.html @@ -6,13 +6,13 @@ One post tagged with "facebook" | Zop Hooks - +

One post tagged with "facebook"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/tags/hello/index.html b/blog/tags/hello/index.html index 6431957..35ec5c0 100644 --- a/blog/tags/hello/index.html +++ b/blog/tags/hello/index.html @@ -6,13 +6,13 @@ 2 posts tagged with "hello" | Zop Hooks - +

2 posts tagged with "hello"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/tags/hola/index.html b/blog/tags/hola/index.html index 8d70df7..f0d2db2 100644 --- a/blog/tags/hola/index.html +++ b/blog/tags/hola/index.html @@ -6,13 +6,13 @@ One post tagged with "hola" | Zop Hooks - +

One post tagged with "hola"

View All Tags

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/tags/index.html b/blog/tags/index.html index fc82fcc..a0cacb9 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -6,13 +6,13 @@ Tags | Zop Hooks - +

Tags

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/blog/welcome/index.html b/blog/welcome/index.html index eb3e8c9..0830002 100644 --- a/blog/welcome/index.html +++ b/blog/welcome/index.html @@ -6,13 +6,13 @@ Welcome | Zop Hooks - +

Welcome

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useClipboard/index.html b/docs/Hooks/useClipboard/index.html index e9f547e..ff22fe1 100644 --- a/docs/Hooks/useClipboard/index.html +++ b/docs/Hooks/useClipboard/index.html @@ -6,7 +6,7 @@ useClipboard | Zop Hooks - + @@ -20,7 +20,7 @@ if ("clipboard" in navigator) { getClipboardContent(); } }, []); return clipboardContent;} export { useClipboard };

In the above example, the hook uses the useState and useEffect hooks from React to manage the state of the clipboard content and retrieve it asynchronously. The getClipboardContent function is called only once when the component mounts (empty dependency array []), and it checks if the browser supports the Clipboard API before attempting to read the clipboard's content.

Please note that this hook requires the user's explicit permission to access the clipboard. Additionally, it relies on the availability of the Clipboard API, which may not be supported in all browsers or environments.

Feel free to modify and adapt this documentation according to your project's needs. Let me know if you need any further assistance!

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useDeviceType/index.html b/docs/Hooks/useDeviceType/index.html index f924d43..a575044 100644 --- a/docs/Hooks/useDeviceType/index.html +++ b/docs/Hooks/useDeviceType/index.html @@ -6,7 +6,7 @@ useDeviceType | Zop Hooks - + @@ -21,7 +21,7 @@ useEffect(() => { const userAgent = navigator.userAgent; if (userAgent.match(/Android/i)) { setDeviceType(DeviceType.Android); } else if (userAgent.match(/webOS/i)) { setDeviceType(DeviceType.WebOs); } else if (userAgent.match(/iPhone/i)) { setDeviceType(DeviceType.Iphone); } else if (userAgent.match(/iPad/i)) { setDeviceType(DeviceType.Ipad); } else if (userAgent.match(/iPod/i)) { setDeviceType(DeviceType.Ipod); } else if (userAgent.match(/BlackBerry/i)) { setDeviceType(DeviceType.BlackBerry); } else if (userAgent.match(/Windows Phone/i)) { setDeviceType(DeviceType.WindowsPhone); } else { setDeviceType(DeviceType.Desktop); } }, []); return deviceType;} export { useDeviceType, DeviceType };

In the above example, the useDeviceType hook determines the device type by checking the user agent string using regular expressions. The device type is set using the useState hook and updated in the useEffect hook when the component mounts (empty dependency array []).

You can access the determined device type using the deviceType variable in your component logic and utilize it as needed.

Feel free to modify and adapt this documentation according to your project's needs. Let me know if you need any further assistance!

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useGeolocation/index.html b/docs/Hooks/useGeolocation/index.html index ff61110..eaa8285 100644 --- a/docs/Hooks/useGeolocation/index.html +++ b/docs/Hooks/useGeolocation/index.html @@ -6,7 +6,7 @@ useGeolocation | Zop Hooks - + @@ -16,7 +16,7 @@ // Use the geolocation data in your component // ... return ( // JSX for your component );}

It's important to consider the potential privacy concerns and browser compatibility issues when using the geolocation feature. Ensure that you handle cases where the geolocation data is unavailable or when the user denies permission to access their location.

Feel free to modify and adapt this documentation according to your project's needs. Let me know if you need any further assistance!

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useKeyPress/index.html b/docs/Hooks/useKeyPress/index.html index cd36308..8026f17 100644 --- a/docs/Hooks/useKeyPress/index.html +++ b/docs/Hooks/useKeyPress/index.html @@ -6,7 +6,7 @@ useKeyPress | Zop Hooks - + @@ -16,7 +16,7 @@ return ( // JSX code here... );}

Replace KeyboardCharacter.TargetKey with the specific keyboard key you want to detect. You can use the values defined in the KeyboardCharacter enum.

You can access the isKeyPressed value in your component logic and use it to conditionally render components, trigger actions, or perform any other desired functionality based on the key press state.

Make sure to provide the correct KeyboardCharacter value as the targetKey when using the useKeyPress hook.

You can use the enum provided by the zop-hooks to specify the keys. The enum declaration is:

enum KeyboardCharacter {  A = "a",  B = "b",  C = "c",  D = "d",  E = "e",  F = "f",  G = "g",  H = "h",  I = "i",  J = "j",  K = "k",  L = "l",  M = "m",  N = "n",  O = "o",  P = "p",  Q = "q",  R = "r",  S = "s",  T = "t",  U = "u",  V = "v",  W = "w",  X = "x",  Y = "y",  Z = "z",  Zero = "0",  One = "1",  Two = "2",  Three = "3",  Four = "4",  Five = "5",  Six = "6",  Seven = "7",  Eight = "8",  Nine = "9",  Space = " ",  Enter = "Enter",  Tab = "Tab",  Escape = "Escape",  Backspace = "Backspace",  ArrowUp = "ArrowUp",  ArrowDown = "ArrowDown",  ArrowLeft = "ArrowLeft",  ArrowRight = "ArrowRight",  Shift = "Shift",  Control = "Control",  Alt = "Alt",  Meta = "Meta",  CapsLock = "CapsLock",  F1 = "F1",  F2 = "F2",  F3 = "F3",  F4 = "F4",  F5 = "F5",  F6 = "F6",  F7 = "F7",  F8 = "F8",  F9 = "F9",  F10 = "F10",  F11 = "F11",  F12 = "F12",}

Return Value#

The useKeyPress hook returns a boolean value indicating whether the specified key is currently pressed (true) or not pressed (false).

Feel free to modify and adapt this documentation according to your project's needs. Let me know if you need any further assistance!

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useMousePosition/index.html b/docs/Hooks/useMousePosition/index.html index a42f2f0..ac33a6c 100644 --- a/docs/Hooks/useMousePosition/index.html +++ b/docs/Hooks/useMousePosition/index.html @@ -6,7 +6,7 @@ useMousePosition | Zop Hooks - + @@ -15,7 +15,7 @@ function MousePositionComponent() { const mousePosition = useMousePosition(); return ( <div> <p>Mouse X: {mousePosition.x}</p> <p>Mouse Y: {mousePosition.y}</p> </div> );} export default MousePositionComponent;

In the above example, the MousePositionComponent component uses the useMousePosition hook to track the mouse position and display it on the screen.

Implementation Details#

The useMousePosition hook internally uses React's useState and useEffect hooks. It initializes the mousePosition state to { x: 0, y: 0 } and updates it whenever the mouse moves.

The useEffect hook is used to add an event listener to the mousemove event on the window object. The event listener updates the mousePosition state with the current mouse coordinates (e.clientX and e.clientY).

To clean up the event listener when the component unmounts or the hook dependencies change, the useEffect hook returns a cleanup function that removes the event listener.

Please note that this documentation assumes you have a basic understanding of React and React hooks. If you're new to React or hooks, it's recommended to read the official React documentation for more information.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useOnlineStatus/index.html b/docs/Hooks/useOnlineStatus/index.html index 4b65c7e..abf729c 100644 --- a/docs/Hooks/useOnlineStatus/index.html +++ b/docs/Hooks/useOnlineStatus/index.html @@ -6,7 +6,7 @@ useOnlineStatus | Zop Hooks - + @@ -15,7 +15,7 @@ function OnlineStatusComponent() { const isOnline = useOnlineStatus(); return ( <div> <p>Online Status: {isOnline ? "Online" : "Offline"}</p> </div> );} export default OnlineStatusComponent;

In the above example, the OnlineStatusComponent component uses the useOnlineStatus hook to track the online status of the user's browser and display it on the screen.

Implementation Details#

The useOnlineStatus hook internally uses React's useState and useEffect hooks. It initializes the isOnline state to the initial value of navigator.onLine, which represents the current online status of the browser.

The useEffect hook is used to add event listeners for the online and offline events on the window object. When the browser goes online, the handleOnline function is called, updating the isOnline state to true. Conversely, when the browser goes offline, the handleOffline function is called, updating the isOnline state to false.

To clean up the event listeners when the component unmounts or the hook dependencies change, the useEffect hook returns a cleanup function that removes the event listeners.

Please note that this documentation assumes you have a basic understanding of React and React hooks. If you're new to React or hooks, it's recommended to read the official React documentation for more information.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/usePageTimer/index.html b/docs/Hooks/usePageTimer/index.html index dc4f7a0..f9f6460 100644 --- a/docs/Hooks/usePageTimer/index.html +++ b/docs/Hooks/usePageTimer/index.html @@ -6,7 +6,7 @@ usePageTimer | Zop Hooks - + @@ -16,7 +16,7 @@ // Render the time spent on the page return <div>Time spent: {timeSpent} seconds</div>;}

Example#

import React from "react";import { usePageTimer } from "./usePageTimer";
 function MyComponent() {  const timeSpent = usePageTimer();
   return <div>Time spent on this page: {timeSpent} seconds</div>;}

In this example, the timeSpent value returned by the usePageTimer hook is rendered in a div element to display the time spent on the page.

That's it! You can now use the usePageTimer hook to measure the time spent on a page in your React components.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useScreenBrightness/index.html b/docs/Hooks/useScreenBrightness/index.html index 67f4730..e6ab3fa 100644 --- a/docs/Hooks/useScreenBrightness/index.html +++ b/docs/Hooks/useScreenBrightness/index.html @@ -6,7 +6,7 @@ useScreenBrightness | Zop Hooks - + @@ -14,7 +14,7 @@

useScreenBrightness

useScreenBrightness#

The useScreenBrightness hook is a custom React hook that allows you to get the current screen brightness of a device. It utilizes the window.screen API and the devicelight event to provide the brightness value.

Usage#

To use the useScreenBrightness hook, follow these steps:

Import the useScreenBrightness hook in your React component:

import { useScreenBrightness } from "zop-hooks";

Call the useScreenBrightness hook within your functional component to retrieve the screen brightness value:

const brightness = useScreenBrightness();

The brightness variable will hold the current screen brightness value.

Example#

Here's an example of how you can use the useScreenBrightness hook in a React component:

import React from "react";import { useScreenBrightness } from "./useScreenBrightness";
 function MyComponent() {  const brightness = useScreenBrightness();
   return (    <div>      <p>Screen Brightness: {brightness}</p>    </div>  );}

In the example above, the MyComponent functional component uses the useScreenBrightness hook to retrieve the screen brightness value. The brightness value is then displayed in the component's output.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useScreenOrientation/index.html b/docs/Hooks/useScreenOrientation/index.html index 9be1067..95d000b 100644 --- a/docs/Hooks/useScreenOrientation/index.html +++ b/docs/Hooks/useScreenOrientation/index.html @@ -6,7 +6,7 @@ useScreenOrientation | Zop Hooks - + @@ -14,7 +14,7 @@

useScreenOrientation

useScreenOrientation#

The useScreenOrientation hook is a custom React hook that allows you to retrieve the current orientation of the screen. It utilizes the window.screen.orientation API and the orientationchange event to provide the orientation value.

Usage#

To use the useScreenOrientation hook, follow these steps:

Import the useScreenOrientation hook and the ScreenOrientation enum in your React component:

import { useScreenOrientation, ScreenOrientation } from "zop-hooks";

Call the useScreenOrientation hook within your functional component to retrieve the screen orientation:

const orientation = useScreenOrientation();
const orientation = useScreenOrientation();

The orientation variable will hold the current screen orientation value, which will be one of the values from the ScreenOrientation enum.

Example#

Here's an example of how you can use the useScreenOrientation hook in a React component:

import React from "react";import { useScreenOrientation, ScreenOrientation } from "zop-hooks";
 function MyComponent() {  const orientation = useScreenOrientation();
   return (    <div>      <p>Screen Orientation: {orientation}</p>    </div>  );}

In the example above, the MyComponent functional component uses the useScreenOrientation hook to retrieve the screen orientation. The orientation value is then displayed in the component's output.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useScreenSize/index.html b/docs/Hooks/useScreenSize/index.html index 6e8d21a..91dce5c 100644 --- a/docs/Hooks/useScreenSize/index.html +++ b/docs/Hooks/useScreenSize/index.html @@ -6,7 +6,7 @@ useScreenSize | Zop Hooks - + @@ -23,7 +23,7 @@ function MyComponent() { const screenSize = useScreenSize(); // Access the screen size values const width = screenSize.width; const height = screenSize.height; return ( <div> <p>Screen Width: {width}px</p> <p>Screen Height: {height}px</p> </div> );}

In this example, the component displays the current screen width and height in pixels.

Notes#

  • The useScreenSize hook uses the useState and useEffect hooks from React to manage state and perform side effects respectively.
  • The initial screen size is obtained when the hook is first invoked, but subsequent updates are triggered only when the window is resized. This optimization helps reduce unnecessary re-renders.
  • The event listener for window resize is added and removed in the useEffect hook's cleanup function to ensure proper handling of the event.

Remember to include the necessary import statements and adjust the file paths accordingly when using the useScreenSize hook in your project.

That's it! You can now utilize the useScreenSize hook to get the current screen size in your React components.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useScrollPosition/index.html b/docs/Hooks/useScrollPosition/index.html index f032dc9..3ef88b5 100644 --- a/docs/Hooks/useScrollPosition/index.html +++ b/docs/Hooks/useScrollPosition/index.html @@ -6,7 +6,7 @@ useScrollPosition | Zop Hooks - + @@ -17,7 +17,7 @@ function MyComponent() { const scrollPosition = useScrollPosition(); // Access the scroll position values const scrollX = scrollPosition.x; const scrollY = scrollPosition.y; return ( <div> <p>Scroll X: {scrollX}px</p> <p>Scroll Y: {scrollY}px</p> </div> );}

In this example, the component displays the current horizontal and vertical scroll positions in pixels.

Notes#

  • The useScrollPosition hook uses the useState and useEffect hooks from React to manage state and perform side effects respectively.
  • The initial scroll position is obtained when the hook is first invoked, but subsequent updates are triggered only when the window is scrolled. This optimization helps reduce unnecessary re-renders.
  • The event listener for window scroll is added and removed in the useEffect hook's cleanup function to ensure proper handling of the event.

Remember to include the necessary import statements and adjust the file paths accordingly when using the useScrollPosition hook in your project.

That's it! You can now utilize the useScrollPosition hook to get the current scroll position in your React components.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useTimer/index.html b/docs/Hooks/useTimer/index.html index d81fe48..c77f1ba 100644 --- a/docs/Hooks/useTimer/index.html +++ b/docs/Hooks/useTimer/index.html @@ -6,13 +6,13 @@ useTimer | Zop Hooks - +

useTimer

useTimer Hook -The useTimer hook is a custom React hook that provides a timer functionality. It allows you to start, pause, reset, and retrieve the current state and time of the timer.

1.Import the Hook#

import useTimer from "zop-hooks";

2.Initialize the timer by calling the useTimer hook:#

const timer = useTimer();

3.Use the timer properties and methods in your component:#

// Access the current time and state of the timerconst currentTime = timer.time;const currentTimerState = timer.state;
+The useTimer hook is a custom React hook that provides a timer functionality. It allows you to start, pause, reset, and retrieve the current state and time of the timer.
1.Import the Hook#
import { useTimer } from "zop-hooks";
2.Initialize the timer by calling the useTimer hook:#
const timer = useTimer();
3.Use the timer properties and methods in your component:#
// Access the current time and state of the timerconst currentTime = timer.time;const currentTimerState = timer.state;
 // Start the timerconst handleStart = () => {  timer.start();};
 // Pause the timerconst handlePause = () => {  timer.pause();};
 // Reset the timerconst handleReset = () => {  timer.reset();};
4.Render the timer and buttons in your component's JSX:#
return (  <div>    <p>Time: {currentTime}</p>    <p>State: {currentTimerState}</p>    <button onClick={handleStart}>Start</button>    <button onClick={handlePause}>Pause</button>    <button onClick={handleReset}>Reset</button>  </div>);
API#
The useTimer hook returns an object with the following properties and methods:
  • time: number - The current time of the timer.
  • state: TimerState - The current state of the timer. Possible values are "idle", "running", or "paused".
  • start: () => void - A function to start the timer.
  • pause: () => void - A function to pause the timer.
  • reset: () => void - A function to reset the timer.
Example#
Here's a complete example of using the useTimer hook in a React component:
import React from "react";import useTimer from "zop-hooks";
@@ -23,7 +23,7 @@
   const handleReset = () => {    timer.reset();  };
   return (    <div>      <p>Time: {currentTime}</p>      <p>State: {currentTimerState}</p>      <button onClick={handleStart}>Start</button>      <button onClick={handlePause}>Pause</button>      <button onClick={handleReset}>Reset</button>    </div>  );};
 export default TimerComponent;
That's it! You can now use the useTimer hook in your project to add timer functionality to your components.
Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/Hooks/useWindowScroll/index.html b/docs/Hooks/useWindowScroll/index.html index 97b7db7..de9c8d5 100644 --- a/docs/Hooks/useWindowScroll/index.html +++ b/docs/Hooks/useWindowScroll/index.html @@ -6,7 +6,7 @@ useWindowScroll | Zop Hooks - + @@ -22,7 +22,7 @@ // Rest of your component code // ...}

Return Value#

The useWindowScroll hook returns the current vertical scroll position (scrollY) as a number.

Example#

Here's an example of how you can use the useWindowScroll hook in a functional component:

import { useWindowScroll } from "./path/to/useWindowScroll";
 function MyComponent() {  const scrollY = useWindowScroll();
   return (    <div>      <p>Scroll Y: {scrollY}px</p>    </div>  );}

In this example, the component displays the current vertical scroll position of the window in pixels.

Notes#

  • The useWindowScroll hook uses the useState and useEffect hooks from React to manage state and perform side effects, respectively.
  • The initial scroll position is obtained when the hook is first invoked, but subsequent updates are triggered only when the window is scrolled. This optimization helps reduce unnecessary re-renders.
  • The event listener for window scroll is added and removed in the useEffect hook's cleanup function to ensure proper handling of the event.

Remember to include the necessary import statements and adjust the file paths accordingly when using the useWindowScroll hook in your project.

That's it! You can now utilize the useWindowScroll hook to get the current vertical scroll position of the window in your React components.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/intro/index.html b/docs/intro/index.html index 03a10ae..b6cdaf2 100644 --- a/docs/intro/index.html +++ b/docs/intro/index.html @@ -6,13 +6,13 @@ Introduction | Zop Hooks - +

Introduction

Zop-Hooks is a collection of production ready React hooks package that you can use in your React, Next.js, React+Vite Apps.

Getting Started#

Get started by Installing Zop-Hooks package.

Using NPM#

npm install zop-hooks

Using Yarn#

yarn add zop-hooks

Import the Hooks#

There are various Hooks provided by zop-hooks find them and use them by importing.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/docs/tags/index.html b/docs/tags/index.html index b2b93d0..6744514 100644 --- a/docs/tags/index.html +++ b/docs/tags/index.html @@ -6,13 +6,13 @@ Tags | Zop Hooks - +

Tags

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/index.html b/index.html index b1110f4..89fc067 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,13 @@ Hello from Zop Hooks | Zop Hooks - +

Zop Hooks

Just Better Hooks.

    

Zophooks is a powerful React Hooks Library to make your React Development Journey easy.

Easy to Use

Zophooks eliminates the hassle of complex installation and configuration processes. With a straightforward installation procedure, you can get started quickly without the need for extensive technical expertise.

Fast

Zop Hooks enables your React Development Journey with Faster custom hooks.

Powered by React

Extend or customize your website layout by reusing React. So don't worry about the build process.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file diff --git a/markdown-page/index.html b/markdown-page/index.html index e448bc2..e9ea922 100644 --- a/markdown-page/index.html +++ b/markdown-page/index.html @@ -6,13 +6,13 @@ Markdown page example | Zop Hooks - +

Markdown page example

You don't need React to write simple standalone pages.

Copyright © 2023 Zop-Hooks
- + \ No newline at end of file