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. Learn more →
Top 23 TypeScript Hook Projects
-
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.
**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.
-
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
-
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.
[1] https://emotion.sh/docs/introduction
[2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...
-
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.
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 🚀.
-
-
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 -
-
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.
-
Feel free to use these modern react hooks you can find more custom hooks in the react-use package and Github rooks.
-
-
Github Docs
-
8. react-colorful
-
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).
-
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.
-
-
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
-
You can find multiple react-anime examples on CodePen.
-
I am using a hooks library → https://github.com/JohannesKlauss/react-hotkeys-hook/
-
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-28I 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-27This 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
- Try it in your next React project
- Whenever a Flatlist item is added/changed is re-rendering the entire render method!
- react-factor: A really easy way to hoist any React Hook up to a React Context to create a shared dynamic state.
- react-factor: A really easy way to hoist any React Hooks up to a React Context to create a shared dynamic state.
- The 7 Best React Component Libraries to Use in 2022
- I rebuilt DCAStack.com - An Automated Crypto Dollar Cost Averaging Bot on Defi!
- REST APIs - How To Connect Your React App Like The Pros (Incl Detailed Example)
-
A note from our sponsor - InfluxDB
www.influxdata.com | 30 Nov 2022
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