134 | );
135 | },
136 | });
137 | ```
138 |
139 | Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
140 |
141 | ### React-Query
142 |
143 | React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
144 |
145 | First add your dependencies:
146 |
147 | ```bash
148 | pnpm add @tanstack/react-query @tanstack/react-query-devtools
149 | ```
150 |
151 | Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
152 |
153 | ```tsx
154 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
155 |
156 | // ...
157 |
158 | const queryClient = new QueryClient();
159 |
160 | // ...
161 |
162 | if (!rootElement.innerHTML) {
163 | const root = ReactDOM.createRoot(rootElement);
164 |
165 | root.render(
166 |
167 |
168 |
169 | );
170 | }
171 | ```
172 |
173 | You can also add TanStack Query Devtools to the root route (optional).
174 |
175 | ```tsx
176 | import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
177 |
178 | const rootRoute = createRootRoute({
179 | component: () => (
180 | <>
181 |
182 |
183 |
184 |
185 | ),
186 | });
187 | ```
188 |
189 | Now you can use `useQuery` to fetch your data.
190 |
191 | ```tsx
192 | import { useQuery } from "@tanstack/react-query";
193 |
194 | import "./App.css";
195 |
196 | function App() {
197 | const { data } = useQuery({
198 | queryKey: ["people"],
199 | queryFn: () =>
200 | fetch("https://swapi.dev/api/people")
201 | .then((res) => res.json())
202 | .then((data) => data.results as { name: string }[]),
203 | initialData: [],
204 | });
205 |
206 | return (
207 |
208 |
209 | {data.map((person) => (
210 |
{person.name}
211 | ))}
212 |
213 |
214 | );
215 | }
216 |
217 | export default App;
218 | ```
219 |
220 | You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
221 |
222 | ## State Management
223 |
224 | Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
225 |
226 | First you need to add TanStack Store as a dependency:
227 |
228 | ```bash
229 | pnpm add @tanstack/store
230 | ```
231 |
232 | Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
233 |
234 | ```tsx
235 | import { useStore } from "@tanstack/react-store";
236 | import { Store } from "@tanstack/store";
237 | import "./App.css";
238 |
239 | const countStore = new Store(0);
240 |
241 | function App() {
242 | const count = useStore(countStore);
243 | return (
244 |
245 |
248 |
249 | );
250 | }
251 |
252 | export default App;
253 | ```
254 |
255 | One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
256 |
257 | Let's check this out by doubling the count using derived state.
258 |
259 | ```tsx
260 | import { useStore } from "@tanstack/react-store";
261 | import { Store, Derived } from "@tanstack/store";
262 | import "./App.css";
263 |
264 | const countStore = new Store(0);
265 |
266 | const doubledStore = new Derived({
267 | fn: () => countStore.state * 2,
268 | deps: [countStore],
269 | });
270 | doubledStore.mount();
271 |
272 | function App() {
273 | const count = useStore(countStore);
274 | const doubledCount = useStore(doubledStore);
275 |
276 | return (
277 |
278 |
281 |
Doubled - {doubledCount}
282 |
283 | );
284 | }
285 |
286 | export default App;
287 | ```
288 |
289 | We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
290 |
291 | Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
292 |
293 | You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
294 |
295 | # Demo files
296 |
297 | Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
298 |
299 | # Learn More
300 |
301 | You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
302 |
--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
1 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
2 | import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
3 | import type * as React from "react"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | function DropdownMenu({
8 | ...props
9 | }: React.ComponentProps) {
10 | return
11 | }
12 |
13 | function DropdownMenuPortal({
14 | ...props
15 | }: React.ComponentProps) {
16 | return (
17 |
21 | )
22 | }
23 |
24 | function DropdownMenuTrigger({
25 | ...props
26 | }: React.ComponentProps) {
27 | return (
28 |
32 | )
33 | }
34 |
35 | function DropdownMenuContent({
36 | className,
37 | sideOffset = 4,
38 | ...props
39 | }: React.ComponentProps) {
40 | return (
41 |
42 |
51 |
52 | )
53 | }
54 |
55 | function DropdownMenuGroup({
56 | ...props
57 | }: React.ComponentProps) {
58 | return (
59 |
63 | )
64 | }
65 |
66 | function DropdownMenuItem({
67 | className,
68 | inset,
69 | variant = "default",
70 | ...props
71 | }: React.ComponentProps & {
72 | inset?: boolean
73 | variant?: "default" | "destructive"
74 | }) {
75 | return (
76 |
86 | )
87 | }
88 |
89 | function DropdownMenuCheckboxItem({
90 | className,
91 | children,
92 | checked,
93 | ...props
94 | }: React.ComponentProps) {
95 | return (
96 |
105 |
106 |
107 |
108 |
109 |
110 | {children}
111 |
112 | )
113 | }
114 |
115 | function DropdownMenuRadioGroup({
116 | ...props
117 | }: React.ComponentProps) {
118 | return (
119 |
123 | )
124 | }
125 |
126 | function DropdownMenuRadioItem({
127 | className,
128 | children,
129 | ...props
130 | }: React.ComponentProps) {
131 | return (
132 |
140 |
141 |
142 |
143 |
144 |
145 | {children}
146 |
147 | )
148 | }
149 |
150 | function DropdownMenuLabel({
151 | className,
152 | inset,
153 | ...props
154 | }: React.ComponentProps & {
155 | inset?: boolean
156 | }) {
157 | return (
158 |
167 | )
168 | }
169 |
170 | function DropdownMenuSeparator({
171 | className,
172 | ...props
173 | }: React.ComponentProps) {
174 | return (
175 |
180 | )
181 | }
182 |
183 | function DropdownMenuShortcut({
184 | className,
185 | ...props
186 | }: React.ComponentProps<"span">) {
187 | return (
188 |
196 | )
197 | }
198 |
199 | function DropdownMenuSub({
200 | ...props
201 | }: React.ComponentProps) {
202 | return (
203 |
204 | )
205 | }
206 |
207 | function DropdownMenuSubTrigger({
208 | className,
209 | inset,
210 | children,
211 | ...props
212 | }: React.ComponentProps & {
213 | inset?: boolean
214 | }) {
215 | return (
216 |
225 | {children}
226 |
227 |
228 | )
229 | }
230 |
231 | function DropdownMenuSubContent({
232 | className,
233 | ...props
234 | }: React.ComponentProps) {
235 | return (
236 |
244 | )
245 | }
246 |
247 | export {
248 | DropdownMenu,
249 | DropdownMenuPortal,
250 | DropdownMenuTrigger,
251 | DropdownMenuContent,
252 | DropdownMenuGroup,
253 | DropdownMenuLabel,
254 | DropdownMenuItem,
255 | DropdownMenuCheckboxItem,
256 | DropdownMenuRadioGroup,
257 | DropdownMenuRadioItem,
258 | DropdownMenuSeparator,
259 | DropdownMenuShortcut,
260 | DropdownMenuSub,
261 | DropdownMenuSubTrigger,
262 | DropdownMenuSubContent
263 | }
264 |
--------------------------------------------------------------------------------
/public/tanstack-word-logo-white.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------