Search

exceptionalBrownWolf

@CoachCompanion

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import { marked } from "https://esm.sh/marked@4.3.0";

git_jiggy

@stevekrouse

Needs GITHUB_CONTRIBUTIONS key set in your Val Town Environment Variables . Get this token here: https://github.com/settings/personal-access-tokens/new Give it basically the minimum permissions. It should only pull public data anyways.

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useRef, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const SCALES = {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

reactMarkdownSample

@matthamlin

@jsxImportSource https://esm.sh/react@experimental

HTTP

/** @jsxImportSource https://esm.sh/react@experimental */

import { renderToReadableStream } from "npm:react-dom@experimental/server";

import { MarkdownAsync } from "npm:react-markdown";

import rehypeRaw from "npm:rehype-raw";

mortgageCalculator

@IzzyM

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import React, { useState } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

function calculateMortgage(principal: number, annualRate: number, years: number) {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

expSumOfTheDay

@charmaine

Exponential Sum Plot Generator An homage to John D. Cook's Exponential Sum of the Day The plot shows the partial sums of the exponential sum: Σ(n=0 to N) exp(2πi(n/m + n²/d + n³/y)) The real part of the sum is plotted on the x-axis, and the imaginary part of the sum is plotted on the y-axis.

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import * as d3 from "https://esm.sh/d3@7";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import React from "https://esm.sh/react@18.2.0";

import { svgServer } from "https://esm.town/v/fil/svgServer";

function App() {

const [currentDate, setCurrentDate] = React.useState(new Date());

const [svg, setSvg] = React.useState("");

React.useEffect(() => {

const fetchSvg = () => {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

dateme_form_react

@stevekrouse

@jsxImportSource https://esm.sh/react@18.2.0

Script

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import date_me_doc_locations from "https://esm.town/v/stevekrouse/date_me_doc_locations";

const Link = ({ href, children }) => {

vibe_playground

@ryanguill

An interactive, runnable TypeScript val by ryanguill

Script

<body>

</div>

MathFlashCard_RetroEdition

@qkiii

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect, useRef, useCallback } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

return React.createElement(

React.createElement(

React.createElement("div", { className: "current-streak" },

waka

@loading

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

enum Color {

</div>

function client() {

createRoot(document.getElementById("root")!).render(<App />);

if (typeof document !== "undefined") {

client();

async function fetchWakaTimeData(): Promise<DataPoint[]> {

resumeAnalyzerHTTP

@azeem_rizvi72

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import React, { useState } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

function App() {

const [error, setError] = useState<string | null>(null);

const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {

const uploadedFile = event.target.files?.[0];

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

verbalScarletAntelope

@vawogbemi

WIP Searcher for HN whos hiring posts HonoJs doesn't support render for async components so the style is off for the home page. And the state changes don't register in html rendering so thinking of using react instead.

HTTP

HonoJs doesn't support render for async components so the style is off for the home page.

And the state changes don't register in html rendering so thinking of using react instead.

/** @jsxImportSource https://esm.sh/react */

import React, { useCallback, useEffect, useReducer, useRef, useState } from "https://esm.sh/react";

import { hydrateRoot } from "https://esm.sh/react-dom/client";

import { renderToString } from "https://esm.sh/react-dom/server";

import { hnSearch } from "https://esm.town/v/stevekrouse/hnSearch";

smoothCopperTuna

@amanjangra855

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 **/

import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";

export default (req: Request) => {

return new Response(

status

@stevekrouse

Moved to https://www.val.town/x/stevekrouse/status

HTTP

/** @jsxImportSource https://esm.sh/react */

import { sqlite } from "https://esm.town/v/std/sqlite?v=6";

import { html } from "https://esm.town/v/stevekrouse/html";

import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";

import { renderToString } from "npm:react-dom/server";

function StatusRow({ rows }) {

valentine

@asdadssasda

Hello!!! Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right. You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen! Have fun with it and hopefully your crush says yes hehe.

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import React, { useState } from "https://esm.sh/react@18.2.0";

const NO_PHRASES = [

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

addReactFromCDN

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

import { scriptTag } from "https://esm.town/v/liamdanielduffy/scriptTag";

export function addReactFromCDN(): string {

const reactDom = scriptTag({

src: "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",

const react = scriptTag({

src: "https://unpkg.com/react@18/umd/react.production.min.js",

return [react, reactDom].join(" ");

…

134 135

136

137 138

…

376