Awesome Tanstack

a curated list of examples using Tanstack Headless, type-safe, & powerful utilities

Contents

• TanStack Libraries
  • TanStack Query
  • TanStack Table
  • TanStack Virtual
  • TanStack Start
  • TanStack Form
  • TanStack Router
• Contribute

TanStack Libraries

TanStack Query

• Query Key Factory- A library for creating typesafe, standardized query keys, which is particularly useful for cache management in TanStack Query.

• OpenAPI React Query Codegen - A code generator for creating React Query (TanStack Query) hooks based on OpenAPI schemas.

• React Query Hooks for Firebase- React Query hooks for managing asynchronous operations with Firebase. Supports Authentication, Analytics, Firestore, and Realtime Database.

TansStack Table

• Material React Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.

• Data Table Filters - A playground for exploring TanStack Table with various filter options and customizations.

Tanstack Virtual

• Virtual Grid - A library for implementing virtualized grids, ideal for efficiently rendering large data sets with minimal performance overhead.

TanStack Start (Alpha)

• Clerk Authentication with Clerk - Clerk's TanStack Start SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier.
• Convex - Query data from Convex (Backend as a Service) in a TanStack Start site.

TanStack Form

TanStack Router

Tutorials & Articles

YouTube

• Tanner Linsley Channel - Tanner Linsley, creator of TanStack, shares tutorials and insights on building full-stack React applications.
• The Journey To Making A New Framework: TanStack Start with Tanner Linsley - Tanner Linsley, creator of TanStack, talks about the journey of creating TanStack Start, a new full-stack React framework.
• An Early Glimpse of TanStack Start - TanStack Start is a fresh take on full-stack React development by the same creators of TanStack Query and TanStack Router.
• TanStack Table Tutorial - In this video you'll learn how to create a complex, customizable table using the TanStack table library using Chakra UI.
• TanStack Form Podcast -Podcast @devtoolsfm talks about their chat with creator Taylor Lindsey about introducing TanStack Form.
• Is TanStack Router Better than React-Router? - An example using TanStack Router for streaming movies.
• Next Gen Fullstack React with TanStack Start - Scott and Wes from Syntax talk with Tanner Linsley, creator of TanStack, about the React ecosystem, and the evolution and futue of TanStack's suite of tools, including TanStack Router and TanStack Start.

Contribute

Contributions welcome! Read the contribution guidelines first.