https://github.com/azlibdar/react-customs

A collection of essential React hooks built with JavaScript.
https://github.com/azlibdar/react-customs

custom-hooks npm-package react react-customs reactjs

Last synced: 11 days ago
JSON representation

A collection of essential React hooks built with JavaScript.

• Host: GitHub
• URL: https://github.com/azlibdar/react-customs
• Owner: azlibdar
• License: mit
• Created: 2024-07-08T09:17:22.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-15T19:17:04.000Z (28 days ago)
• Last Synced: 2024-10-26T02:29:58.203Z (18 days ago)
• Topics: custom-hooks, npm-package, react, react-customs, reactjs
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-customs
• Size: 359 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  


# React Customs

A collection of essential React hooks built with JavaScript.

Compatible with React `v18.0.0+`




![npm version](https://img.shields.io/npm/v/react-customs.svg)

![license](https://img.shields.io/npm/l/react-customs)

![downloads](https://img.shields.io/npm/dm/react-customs)






## Installation

```shell

npm install react-customs

or

npm i react-customs

```




## Hooks and Documentation

For documentation, please visit the [GitBook URL](https://azlibdar.gitbook.io/react-customs)




| Hook               | Description                                       | Example                                             |

| ------------------ | ------------------------------------------------- | --------------------------------------------------- |

| useCopyToClipboard | Simplify copying text to the clipboard.           | [Example](https://use-copy-to-clipboard.pages.dev/) |

| useCounter         | Manage a counter with step, min, and max values.  | [Example](https://use-counter.pages.dev/)           |

| useDebounce        | Delay updates to a value.                         | [Example](https://use-theme.pages.dev/)             |

| useDefault         | Ensure a state always has a default value.        | [Example](https://use-default.pages.dev/)           |

| useDocumentTitle   | Dynamically update the title of a webpage.        | [Example](https://use-document-title.pages.dev/)    |

| useFavicon         | Easily update the favicon of your webpage.        | [Example](https://use-favicon.pages.dev/)           |

| useLockScroll      | Lock and unlock scrolling on the page.            | [Example](https://use-lock-scroll.pages.dev/)       |

| useOnline          | Track the user's online/offline status.           | [Example](https://use-online.pages.dev/)            |

| usePrevious        | Track the previous and current state values.      | [Example](https://use-previous.pages.dev/)          |

| useQueue           | Managing a queue data structure with a max size.  | [Example](https://use-queue.pages.dev/)             |

| useStack           | Managing a stack data structure with a max size.  | [Example](https://use-stack.pages.dev/)             |

| useTabAway         | Number of times a user navigates away from a tab. | [Example](https://use-tab-away.pages.dev/)          |

| useTheme           | Manage and toggle between light and dark themes.  | [Example](https://use-theme.pages.dev/)             |

| useWindowSize      | Track the dimensions of the browser window.       | [Example](https://use-window-size.pages.dev/)       |




## Quick Example

```jsx

import { useDocumentTitle } from "react-customs";

function App() {

  useDocumentTitle("Hello world!");

  return 
No so happy hacking!
;

}


export default App;

```




## Contributing

We welcome contributions! Please read our [Contribution Guide](CONTRIBUTING.md) before submitting any pull requests.




## Contact

For any questions or feedback, please contact:

Email: [email protected]




Happy hacking!