TypeScript Hooks

Open-source TypeScript projects categorized as Hooks

Top 23 TypeScript Hook Projects

  • GitHub repo formik

    Build forms in React, without the tears 😭

    Project mention: [Need Advice] Look for in-code form building tools or suggestions on what's missing | reddit.com/r/Web_Development | 2021-05-27

    I've been a web developer for over 7 years and I still love creating online experiences with code. But I've come to hate the repetitive task of creating forms. Even with great tools like Formik (for React), I end up spending so much time managing the validation and HTML.

  • GitHub repo react-hook-form

    📋 React Hooks for forms validation (Web + React Native)

    Project mention: Build quality forms with React 🚀 | dev.to | 2021-06-16

    I hope that you enjoyed this humble guide to building quality forms with React, using two wonderful libraries: react-hook-form and yup. This is what I use every time I need to build a form, and I feel really happy and confident about the process. The fact that I can focus on the UI, features, and accessibility without worrying too much about state management or validation myself is absolutely priceless, and it saves me a lot of time.

  • GitHub repo react-query

    ⚛️ Hooks for fetching, caching and updating asynchronous data in React

    Project mention: So, do I really suck so much in React? Bad job interview experience | reddit.com/r/reactjs | 2021-06-16

    You might want to take a look at this library: react-query

  • GitHub repo constate

    React Context + State

  • GitHub repo fre

    :ghost: One of the smallest and fastest UI libraries with Fiber.

    Project mention: Fre Offscreen rendering: The fastest vdom algorithm | dev.to | 2021-06-07
  • GitHub repo react-intersection-observer

    React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

    Project mention: Load API content as elements become visible to users in React | dev.to | 2021-06-08

    TL;DR; You can reduce the number of queries you make on listing pages by loading content as it gets displayed. Use react-intersection-observer to detect when an element becomes visible and react-content-loader to display a contentful placeholder loader.

  • GitHub repo haunted

    React's Hooks API implemented for web components 👻

    Project mention: Why LitElement isn't as good as React | dev.to | 2021-03-10

    ** WCs don't have to be classes. See matthewp/haunted which uses hooks like React. But that library is not a mixin or wrapper around lit-element; it would replace lit-element. It does use lit-html though.

  • GitHub repo use-query-params

    React Hook for managing state in URL query parameters with easy serialization.

    Project mention: Whatever happened to old fashioned URL query parameters? (Not a rant) | reddit.com/r/reactjs | 2021-02-26

    Nothing is stopping you from storing state in the URL query string params. I do so frequently for pages containing tables where it's important to keep filtering and pagination state in sync with the URL, for example. Use this library https://github.com/pbeshai/use-query-params

  • GitHub repo react-colorful

    🎨 A tiny (2,5 KB) color picker component for React and Preact apps

    Project mention: I just write a WYSIWYG markdown editor, inspired by Typora. | reddit.com/r/javascript | 2021-04-10

    [react-colorful](https://github.com/omgovich/react-colorful]

  • GitHub repo web3-react

    🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

    Project mention: Fetching Blockchain Data without a wallet connected | reddit.com/r/ethdev | 2021-04-07

    Hi! I'm using web3-react with ethers.js to connect users to my application. I have a smart contract function that calculates the current price of an ERC721 token based on the ID of the next token, and I want to fetch and display the result of that function always - even if a user does not have a wallet installed in their browser.

  • GitHub repo pullstate

    Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like!

    Project mention: Would using Redux/Context be useful If I'm using RN-Firebase? | reddit.com/r/reactnative | 2021-05-13

    You could try out pullstate - its basically just global objects which you can mutate and which automatically update your state over your entire app, for whichever parts you have "pulled" the state into.

  • GitHub repo vue-composable

    Vue composition-api composable components. i18n, validation, pagination, fetch, etc. +50 different composables

    Project mention: I must say, this repo is awesome | news.ycombinator.com | 2021-03-03
  • GitHub repo react-fetching-library

    Simple and powerful API client for react 👍 Use hooks or FACCs to fetch data in easy way. No dependencies! Just react under the hood.

  • GitHub repo vscode-es7-javascript-react-snippets

    Extension for Javascript/React snippets with search supporting ES7 and babel features

    Project mention: 💻 5 Useful VS Code extensions to help you with Javascript, React and Git | dev.to | 2021-04-27

    ES7 React/Redux/GraphQL/React-Native snippets ✂️ This extension gives use a great number of code snippets to create components or imports faster. The first I do after create a new React component file is to use this extension, which autocomplete the initial part of a new component by just typing rafc + enter 🤯 👉 Here the list of snippets

  • GitHub repo hamburger-react

    Animated hamburger menu icons for React (1.5 KB) 🍔

  • GitHub repo react-awesome-reveal

    React components to add reveal animations using the Intersection Observer API and CSS Animations.

    Project mention: I made Starbucks ! 🚀🔥 | reddit.com/r/reactjs | 2021-01-27

    Here is the GitHub repo if your interested https://github.com/dennismorello/react-awesome-reveal

  • GitHub repo use-onclickoutside

    React hook for listening for clicks outside of an element.

    Project mention: 5 Awesome React Hooks ⚛️ | dev.to | 2021-03-13

    I think that useOnClickOutside is one of the bests, with this hook, you can easily capture outside clicks from an element, very useful for a modal for example. Here is a demo code:

  • GitHub repo react-components-by-ruvkr

    A collection of Responsive Animated Mobile friendly Lightweight React Components

    Project mention: A react component to highlight texts. Works with any range selection. | reddit.com/r/reactjs | 2021-02-04

    Source https://github.com/ruvkr/react-components-by-ruvkr

  • GitHub repo resolvers

    📋 Validation resolvers: Zod, Yup, Joi, Superstruct, Vest, class-validator, io-ts, and nope.

    Project mention: What's new in React Hook Form's resolvers V2 | dev.to | 2021-03-03

    Released in the 2020's summer, @hookform/resolvers is an optional module that allows you to validate React Hook Form's values with your favorite validation library. So far, we support 5 validation libraries: Yup, Zod, Vest, Joi, and Superstruct.

  • GitHub repo react-use-wizard

    🧙 A React wizard (stepper) builder without the hassle, powered by hooks.

    Project mention: Build React wizards (stepper) without the hassle, powered by hooks. | reddit.com/r/reactjs | 2021-01-03
  • GitHub repo use-interval

    A custom React Hook that provides a declarative setInterval called useInterval.

    Project mention: Princess Finder using React, ml5.js, and Teachable Machine Learning | dev.to | 2020-12-27

    We should use the classify method call in a specified interval. You can use a React hook called, useInterval for the same. The results array may look like this,

  • GitHub repo clean-state

    🐻 A pure and compact state manager, using React-hooks native implementation, automatically connect the module organization architecture. 🍋

    Project mention: A pure and compact state managerA pure and compact state manager | news.ycombinator.com | 2021-01-29
  • GitHub repo react-cool-form

    😎 📋 React hooks for forms state and validation, less code more performant.

    Project mention: ✨ How you build forms with Material-UI? This is the way I do. Link in the first comment. | reddit.com/r/reactjs | 2021-04-17

    Demo link: https://react-cool-form.netlify.app/docs/examples/material-ui Form library: https://github.com/wellyshen/react-cool-form

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-06-16.

Index

What are some of the best open-source Hook projects in TypeScript? This list will help you:

Project Stars
1 formik 27,527
2 react-hook-form 21,477
3 react-query 20,717
4 constate 3,314
5 fre 2,614
6 react-intersection-observer 2,126
7 haunted 1,991
8 use-query-params 1,374
9 react-colorful 1,307
10 web3-react 1,177
11 pullstate 824
12 vue-composable 741
13 react-fetching-library 582
14 vscode-es7-javascript-react-snippets 466
15 hamburger-react 432
16 react-awesome-reveal 415
17 use-onclickoutside 378
18 react-components-by-ruvkr 330
19 resolvers 288
20 react-use-wizard 178
21 use-interval 135
22 clean-state 109
23 react-cool-form 91