5 Great Custom Hooks For Your React Project

• react-use

  58 40,708 5.9 TypeScript

  React Hooks — 👍

One use case for the useWindowSize hook, which belongs to react-use, is for responsive design. The useWindowSize hook keeps track of the size of the browser window which makes it possible to apply different styles (layouts, displays, etc.) to user interfaces at different sizes. It returns an object containing the current width and height of the window.

• usehooks-ts

  19 5,852 9.2 TypeScript

  React hook library, ready to use, written in Typescript.

This implementation of the useCopyToClipboard hook comes from the usehooks-ts library. It provides an easy way to copy text to the clipboard. Other React hooks libraries also have this hook which they implement differently: some rely on JavaScript libraries like copy-to-clipboard that run on document.execCommand() while others like this one depend on the clipboard API.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• redux

  269 60,537 8.8 TypeScript

  A JS library for predictable global state management

  

createGlobalSize also belongs to react-use and it provides a way for you to create a global state that can be shared across multiple components without having to go for state management libraries like redux.

• use-http

  4 2,313 1.5 TypeScript

  🐶 React hook for making isomorphic http requests

  

As I was searching through the codebase and writing the components for my current work ticket, I came across some useful custom hooks from a number of third-party libraries like react-use, usehooks-ts, Mantine. But there are for sure other similar libraries out there such as use-http, react-hanger and many more.

• mantine

  226 24,791 9.9 TypeScript

  A fully featured React components library

  

Have you ever thought about designing or making your application behave differently based on the user's operating system (OS) such as implementing adaptive design or providing different download links for different platforms? Well, this hook from the Mantine library provides you with the OS name, returning it as a string.

• react-hanger

  3 1,932 2.0 TypeScript

  A collection of useful React hooks

As I was searching through the codebase and writing the components for my current work ticket, I came across some useful custom hooks from a number of third-party libraries like react-use, usehooks-ts, Mantine. But there are for sure other similar libraries out there such as use-http, react-hanger and many more.

Suggest a related project