examples
wouter
examples | wouter | |
---|---|---|
5 | 19 | |
892 | 6,132 | |
4.7% | - | |
8.7 | 9.4 | |
6 days ago | 11 days ago | |
TypeScript | TypeScript | |
MIT License | The Unlicense |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
examples
-
Using Remix or NextJS
Real time data update: Remix supports Server Sent Events e.g. https://github.com/remix-run/examples/tree/main/_official-realtime-app https://github.com/remix-run/remix/discussions/2622
-
Server Actions, databases, and the future of data handling
Check out the official Xata template in this Remix example.
-
Is React Router V6 over-engineered?
Combobox example (from remix but the code is the same - remix is just react-router running on the server rather than the browser)
-
Starchart: Playwright and Chakra UI Setup
Setting up Chakra UI was relatively simple. I followed their instructions for the most part. I also found this example to be really helpful. My process for this went like this: I looked at the instructions in Chakra UI docs for the client, server and root files, and compared them with the existing code in starchart. Then, I also referenced them against the example code.
-
Svelte CSS Image Slider: with Bouncy Overscroll
import { error } from '@sveltejs/kit'; import { createReadStream, statSync } from 'node:fs'; import type { Readable } from 'node:stream'; import { PassThrough } from 'node:stream'; import { join } from 'path'; import sharp from 'sharp'; import type { RequestHandler } from './$types'; async function metadata( source: string ): Promise<{ format?: string; width?: number; error?: string }> { try { const image = sharp(source); const { format, width } = await image.metadata(); if (format) { return { format, width }; } } catch (error: unknown) { console.error(`Error reading image metadata: ${source}: ${error}`); } return { error: `Error reading image metadata: ${source}` }; } function resize(imageStream: Readable, width: number, format: string): ReturnType { let sharpTransforms; switch (format) { case 'jpeg': sharpTransforms = sharp().resize(width).jpeg({ mozjpeg: true }); break; case 'avif': sharpTransforms = sharp().resize(width).avif({ quality: 80 }); break; case 'webp': sharpTransforms = sharp().resize(width).webp({ quality: 80 }); break; default: sharpTransforms = sharp(); } const passthroughStream = new PassThrough(); imageStream.pipe(sharpTransforms).pipe(passthroughStream); // @ts-expect-error respond with passthrough stream return new Response(passthroughStream as unknown); } // Based on: https://github.com/remix-run/examples/blob/main/image-resize/app/routes/assets/resize/%24.ts export const GET: RequestHandler = async function get({ params, url, setHeaders }) { try { const { filename } = params; const srcPath = join('src/assets', filename); const fileStat = statSync(srcPath); if (!fileStat) { throw error(404, 'Not found'); } const metadataPromise = metadata(srcPath); const readStream = createReadStream(srcPath); const { format, width } = await metadataPromise; if (!format || !readStream || !width) { throw error(404, 'Not found'); } const { searchParams } = url; const outputWidthString = searchParams.get('w'); const outputWidth = outputWidthString ? Math.min(parseInt(outputWidthString, 10), width) : width; const outputFormat = searchParams.get('format') ?? format; setHeaders({ 'Content-Type': `image/${outputFormat}`, 'Content-Disposition': `filename= ${filename.split('.')[0]}.${outputFormat}`, 'Cache-Control': 'public, max-age=31536000, immutable' }); return resize(readStream, outputWidth, outputFormat); } catch (err: unknown) { const httpError = err as { status: number; message: string }; if (httpError.status && httpError.message) { throw error(httpError.status, httpError.message); } const { pathname } = url; const message = `Error in load function for path "${pathname}": ${err as string}`; console.error(message); throw error(500, message); } };
wouter
-
Finally switched to Vite after CRA.
We're using wouter with great success. It's simple and effective for what we need from a router
- What is your biggest pain as a Flutter developer?
- An alternative to react router
-
Is React Router V6 over-engineered?
If you feel like React Router is a bit too over-engineered and you just need simple routing, you can have a look at https://github.com/molefrog/wouter
- Didn't realize so many others are also a bit tired of React Router. I ended up porting my app over to Wouter.
-
Switched from Next.js to Remix.js and Loving it.
I changed over to using wouter instead of react-router, and I love it!
-
Why is my Single Page App sometimes reloading the nav bar between page transitions?
Just to add alternatives. I'm a fan of Wouter its 1/10th in size compared with react-router.
-
Project without React router library
Other options than react-router are also available, like wouter, if you can't use react-router for some specific reason.
-
Is building a big project/website/app with React a mistake?
Single page just means one index.html is served and then JavaScript takes over to display content. You can use a client side router to simulate pages. There are some to choose from, I can recommend wouter. https://github.com/molefrog/wouter
-
How I got a remote job without a degree nor experience
Routing: At this point you should understand how routing in React works. You can use react-router to enhance it. There is a small library called wouter which you might want to have a look at.
What are some alternatives?
epic-stack - This is a Full Stack app starter with the foundational things setup and configured for you to hit the ground running on your next EPIC idea.
react-router - Declarative routing for React
blues-stack - The Remix Stack for deploying to Fly with PostgreSQL, authentication, testing, linting, formatting, etc.
react-router-redux
starchart - A self-serve tool for managing custom domains and certificates [Moved to: https://github.com/DevelopingSpace/starchart]
react-breadcrumbs - Automatic breadcrumbs for React-Router
2022-css-day_oh-snap
Router5 - Flexible and powerful universal routing solution
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
react-router-component - Declarative router component for React.
Playwright - Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
universal-router - A simple middleware-style router for isomorphic JavaScript web apps