Search results for "react client side"

whoIsHiring

@lowlu

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.

0

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";

"C Shell", "CSS", "CUDA", "D", "Dart", "Data Analytics", "Data Modeling",

"Puppet", "Python", "R", "RabbitMQ", "Racket", "Raspberry Pi", "RDS/Aurora", "React", "React Native", "Redis", "Redshift", "R

const toggleFilter = (filter: string) => {

decisiveRoseFelidae

@techMember

@jsxImportSource https://esm.sh/react

0

HTTP

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

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

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

function WeatherDashboard() {

setTheme(theme === 'light' ? 'dark' : 'light');

const handleLocationSearch = async (e: React.FormEvent) => {

e.preventDefault();

</div>

function client() {

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

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

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

HTreeTreeP

@maxm

H🌳🌳P H-Tree-Tree-P https://maxm-htreetreep.web.val.run/

0

HTTP

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

import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo?v=27";

import base32Encode from "npm:base32-encode";

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

// Uncomment to run migrations

// The script we run within the worker. Don't reference anything

// outside of this function as it won't be available within the worker.

const workerScript = () => {

addReactFromValCDN

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

1

0

Script

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

export function addReactFromValCDN(): string {

const reactDom = scriptTag({

src: "https://api.val.town/v1/express/liamdanielduffy.REACT_DOM_CDN_VAL",

const react = scriptTag({

src: "https://api.val.town/v1/express/liamdanielduffy.REACT_CDN_VAL",

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

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.

3

2

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> {

sqliteExplorerApp

@pomdtr

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v37) by forking this val that imports & exports it in your account: Authentication SQLite Explorer basic authentication with your Val Town API Token as the password (leave the username field blank). Todos / Plans [ ] fix wonky sidebar separator height problem [ ] improve error handling [ ] improve table formatting [ ] make result tables scrollable [ ] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val ) [ ] add export to sqlite [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add listener for cmd+enter to submit query [ ] add views to the sidebar

1

0

HTTP

## Todos / Plans

- [ ] fix wonky sidebar separator height problem

- [ ] improve error handling

- [ ] add export to sqlite

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [ ] add automatic execution of initial select query on double click

- [x] add listener for cmd+enter to submit query

- [ ] add views to the sidebar

return c.render(

dataDash

@janu

This is a passworded dashboard to go on a tv. The password is office123. It tells the bitcoin price, but can be swapped for any other timeseries endpoint for your use case.

0

HTTP

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

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

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

import { Chart, registerables } from "https://esm.sh/chart.js";

</div>

function client() {

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

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

function processDataTo30Points(prices) {

nobleJadeRoadrunner

@Bhatti

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

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(

copperBarnacle

@luwes

@jsxImportSource https://esm.sh/preact

0

HTTP

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

import { render } from "npm:preact-render-to-string";

export default async function(req: Request) {

return new Response(

spotify

@hunty

Spotify Playback A val to setting up some endpoints for Spotify play state.

3

0

HTTP

export let spotifyRequestToken = ({ client_id, client_secret, code, redirect_uri }) =>

"Authorization": "Basic " + (new Buffer(client_id + ":" + client_secret).toString("base64")),

export let spotifyRefreshToken = async ({ refresh_token, client_id, client_secret }) =>

"Authorization": "Basic " + (new Buffer(client_id + ":" + client_secret).toString("base64")),

`https://accounts.spotify.com/authorize?response_type=code&client_id=${

encodeURIComponent(Deno.env.get("SPOTIFY_CLIENT_ID"))

client_id: Deno.env.get("SPOTIFY_CLIENT_ID"),

client_secret: Deno.env.get("SPOTIFY_CLIENT_SECRET"),

client_id: Deno.env.get("SPOTIFY_CLIENT_ID"),

client_secret: Deno.env.get("SPOTIFY_CLIENT_SECRET"),

devstats

@tmcw

Developer Statistics This val lets you post statistics from your GitHub Actions runs to build charts of change over time. We do this by having a step at the end of our actions run like this: - name: devstats run: | curl -X "POST" "https://tmcw-devstats.web.val.run/" \ -H 'Authorization: Bearer ${{ secrets.DEVSTATS_TOKEN }}' \ -H 'Content-Type: application/json; charset=utf-8' \ -d $"{ \"name\": \"node_modules_kb\", \"value\": $(du -sk node_modules | awk '{print $1}') }" And setting a DEVSTATS_TOKEN value, which could be any short random value, both in Val Town environment variables and as a secret in your GitHub Actions configuration. Currently the name you attach to a statistic can be anything, and the value is expected to be a number.

2

4

HTTP

title.innerText = name

const div = wrap.appendChild(document.createElement("div"))

const width = div.getBoundingClientRect().width

const plot = Plot.lineY(data, {

x: "date",

Bio

@ikbear

@jsxImportSource https://esm.sh/react

0

HTTP

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

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

export default async function(req: Request) {

return new Response(

ModuloCreazioneIntimita

@cicciocappa

@jsxImportSource https://esm.sh/react

0

HTTP

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

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

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

// Define question types

</div>

function client() {

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

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

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

tuna_example

@jxnblk

// Example of using tuna and caviar with React (resrv) on Val Town

0

HTTP

// Example of using tuna and caviar with React (resrv) on Val Town

// what does the save button do?

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

import { caviar } from "https://esm.town/v/jxnblk/caviar";

import resrv, { React } from "https://esm.town/v/jxnblk/resrv";

import { css } from "https://esm.town/v/jxnblk/tuna";

import ValBadge from "https://esm.town/v/jxnblk/val_badge_react";

// Helper for using CSS vars

function App({ script }) {

const [mode, setMode] = React.useState("light");

const toggleMode = e => {

understandingLavenderTiger

@Eddy

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

1

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 YouTubeDownloader() {

</div>

function client() {

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

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

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