File tree Expand file tree Collapse file tree 3 files changed +5
-7
lines changed
examples/react/with-responsive-image Expand file tree Collapse file tree 3 files changed +5
-7
lines changed Original file line number Diff line number Diff line change 11# TanStack + ResponsiveImage
22
3- Integrating [ ResponsiveImage] ( responsive-image.dev ) with TanStack Router.
3+ Integrating [ ResponsiveImage] ( https:// responsive-image.dev) with TanStack Router.
44
55Run ` pnpm dev ` to run locally.
Original file line number Diff line number Diff line change @@ -3,12 +3,12 @@ import { ResponsiveImage } from '@responsive-image/react'
33import { getImage } from '../images.ts'
44
55export const Route = createFileRoute ( '/$imageId' ) ( {
6+ loader : ( { params } ) => getImage ( params . imageId ) ,
67 component : Image ,
78} )
89
910function Image ( ) {
10- const { imageId } = Route . useParams ( )
11- const image = getImage ( imageId )
11+ const image = Route . useLoaderData ( )
1212
13- return < ResponsiveImage src = { image } className = "large" > </ ResponsiveImage >
13+ return < ResponsiveImage src = { image } className = "large" / >
1414}
Original file line number Diff line number Diff line change 1- import { Outlet , createRootRoute } from '@tanstack/react-router'
1+ import { Outlet , Link , createRootRoute } from '@tanstack/react-router'
22import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
33import { TanstackDevtools } from '@tanstack/react-devtools'
44import { ResponsiveImage } from '@responsive-image/react'
5- import { Link } from '@tanstack/react-router'
6-
75import './app.css'
86import { getThumbsnails } from '../images.ts'
97
You can’t perform that action at this time.
0 commit comments