TypeScript Hooks

Open-source TypeScript projects categorized as Hooks

Top 23 TypeScript Hook Projects

  • react-hook-form

    📋 React Hooks for form state management and validation (Web + React Native)

    Project mention: Consuming a Rails API with a NextJs client | dev.to | 2022-11-28

    https://react-hook-form.com/ “Performant, flexible and extensible forms with easy-to-use validation”

  • TanStack Query

    🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.

    Project mention: Consuming a Rails API with a NextJs client | dev.to | 2022-11-28

    **React Query is the link between the Rails and NextJs **Working together with Axios (my code), it is a great option to consume the REST API (and GraphQL). You have the access to: isLoading, isError, data, error, and others. It is a very easy way to load data and rescue errors.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • SWR

    React Hooks for Data Fetching

    Project mention: 📚 RTK Query Tutorial (CRUD) | dev.to | 2022-11-29

    Maybe, some of you already heard about React Query or SWR. I believe those state management package have the same concept with the RTK Query. However, a winning point about RTK query is all in one with Redux. If you are using Redux, so it's a free optional feature without installing a new package.

  • react-table

    🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

    Project mention: Sometimes things only work in strict mode | reddit.com/r/reactjs | 2022-11-18
  • mantine

    React components library with native dark theme support

    Project mention: Tailwind Is a Leaky Abstraction | news.ycombinator.com | 2022-11-29

    I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read.

    Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore because of runtime overhead[2] so Tailwind may be the future after all.

    [0] https://mantine.dev

    [1] https://emotion.sh/docs/introduction

    [2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...

  • constate

    React Context + State

    Project mention: What are your favorite small utility packages? | reddit.com/r/reactjs | 2022-10-14

    Another one I like is https://github.com/diegohaz/constate, also <100 lines, but it makes contexts much easier to use. FB also uses mostly contexts for state management.

  • react-intersection-observer

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

    Project mention: Beautiful UI animation on scroll with React | dev.to | 2022-11-25

    1. Install react-intersection-observer from Github

  • Scout APM

    Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.

  • fre

    :ghost: Tiny Footprint Concurrent UI library for Fiber.

    Project mention: Fre: 1KB Concurrency React Alternative | news.ycombinator.com | 2022-03-29
  • kbar

    fast, portable, and extensible cmd+k interface for your site

    Project mention: I made a full-stack portfolio site using Next.js and Tailwind! | dev.to | 2022-10-18

    I also added a Cmd+K interface to my site to make mouse-less navigation easier. It’s made using kbar and styles using Tailwind CSS. Here is what it looks like -

  • wagmi

    React Hooks for Ethereum

    Project mention: I rebuilt DCAStack.com - An Automated Crypto Dollar Cost Averaging Bot on Defi! | reddit.com/r/solidity | 2022-10-08

    On the frontend side of things, we utilized the amazing wagmi hooks library to speed up our development process. Along with rainbow kit to make wallet connecting a lot more smoother.

  • rooks

    Essential React custom hooks ⚓ to super charge your components!

    Project mention: Custom Hooks to Lightweight Your React Project | dev.to | 2021-12-14

    Feel free to use these modern react hooks you can find more custom hooks in the react-use package and Github rooks.

  • haunted

    React's Hooks API implemented for web components 👻

  • usehooks-ts

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

    Project mention: Top 10 Awesome React Hooks Libraries | dev.to | 2022-08-21

    Github Docs

  • react-colorful

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

    Project mention: 16 Libraries You Should Know as a React Developer 💯🔥 | dev.to | 2022-10-04

    8. react-colorful

  • useStateMachine

    The <1 kb state machine hook for React

    Project mention: Is it okay to use many useState and useEffect? | reddit.com/r/reactjs | 2022-06-30

    Another option is to consider using a state machine with a library like xstate or useStateMachine. I love how state machines can simplify complex states and eliminate impossible states (ex: being in two states at the same time).

  • use-query-params

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

    Project mention: React router v6 useSearchParams | dev.to | 2021-12-11

    With react router v5 I was using a library called use-query-params. It had this great hook called useQueryParam which let you manage 1 query parameter in the same way as useState worked.

  • graphql-hooks

    🎣 Minimal hooks-first GraphQL client

  • rest-hooks

    Delightful data fetching for React.

    Project mention: (React-Query ) Re-declaring useQuery() and all its options in multiple components? | reddit.com/r/reactjs | 2022-11-28

    You're probably better off using a tool that is built with code reuse in mind like https://resthooks.io

  • react-anime

    ✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

    Project mention: Top 7 React Animation Libraries in 2022 | dev.to | 2022-08-11

    You can find multiple react-anime examples on CodePen.

  • react-hotkeys-hook

    React hook for using keyboard shortcuts in components.

    Project mention: Use a hook inside a `forEach` loop? | reddit.com/r/reactjs | 2022-02-26

    I am using a hooks library → https://github.com/JohannesKlauss/react-hotkeys-hook/

  • react-hook

    ↩ Strongly typed, concurrent mode-safe React hooks

    Project mention: How to use Resize Observer with React | dev.to | 2022-07-09

    Our requirements look good and pretty strict, uh? But don't worry, we can deal with all of them using the beautiful and very easy-to-use useResizeObserver hook from the beautiful react-hook library by Jared Lunde. According to it's documentation and my tests and usage as well it meets all our requirements:

  • vscode-react-javascript-snippets

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

    Project mention: What are good ways to speed up the small little things when developing? Like typing this `${}` or the function definition of a react component? How can I use shortcuts in VS code, or are there any other tools? Pls also tell if you solved other small problems for yourself. | reddit.com/r/reactjs | 2022-09-28

    I think the VScode extension ES7+ React/Redux/React-Native snippets by dsznajder does quite a lot of heavy lifting and makes life eazier. See the list of snippets https://github.com/chillios-ts/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

  • react-async-hook

    React hook to handle any async operation in React components, and prevent race conditions

    Project mention: What's the proper way to abort a request made by Effect A if-and-only-if Effect B’s request finishes first? | reddit.com/r/react | 2022-01-27

    This works fine! Effect A will finish before Effect B nearly every time. The requests are also cancelled if the component is unmounted or a relevant prop changes thanks to this article's implementation with AbortControllers.

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.

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 2022-11-29.

TypeScript Hooks related posts

Index

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

Project Stars
1 react-hook-form 31,878
2 TanStack Query 31,252
3 SWR 24,675
4 react-table 19,983
5 mantine 15,932
6 constate 3,744
7 react-intersection-observer 3,720
8 fre 3,539
9 kbar 3,534
10 wagmi 3,419
11 rooks 2,630
12 haunted 2,450
13 usehooks-ts 2,449
14 react-colorful 2,386
15 useStateMachine 2,278
16 use-query-params 1,783
17 graphql-hooks 1,769
18 rest-hooks 1,691
19 react-anime 1,485
20 react-hotkeys-hook 1,313
21 react-hook 1,148
22 vscode-react-javascript-snippets 1,131
23 react-async-hook 1,121
Delete the most useless function ever: context switching.
Zigi monitors Jira and GitHub updates, pings you when PRs need approval and lets you take fast actions - all directly from Slack! Plus it reduces cycle time by up to 75%.
www.zigi.ai