{"id":15007649,"url":"https://github.com/mohammad-zolghadr/react-hooks-plus","last_synced_at":"2026-03-06T03:31:29.436Z","repository":{"id":153954558,"uuid":"631214486","full_name":"mohammad-zolghadr/react-hooks-plus","owner":"mohammad-zolghadr","description":"🔥In this package, I have developed complete hooks and useful functions for you to do your projects more easily, quickly and accurately","archived":false,"fork":false,"pushed_at":"2023-05-01T12:30:25.000Z","size":290,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-10T02:34:05.974Z","etag":null,"topics":["hooks","npm","npmjs","npmpackage","react","react-hooks","react-hooks-plus","reactjs","ts","typescript","typescript-react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-hooks-plus","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohammad-zolghadr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-22T09:57:07.000Z","updated_at":"2024-11-25T15:30:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"dbb67c05-1d22-43fe-9992-77a5e7c173eb","html_url":"https://github.com/mohammad-zolghadr/react-hooks-plus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mohammad-zolghadr/react-hooks-plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-zolghadr%2Freact-hooks-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-zolghadr%2Freact-hooks-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-zolghadr%2Freact-hooks-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-zolghadr%2Freact-hooks-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohammad-zolghadr","download_url":"https://codeload.github.com/mohammad-zolghadr/react-hooks-plus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-zolghadr%2Freact-hooks-plus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30160845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T22:39:40.138Z","status":"online","status_checked_at":"2026-03-06T02:00:08.268Z","response_time":250,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","npm","npmjs","npmpackage","react","react-hooks","react-hooks-plus","reactjs","ts","typescript","typescript-react"],"created_at":"2024-09-24T19:13:08.574Z","updated_at":"2026-03-06T03:31:29.403Z","avatar_url":"https://github.com/mohammad-zolghadr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://user-images.githubusercontent.com/48680310/235084939-30b03cc9-2c7b-45c7-b220-955e27e4c4b5.png\" /\u003e\n\n\u003ca href=\"https://github.com/mohammad-zolghadr/react-hooks-plus\" target=\"_blank\"\u003e \u003cimg src=\"https://user-images.githubusercontent.com/48680310/235084610-9e92ccf9-1cb6-4c20-8107-dcd6a22b2a77.png\" /\u003e \u003c/a\u003e\n\n\u003ca href=\"https://github.com/mohammad-zolghadr/react-hooks-plus\"\u003e\u003cimg src=\"https://img.shields.io/badge/-on github-323232?style=flat\u0026logo=github\u0026logoColor=white\"/\u003e\u003c/a\u003e\n\u003cspan\u003e \u003c/span\u003e\n\u003ca href=\"https://npmjs.org/package/react-hooks-plus\"\u003e\u003cimg src=\"https://img.shields.io/badge/-on npm-bb2222?style=flat\u0026logo=npm\"/\u003e\u003c/a\u003e\n\u003cspan\u003e \u003c/span\u003e\n\u003cspan\u003e[![install size](https://packagephobia.com/badge?p=react-hooks-plus)](https://packagephobia.com/result?p=react-hooks-plus)\n\u003c/span\u003e\n\u003cspan\u003e \u003c/span\u003e\n\u003cspan\u003e[![NPM Downloads](https://img.shields.io/npm/dm/react-hooks-plus.svg?style=flat)](https://npmcharts.com/compare/react-hooks-plus?minimal=true)\n\u003c/span\u003e\n\nIncreasing **speed** and **accuracy** is one of the main criteria for cleaner and better coding\n\n\u003ca href=\"#contact-me\"\u003e📞 Who I am and how to communicate with me\u003c/a\u003e\n\n\u003ch3 id=\"toc\"\u003eTable of Content \u003c/h3\u003e\n\n\u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation And Conditions\u003c/a\u003e\u003c/li\u003e\n\u003cdetails\u003e\u003csummary\u003eFunctions\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cdetails\u003e\n\u003csummary\u003eRandom Functions\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"#random-number\"\u003erandomNumber\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#random-number-digits\"\u003erandomNumberDigit\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#random-number-range\"\u003erandomNumberRange\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#random-number-even-range\"\u003erandomNumberEven\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#random-string\"\u003erandomString\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#random-string-length\"\u003erandomStringLength\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#random-string-symbols\"\u003erandomStringSymbols\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#random-string-symbols-length\"\u003erandomStringSymbolsLength\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\u003c/li\u003e\n\u003cli\u003e\u003cdetails\u003e\n\u003csummary\u003eNumber Functions\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"#to-persian-number\"\u003econvertToPersianNumber\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#to-english-number\"\u003econvertToEnglishNumber\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#separate-number\"\u003eseparateNumbers\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#is-persian-number\"\u003eisPersianNumber\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\u003c/li\u003e\n\u003cli\u003e\n\u003cdetails\u003e\u003csummary\u003eArray Functions\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"#unique-array\"\u003euniqueArray\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#shuffle-array\"\u003eshuffleArray\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#chunk\"\u003echunk\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#flatten-array\"\u003eflattenArray\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#find-max-index\"\u003efindMaxIndex\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#is-array-empty\"\u003eisArrayEmpty\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#get-max-element\"\u003egetMaxElement\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#get-min-element\"\u003egetMinElement\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#has-element\"\u003ehasElement\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#sum\"\u003esum\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#average\"\u003eaverage\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#add-element-to-array-if-not-exist\"\u003eaddElementToArrayIfNotExist\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#add-object-to-array-if-prop-not-exist\"\u003eaddObjectToArrayIfPropNotExist\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#remove-element\"\u003eremoveElement\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#remove-duplicates-by-property\"\u003eremoveDuplicatesByProperty\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#sort-by-property\"\u003esortByProperty\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#sort-array-desc\"\u003esortArrayDesc\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#sort-array-asc\"\u003esortArrayAsc\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#func-local-storage\"\u003eLocal Storage\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#func-decimal-precision\"\u003eDecimal With Precision\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003eHooks\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"#use-copy-to-clipboard\"\u003euseCopyToClipboard\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-local-storage\"\u003euseLocalStorage\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-document-title\"\u003euseDocTitle\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-on-click-outside\"\u003euseOnClickOutside\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-hover\"\u003euseHover\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-fetch\"\u003euseFetch\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-media\"\u003euseMedia\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-scroll\"\u003euseScroll\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-screen\"\u003euseScreen\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-on-screen\"\u003euseOnScreen\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\n\u003cdetails\u003e\u003csummary\u003eUse Console\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"#use-con-log\"\u003euseConLog\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-con-group\"\u003euseConGroup\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-con-table\"\u003euseConTable\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#use-con-time\"\u003euseConTime\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\u003c/li\u003e\n\u003c/details\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n---\n\n## \u003ch2 id=\"installation\"\u003eInstallation And Conditions \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nYou can use :\n\n`npm i react-hooks-plus`\n\nor\n\n`yarn add react-hooks-plus`\n\n---\n\n## \u003ch2 id=\"random-functions\"\u003eRandom Functions \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\n### \u003ch3 id=\"random-number\"\u003erandomNumber \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { randomNumber } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconsole.log(randomNumber());\n```\n\nBy doing this, a `random number (max 4 digits)` will appear for you in the log\n\n---\n\n### \u003ch3 id=\"random-number-digits\"\u003erandomNumberDigit \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { randomNumberDigit } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n\u003e As the function parameter of the function, you must enter a number so that your final output is a number with the desired number of digits\n\n```javascript\nconsole.log(randomNumberDigit(7));\n```\n\nIn this example, your log output will be a `7-digit random number`\n\n---\n\n### \u003ch3 id=\"random-number-range\"\u003erandomNumberRange \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { randomNumberRange } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n\u003e As the function parameter of the function, you must enter two numbers as `min` and `max` so that your final output is a number in your desired range.\n\n```javascript\nconsole.log(randomNumberRange(1, 100));\n```\n\nIn this example, your log output will be a `random number between 1 and 100`\n\n---\n\n### \u003ch3 id=\"random-number-even-range\"\u003erandomNumberEven \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { randomNumberEven } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n\u003e As the function parameter of the function, you must enter a boolean value and two numbers as min and max. If the first parameter is true, it means your output is an `even number` and if it is false, it means your output is an `odd number`.\n\u003e The second and third parameters are related to your `determining the random number range`\n\n```javascript\nconsole.log(randomNumberEven(true, 1, 100));\n```\n\nIn this example, your log output will be an `even random number between 1 and 100`\n\n---\n\n### \u003ch3 id=\"random-string\"\u003erandomString \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { randomString } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconsole.log(randomString());\n```\n\nBy doing this, a `random string (max 5 char)` will appear for you in the log\n\n---\n\n### \u003ch3 id=\"random-string-length\"\u003erandomStringLength \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { randomStringLength } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n\u003e As an function parameter to the function, you must assign a number to it, which determines the `length of your string`\n\n```javascript\nconsole.log(randomStringLength(12));\n```\n\nBy doing this, your log output will be a `random string of 12 characters long`\n\n---\n\n### \u003ch3 id=\"random-string-symbols\"\u003erandomStringSymbols \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { randomStringSymbols } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconsole.log(randomStringSymbols());\n```\n\nBy doing this, a `random string of letters, numbers and symbols (max 5 characters)` will appear for you in the log.\n\n---\n\n### \u003ch3 id=\"random-string-symbols-length\"\u003erandomStringSymbolsLength \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { randomStringSymbolsLength } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n\u003e As an function parameter to the function, you must assign a number to it, which determines the `length of your string`\n\n```javascript\nconsole.log(randomStringSymbolsLength(12));\n```\n\nBy doing this, your log output will be a `random string of letters, numbers, and symbols that is 12 characters long`\n\n---\n\n## \u003ch2 id=\"number-functions\"\u003eRandom Functions \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\n### \u003ch3 id=\"to-persian-number\"\u003econvertToPersianNumber \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n\u003e This function **converts English numbers to Persian or Arabic**\n\nFirst you need to import\n\n```javascript\nimport { convertToPersianNumber } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\n//Example usage\nconst input = '1234567890';\nconst persianNum = convertToPersianNumber(input);\nconsole.log(persianNum); // \"۱۲۳۴۵۶۷۸۹۰\"\n```\n\n---\n\n### \u003ch3 id=\"to-english-number\"\u003econvertToEnglishNumber \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n\u003e This function **converts Persian or Arabic numbers to English**\n\nFirst you need to import\n\n```javascript\nimport { convertToEnglishNumber } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\n//Example usage\nlet PersianNum = '۱۲۳۴۵';\nlet engNum = convertToEnglishNumber(PersianNum);\nconsole.log(engNum); // output: 12345\n```\n\n---\n\n### \u003ch3 id=\"separate-number\"\u003eseparateNumbers \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n\u003e This function **separates the numbers three by three** with `,`\n\nFirst you need to import\n\n```javascript\nimport { separateNumbers } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\n//Example usage\nconsole.log(separateNumbers('1234567890')); // 1,234,567,890\nconsole.log(separateNumbers('۷۷۷۵۲۲۶')); // ۷,۷۷۵,۲۲۶\n```\n\n---\n\n### \u003ch3 id=\"is-persian-number\"\u003eisPersianNumber \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n\u003e This function returns a Boolean value that indicates whether **the number you sent as input to this function is Persian (Arabic) or not**.\n\nFirst you need to import\n\n```javascript\nimport { isPersianNumber } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\n//Example usage\nconsole.log(isPersianNumber('۵,۲۲۶')); // true\nconsole.log(isPersianNumber('۵۲۲۶')); // true\nconsole.log(isPersianNumber(42735)); // false\nconsole.log(isPersianNumber('42,753')); // false\n```\n\n---\n\n## \u003ch2 id=\"array-functions\"\u003eArray Functions \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\n### \u003ch3 id=\"unique-array\"\u003eUniqueArray \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`UniqueArray` : Takes an array and returns a new array containing only unique elements.\n\nFirst you need to import\n\n```javascript\nimport { uniqueArray } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst arr = [1, 2, 2, 3, 4, 4];\nconst uniqueArr = uniqueArray(arr); // [1, 2, 3, 4]\n```\n\n---\n\n### \u003ch3 id=\"shuffle-array\"\u003eshuffleArray \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`shuffleArray` : This function takes in an array and shuffles its contents randomly\n\nFirst you need to import\n\n```javascript\nimport { shuffleArray } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst myArray = [1, 2, 3, 4, 5, 6];\nconst shuffledArray = shuffleArray(myArray);\n```\n\n---\n\n### \u003ch3 id=\"chunk\"\u003echunk \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`chunk` : This function takes an array and a chunk size and returns a new array with the original array split into chunks of the specified size\n\nFirst you need to import\n\n```javascript\nimport { chunk } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst arr = [1, 2, 3, 4, 5, 6];\nconst chunkedArr = chunk(arr, 3); // returns [[1, 2, 3], [4, 5, 6]]\n```\n\n---\n\n### \u003ch3 id=\"flatten-array\"\u003eflattenArray \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`flattenArray` : Takes an array of arrays and flattens it into a single array\n\nFirst you need to import\n\n```javascript\nimport { flattenArray } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst arr = [[1, 2], [3, 4], [5]];\nconst flattenedArr = flattenArray(arr); // [1, 2, 3, 4, 5]\n```\n\n---\n\n### \u003ch3 id=\"find-max-index\"\u003efindMaxIndex \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nThe `findMaxIndex` function takes an array of numbers as input and returns the index of the largest element in the array.\n\nFirst you need to import\n\n```javascript\nimport { findMaxIndex } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst arr1 = [3, 7, 1, 9, 4];\nconst maxIndex = findMaxIndex(arr1);\nconsole.log(\n  `The largest element in arr1 is ${arr1[maxIndex]} at index ${maxIndex}.`\n);\n```\n\n---\n\n### \u003ch3 id=\"is-array-empty\"\u003eisArrayEmpty \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`isArrayEmpty` : Function to check if an array is empty\n\nFirst you need to import\n\n```javascript\nimport { isArrayEmpty } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst myArr = [4, 6, 8, 5];\nconsole.log(isArrayEmpty(myArr)); // false\n```\n\n---\n\n### \u003ch3 id=\"get-max-element\"\u003egetMaxElement \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`getMaxElement` : Function to get the maximum element in an array\n\nFirst you need to import\n\n```javascript\nimport { getMaxElement } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst arr: number[] = [10, 5, 20, 15];\nconsole.log(getMaxElement(arr)); // Output: 20\n```\n\n---\n\n### \u003ch3 id=\"get-min-element\"\u003egetMinElement \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`getMinElement` : Function to get the minimum element in an array\n\nFirst you need to import\n\n```javascript\nimport { getMinElement } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst arr: number[] = [10, 5, 20, 15];\nconsole.log(getMinElement(arr)); // Output: 5\n```\n\n---\n\n### \u003ch3 id=\"has-element\"\u003ehasElement \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`hasElement` : Function to check if an array contains a specific element or not\nFirst you need to import\n\n```javascript\nimport { hasElement } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst fruits: string[] = ['apple', 'banana', 'orange'];\nconsole.log(hasElement(fruits, 'banana')); // Output: true\n```\n\n---\n\n### \u003ch3 id=\"sum\"\u003esum \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`sum` : This function returns the sum of all the elements in the input array.\n\nFirst you need to import\n\n```javascript\nimport { sum } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst total = sum(numbers);\nconsole.log(`The sum is ${total}`); //output: 15\n```\n\n---\n\n### \u003ch3 id=\"average\"\u003eaverage \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`average` : Returns the average value of the elements of the array\n\nFirst you need to import\n\n```javascript\nimport { average } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst arr = [2, 4, 6, 8, 10];\nconst avg = average(arr); // returns 6\n```\n\n---\n\n### \u003ch3 id=\"add-element-to-array-if-not-exist\"\u003eaddElementToArrayIfNotExist \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`addElementToArrayIfNotExist` : Function to add an element to an array if it doesn't exist in the array.\n\nFirst you need to import\n\n```javascript\nimport { addElementToArrayIfNotExist } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nlet newArr = addElementToArrayIfNotExist(oldArr, elementToAdd);\n```\n\n---\n\n### \u003ch3 id=\"add-object-to-array-if-prop-not-exist\"\u003eaddObjectToArrayIfPropNotExist \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`addObjectToArrayIfPropNotExist` : Function to add an object to an array if a specific property of that object doesn't exist in the array.\n\nFirst you need to import\n\n```javascript\nimport { addObjectToArrayIfPropNotExist } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nlet newArr = addObjectToArrayIfPropNotExist(oldArr, objToAdd, 'propertyName');\n```\n\n---\n\n### \u003ch3 id=\"remove-element\"\u003eremoveElement \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`removeElement` : Function to remove a specific element from an array\n\nFirst you need to import\n\n```javascript\nimport { removeElement } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nlet numbers: number[] = [10, 20, 30, 40];\nnumbers = removeElement(numbers, 20);\nconsole.log(numbers); // Output: [10, 30, 40]\n```\n\n---\n\n### \u003ch3 id=\"remove-duplicates-by-property\"\u003eremoveDuplicatesByProperty \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n`removeDuplicatesByProperty` : This function takes an array of objects and in the second parameter of the function, it takes a key and checks **if there were objects in this array that had the same key, it removes all duplicate items**.\n\n```javascript\nimport { removeDuplicatesByProperty } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst people = [\n  { id: 1, name: 'John', age: 30 },\n  { id: 2, name: 'Jane', age: 25 },\n  { id: 3, name: 'John', age: 30 },\n  { id: 4, name: 'Bob', age: 40 },\n  { id: 5, name: 'Jane', age: 20 },\n];\n\nconst uniquePeople = removeDuplicatesByProperty(people, 'name');\nconsole.log(uniquePeople);\n/* Output:\n[\n  { id: 1, name: \"John\", age: 30 },\n  { id: 2, name: \"Jane\", age: 25 },\n  { id: 4, name: \"Bob\", age:40 }\n];\n*/\n```\n\n---\n\n### \u003ch3 id=\"sort-by-property\"\u003esortByProperty \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`sortByProperty`: Takes an array of objects and a property name and returns a new array sorted by the values of that property.\n\nFirst you need to import\n\n```javascript\nimport { sortByProperty } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nconst users = [\n  { name: 'John', age: 25 },\n  { name: 'Mary', age: 20 },\n  { name: 'Adam', age: 30 },\n];\n\nconst sortedUsers = sortByProperty(users, 'age'); // [{ name: 'Mary', age: 20 }, { name: 'John', age: 25 }, { name: 'Adam', age: 30 }]\n```\n\n---\n\n### \u003ch3 id=\"sort-array-desc\"\u003esortArrayDesc \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`sortArrayDesc` : Function to sort an array in descending order.\n\nFirst you need to import\n\n```javascript\nimport { sortArrayDesc } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nlet newArr = sortArrayDesc(oldArr);\n```\n\n---\n\n### \u003ch3 id=\"sort-array-asc\"\u003esortArrayAsc \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\n`sortArrayAsc` : Function to sort an array in ascending order.\n\nFirst you need to import\n\n```javascript\nimport { sortArrayAsc } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n```javascript\nlet newArr = sortArrayAsc(oldArr);\n```\n\n---\n\n## \u003ch2 id=\"func-local-storage\"\u003eLocal Storage \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { saveToLocalStorage, getFromLocalStorage } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n\u003e In the `saveToLocalStorage` function, you must enter the `key` as the first function parameter, and in the second parameter, you must enter the `value` that you want to save in the browser storage.\n\n\u003e In the `getFromLocalStorage` tab, you must enter the `key` value as an function parameter to return the value stored by this key from the browser's storage.\n\n```javascript\n// save to local\nconst myFunction = () =\u003e {\n  saveToLocalStorage('MY-KEY', 'MY-VALUE');\n};\n\n// get from local\nconsole.log(getFromLocalStorage('MY-KEY'));\n```\n\nBy doing this, you save the `MY-VALUE` value in the browser's memory with the `MY-KEY` key\n\nAnd in the log, you will receive the information stored with the `MY-KEY` key from the browser's storage\n\n---\n\n## \u003ch2 id=\"func-decimal-precision\"\u003eDecimal With Precision \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { setPrecisionForDecimal } from 'react-hooks-plus';\n```\n\nAnd then to use it, proceed as follows :\n\n\u003e You can limit the number of digits of a decimal number by using the `setPrecisionForDecimal` function\n\n\u003e 1.  The first parameter is `your number`, which can be a decimal number or an integer\n\u003e 2.  The second parameter is the `number of decimal digits`.\n\n```javascript\nsetPrecisionForDecimal(3.14159, 2); // Output: 3.14\nsetPrecisionForDecimal(3, 2); // Output: 3\nsetPrecisionForDecimal(3.14159, 0); // Output: 3\nsetPrecisionForDecimal(3.1485, 2); // Output: 3.15\n```\n\n---\n\n## \u003ch2 id=\"use-copy-to-clipboard\"\u003euseCopyToClipboard \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useCopyToClipboard } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e `copyToClipboard` is a function that you must enter a value that you want to save to the clipboard as the input of this function.\n\n\u003e `copied` is a boolean value that returns true `when the content is saved to the clipboard` and **returns false after 1.5 seconds**.\n\u003e `copied` is used when you want to put a successful text in the relevant subfield to show the user that the content in question has been successfully saved to the clipboard.\n\nExample :\n\n```javascript\nfunction MyComponent() {\n  const { copied, copyToClipboard } = useCopyToClipboard();\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e copyToClipboard('Some text to copy to clipboard')}\u003e\n        Copy to clipboard\n      \u003c/button\u003e\n      {copied \u0026\u0026 \u003cp\u003eText copied to clipboard!\u003c/p\u003e}\n    \u003c/div\u003e\n  );\n}\nexport default MyComponent;\n```\n\n---\n\n## \u003ch2 id=\"use-local-storage\"\u003euseLocalStorage \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useLocalStorage } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e The first parameter of the useLocalStorage hook is the `key` that your value can be obtained in the browser storage with this key, and the second parameter is your `value`.\n\n\u003e You should store the return value from the useLocalStorage hook **as a useState**. That is, a value and a setValue\n\u003e And you can use this value, which is a react state, wherever you want\n\u003e Also, using the setValue function, you can change the value wherever you want, and this value **change will also be done in the local storage**.\n\nExample :\n\n```javascript\nfunction PhoneNumberInput() {\n  const [phoneNumber, setPhoneNumber] = useLocalStorage('phoneNumber', '');\n\n  const handlePhoneNumberChange = (event) =\u003e {\n    setPhoneNumber(event.target.value);\n  };\n\n  return (\n    \u003cinput type='tel' value={phoneNumber} onChange={handlePhoneNumberChange} /\u003e\n  );\n}\n```\n\n---\n\n## \u003ch2 id=\"use-document-title\"\u003euseDocTitle \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useDocTitle } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e It takes a **string** as input parameter\n\n```javascript\nconst MyComponent = () =\u003e {\n  useDocTitle('My Component Title');\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy Component\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n---\n\n## \u003ch2 id=\"use-on-click-outside\"\u003euseOnClickOutside \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useOnClickOutside } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e This hook takes a `ref` as the first parameter and a `function` as the second parameter\n\u003e So you have to assign this ref to an element on the page and create a function. This way, the function will be called **every time outside of your element is clicked**\n\nExample :\n\n```javascript\nimport { useRef } from 'react';\nimport useOnClickOutside from 'react-hooks-plus';\n\nfunction App() {\n  const ref = useRef(null);\n\n  const handleClickOutside = () =\u003e {\n    console.log('Clicked outside!');\n  };\n\n  useOnClickOutside(ref, handleClickOutside);\n\n  return (\n    \u003cdiv ref={ref}\u003e\n      \u003cp\u003eClick outside this element and check the console!\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## \u003ch2 id=\"use-hover\"\u003euseHover \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useHover } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e To use this hook, you should note that it has two return values\n\u003e The first value is a `ref`, which you must assign to the target element\n\u003e And the second return value is a `boolean` whose **value becomes true whenever hover is performed on your element for which you have defined ref**.\n\nExample :\n\n```javascript\nimport useHover from 'react-hooks-plus';\n\nfunction MyComponent() {\n  const [ref, isHovered] = useHover();\n\n  return (\n    \u003cdiv ref={ref}\u003e\n      \u003cp\u003e{isHovered ? 'Hovered!' : 'Not Hovered'}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## \u003ch2 id=\"use-fetch\"\u003euseFetch \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useFetch } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e The useFetch hook takes the `url` of an API as an input parameter and gives you three return values\n\n\u003e 1.  One of the return values ​​is `isLoading`, which is a Boolean value and from the time the request is sent, until the response is received from the API side, its value is **true**, and when the response is received (whether it encounters an error or data) are received safely, its value will be **false**\n\u003e 2.  Another return value is `error`, which returns an error if there is an error\n\u003e 3.  And another return value is `data`, which contains the fetched data from the API (the response from the API)\n\nExample :\n\n```javascript\nimport { useFetch } from 'react-hooks-plus';\n\nfunction MyComponent() {\n  const { data, isLoading, error } = useFetch('/api/data');\n\n  if (isLoading) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n\n  if (error) {\n    return \u003cdiv\u003eError: {error.message}\u003c/div\u003e;\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{data?.title}\u003c/h1\u003e\n      \u003cdiv\u003e{data?.body}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## \u003ch2 id=\"use-media\"\u003euseMedia \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useMedia } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e useMedia(queries: string[], values: T[], defaultValue: T)\n\u003e\n\u003e 1. `Queries` must be an `array of CSS media queries` (e.g. ['(max-width: 768px)', '(orientation: landscape)']).\n\u003e 2. `Values` must be an `array of any type`, corresponding to the queries (e.g. [true, 'large']).\n\u003e 3. `DefaultValue` is the value returned when none of the media queries match (e.g. false).\n\n\u003e The hook returns the **current value, based on the current screen size**.\n\nExample :\n\n```javascript\nimport React from 'react';\nimport useMedia from 'react-hooks-plus';\n\nfunction App() {\n  const isMobile = useMedia(['(max-width: 767px)'], [true], false);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eYou are browsing on {isMobile ? 'mobile' : 'desktop'}\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## \u003ch2 id=\"use-scroll\"\u003euseScroll \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useScroll } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e The `useScroll` hook `returns two states x and y`\n\n\u003e Both states, as their name suggests, **indicate the amount that has been scrolled from the page**\n\nExample :\n\n```javascript\nimport useScroll from 'react-hooks-plus';\n\nconst MyComponent = () =\u003e {\n  const { x, y } = useScroll();\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCurrent scroll position:\u003c/p\u003e\n      \u003cp\u003eX: {x}\u003c/p\u003e\n      \u003cp\u003eY: {y}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n---\n\n## \u003ch2 id=\"use-screen\"\u003euseScreen \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useScreen } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e The `useScreen` hook `returns two states width and height`\n\n\u003e Both states, as their name suggests, **show the current size of width and height**\n\nExample :\n\n```javascript\nimport { useScreen } from 'react-hooks-plus';\n\nconst MyComponent = () =\u003e {\n  const { width, height } = useScreen();\n\n  return (\n    \u003cdiv\u003e\n      My screen dimensions are {width}px x {height}px\n    \u003c/div\u003e\n  );\n};\n```\n\n---\n\n## \u003ch2 id=\"use-on-screen\"\u003euseOnScreen \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nFirst you need to import\n\n```javascript\nimport { useOnScreen } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e The `useOnScreen` hook receives a `ref` as an input parameter and `returns a boolean` value\n\n\u003e If this boolean value is `true`, that is, the element for which we considered the ref value, **will be seen in the viewport that is exposed to the user**.\n\n\u003e If its value is `false`, it may be due to scrolling or..., this element is at the bottom or top of the page and the **user does not see it in the viewport**.\n\nExample :\n\n```javascript\nimport { useRef } from 'react';\nimport useOnScreen from 'react-hooks-plus';\n\nfunction MyComponent() {\n  const ref = useRef(null);\n  const isOnScreen = useOnScreen(ref);\n\n  return (\n    \u003cdiv ref={ref}\u003e\n      {isOnScreen ? 'Visible on screen' : 'Not visible on screen'}\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## \u003ch2 id=\"use-console\"\u003eConsole Hooks \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\n### \u003ch3 id=\"use-con-log\"\u003euseConLog \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { useConLog } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e The `useConLog` hook actually **executes once every time the state changes and prints a message in console.log**.\n\n\u003e You can enter as many values ​​as you want in its input parameter\n\n**In general, this hook for debugging will greatly speed up your work**\n\nExample :\n\n```javascript\nimport useConLog from 'react-hooks-plus';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  useConLog('Count is : ', count);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e{count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eIncrease count\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n### \u003ch3 id=\"useConGroup\"\u003euseConGroup \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { useConGroup } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e The `useConGroup` hook actually **creates a group in your console and displays your content as a collapse**\n\u003e You can easily print your contents grouped in the console\n\n\u003e The first parameter of this hook is your `Content or State`\n\u003e Your second parameter is the `label of the group`, **this part is optional** and You can leave this field blank\n\n**In general, this hook for debugging will greatly speed up your work**\n\nExample :\n\n```javascript\nimport useConsoleGroup from 'react-hooks-plus';\n\nconst MyComponent = () =\u003e {\n  const data = { name: 'John', age: 27 };\n\n  useConsoleGroup(data, 'User Data');\n\n  // rest of your component code\n};\n```\n\n### \u003ch3 id=\"use-con-table\"\u003euseConTable \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { useConTable } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e You can use the `useConTable` hook to log a table of our data to the console every time it changes\n\n\u003e 1.  The `data` parameter (First Parameter) is an **array of values ​​that you want to print in the log**\n\u003e 2.  The `columns` parameter (Second Parameter) is an **array of strings representing the properties of the objects you want to display in the table**.\n\n**In general, this hook for debugging will greatly speed up your work**\n\nExample :\n\n```javascript\nimport React, { useState } from 'react';\nimport useConTable from 'react-hooks-plus';\n\nfunction App() {\n  const [data, setData] = useState([\n    { id: 1, name: 'Alice', age: 25 },\n    { id: 2, name: 'Bob', age: 30 },\n    { id: 3, name: 'Charlie', age: 35 },\n  ]);\n\n  useConTable(data, ['name', 'age']);\n\n  // rest of your code\n}\n\nexport default App;\n```\n\n---\n\n### \u003ch3 id=\"use-con-time\"\u003euseConTime \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h3\u003e\n\nFirst you need to import\n\n```javascript\nimport { useConTime } from 'react-hooks-plus';\n```\n\nThen, you can use this hook in your component like this:\n\n\u003e The `useConTime` hook returns two functions: `startConsole` and `endConsole`. You can call `startConsole` at the beginning of the operation you want to measure, and call `endConsole` when the operation is complete. The hook **prints the time taken to the console in milliseconds**.\n\n\u003e You can assign the input parameter to useConTime and you can leave it blank. This input parameter, which must be a string, **displays the text inside the console before the time**. If your text is empty, the default text is this : `Time Taken: 136ms`\n\n\u003e **In general, this hook for debugging will greatly speed up your work**\n\nExample :\n\n```javascript\nimport React from 'react';\nimport useConTime from 'react-hooks-plus';\n\nconst MyComponent = () =\u003e {\n  const { startConsole, endConsole } = useConTime();\n\n  const handleClick = () =\u003e {\n    startConsole();\n    // do some heavy calculations or API calls here\n    endConsole();\n  };\n\n  return \u003cbutton onClick={handleClick}\u003eClick me\u003c/button\u003e;\n};\n\nexport default MyComponent;\n```\n\n---\n\n# \u003ch2 id=\"contact-me\"\u003e📞 Who I am and how to communicate with me \u003ca href=\"#toc\"\u003e\u0026uarr;\u003c/a\u003e\u003c/h2\u003e\n\nI am a Freelance Frontend Web Developer with patience and creativity and caring for projects. I am ready to cooperate with the latest technologies such as React.js and TailwindCss to build a stylish website with the best UX.\n\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mail.google.com/mail/?view=cm\u0026fs=1\u0026to=dev.mohammadzolghadr@gmail.com\u0026su=Subject\u0026body=Body\"\u003eGmail : dev.mohammadzolghadr@gmail.com\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.linkedin.com/in/mohammad-zolghadr\"\u003eLinkedin : mohammad-zolghadr\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://instagram.com/mozo.plus\"\u003eInstagram : @mozo.plus\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/mohammad-zolghadr\"\u003eGithub : mohammad-zolghadr\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n---\n\nThe current version of react-hooks-plus includes the functions and hooks that were tested and presented in the initial version\n\nIf you find any ideas, suggestions, problems or bugs, please let me know\n\nThe main forum for free and community support is the project [Issues](https://github.com/mohammad-zolghadr/react-hooks-plus/issues) on GitHub\n\n🔼 Released on : April/2023 - Mohammad Zolghadr\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammad-zolghadr%2Freact-hooks-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohammad-zolghadr%2Freact-hooks-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammad-zolghadr%2Freact-hooks-plus/lists"}