1/** @jsxImportSource https://esm.sh/react */2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";3import { html } from "https://esm.town/v/stevekrouse/html";4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";5import { renderToString } from "npm:react-dom/server";67function StatusRow({ rows }) {
fluxImageGeneratormain.tsx4 matches
2// It features a clean UI with an input field for the prompt and a button to generate the image.3// The generated image is displayed below the input field.4// React is used for the UI and the fal.ai serverless client for image generation.5// The app measures and displays the latency for each image generation.6// The background features randomly placed pixelart lightning bolts in neon yellow.78/** @jsxImportSource https://esm.sh/react */9import * as fal from "https://esm.sh/@fal-ai/serverless-client";10import React, { useEffect, useState } from "https://esm.sh/react";11import { createRoot } from "https://esm.sh/react-dom/client";12import { blob } from "https://esm.town/v/std/blob";13
bigFuchsiaHalibutmain.tsx4 matches
1/**2* This React app creates a search interface with a navbar and two equal-width panels.3* It includes a search input on the left and displays search results as cards on the right.4* The search functionality is simulated with a static list of items.5*/67/** @jsxImportSource https://esm.sh/react */8import React, { useState } from "https://esm.sh/react";9import { createRoot } from "https://esm.sh/react-dom/client";1011// Simulated data for search results
properBlueLionmain.tsx2 matches
1/** @jsxImportSource https://esm.sh/react */2import { renderToString } from "npm:react-dom/server";34export const ShowName = (name: string) => {
1/** @jsxImportSource https://esm.sh/react */2import React, { useState, useEffect } from "https://esm.sh/react";3import { createRoot } from "https://esm.sh/react-dom/client";4import { Tldraw } from "https://esm.sh/@tldraw/tldraw@2.3.0";5
1tldraw example with builder, for consistent React versions.23Migrated from folder: Archive/server
ReactStreamREADME.md15 matches
1React SSR and client-side hydration for Val Town23## Usage45```tsx6/** @jsxImportSource https://esm.sh/react */7import { render, React } from "https://esm.town/v/jxnblk/ReactStream";89function App() {10const [count, setCount] = React.useState(0);11return (12<html>13<body>14<h1>ReactStream</h1>15<p>React SSR with client-side hydration in Val Town</p>16<pre>{count}</pre>17<button onClick={() => setCount(count - 1)}>-</button>25```2627[Live example](https://www.val.town/v/jxnblk/ReactStreamDemo)2829To render static HTML without hydration, pass `false` as the second argument.48### robots.txt4950ReactStream has a built-in middleware to handle request to `/robots.txt`5152```tsx53import { render, robots } from "https://esm.town/v/jxnblk/ReactStream";54// ...55export default render(App, import.meta.url, [9293```tsx94/** @jsxImportSource https://esm.sh/react */95import { render } from "https://esm.town/v/jxnblk/ReactStream";9697function App () {99<html>100<head>101<title>ReactStream</title>102</head>103<body>111```112113React requires matching versions for SSR and hydration.114Import `React` from `https://esm.town/v/jxnblk/ReactStream` to ensure your component uses the same version as this library (currently react@18.3.1).115116Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo117
ReactStreammain.tsx16 matches
1/** @jsxImportSource https://esm.sh/react */2import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";3import * as React from "https://esm.sh/react@18.3.1";45export { React };67export type RequestHandler = (request: Request) => Promise<Response>;13export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise<Response>;1415export interface ReactStreamProps {16url: URL;17pathname: string;2324export function render<T>(25/** Root-level React component that renders an entire <html> element26* including the head and body tags.27*/28Component: React.ComponentType<ReactStreamProps>,29/** On Val Town, use `import.meta.url` for client-side hydration */30module: string | false,31/** Optional middleware */32opts: ReactStreamOptions | Middleware[] = [],33) {34const useMiddleware = Array.isArray(opts); // for backwards compat35const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};36const { api, getInitialProps } = options;374243return async function handler(request: Request): Promise<Response> {44const main = reactStream(Component, module);45const middleware: Middleware[] = [46parseURL,71export default render;7273// main react response handler74const reactStream = (75Component: React.ComponentType<ReactStreamProps>,76module: string | false,77): Middleware =>78async function(req: DataRequest, res: Response): Promise<Response> {79const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server");8081const stream = await renderToReadableStream(91headers.set("Content-Type", "text/html");9293console.log("react", res.status);94return new Response(stream, {95headers,139};140/** DEPRECATED: Use middleware instead */141export interface ReactStreamOptions {142/** DEPRECATED: Optional text response for robots.txt */143robots?: string;
hungryWhiteLeoponmain.tsx4 matches
4* information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews.5*6* It uses React for the frontend, the Nominatim API for initial coffee shop data,7* and Val Town's SQLite for data persistence.8*/910/** @jsxImportSource https://esm.sh/react */11import React, { useEffect, useState } from "https://esm.sh/react";12import { createRoot } from "https://esm.sh/react-dom/client";1314function App() {
1/**2* This chat application allows users to post messages and view a log of all messages.3* It uses SQLite for persistence and React for the frontend.4* The server handles message posting and retrieval, while the client renders the UI.5*/6/** @jsxImportSource https://esm.sh/react */7import React, { useState, useEffect } from "https://esm.sh/react";8import { createRoot } from "https://esm.sh/react-dom/client";910interface Message {28};2930const handleSubmit = async (e: React.FormEvent) => {31e.preventDefault();32if (!newMessage.trim()) return;
