Search results for "react client side"

calendarEventExtractor

@pdebieamzn

// This calendar app will allow users to upload a PDF, extract events from it using OpenAI's GPT model,

1

0

HTTP

// and display them on a big calendar. We'll use react-big-calendar for the calendar component,

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

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

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

import { Calendar, momentLocalizer } from "https://esm.sh/react-big-calendar";

// Set up the localizer for react-big-calendar

function client() {

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

erties. Use ISO 8601 format for dates. Do not include any explanatory text outside the JSON array. Do not use markdown code f

App

@tfayyaz

// JSX can be used in the client val thanks to this magic comment

0

HTTP

// JSX can be used in the client val thanks to this magic comment

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

// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)

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

import ReactDOM from "https://esm.sh/react-dom";

import { Button } from "https://esm.town/v/nbbaier/shadcnButton";

</Table>

// The app will be rendered inside the root div

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

personalSocialCardGenerator

@mumu

@jsxImportSource https://esm.sh/react

0

HTTP

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

import { Award, Book, Briefcase, Heart, LucideIcon, MapPin, Target, UserCircle } from "https://esm.sh/lucide-react";

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

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

function App() {

</h3>

{data.highlights.map((highlight, index) => <li key={index}>{highlight}</li>)}

return colors[index % colors.length];

function client() {

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

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

client();

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

KPoolCafeGameMenu

@Kpool

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

0

HTTP

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

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

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

function App() {

color: "#a0a0a0",

function client() {

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

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

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

// Server-side code remains the same as in the previous implementation

const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");

muddyAmethystLimpet

@pdebieamzn

// This calendar app will allow users to upload a PDF, extract events from it using OpenAI's GPT model,

0

HTTP

// and display them on a big calendar. We'll use react-big-calendar for the calendar component,

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

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

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

import { Calendar, momentLocalizer } from "https://esm.sh/react-big-calendar";

// Set up the localizer for react-big-calendar

function client() {

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

erties. Use ISO 8601 format for dates. Do not include any explanatory text outside the JSON array. Do not use markdown code f

LampChat

@AppleLamps

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

0

HTTP

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

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

} from "https://esm.sh/react-icons@4.10.1/fa";

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

const Sidebar = ({ pastChats, onSelectChat, isOpen, onClose }) => {

<li key={index} onClick={() => onSelectChat(chat)} className="sidebar-item">

plantIdentifierApp

@mahtabtattur

@jsxImportSource https://esm.sh/react

1 1

0

HTTP

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

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

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

// Client-side rendering function

function client() {

// Execute client-side rendering if in browser environment

client();

// Server-side response handler

theHereTimes

@gio

* This application creates "The Here Times", a map-based news aggregator. * It uses the Google Maps JavaScript API for map rendering, Geonames for location data, * and the NewsAPI for fetching news articles. * The app displays news for the top 12 most populous cities/neighborhoods in the current map view. * * We'll use the following approach: * 1. Use Google Maps JavaScript API for rendering the map * 2. Use Geonames API to get top 12 most populous cities within the map bounds * 3. Fetch news data from NewsAPI based on these locations * 4. Display news articles in a side drawer, only showing articles that contain the city's name in the title * 5. Place markers on the map for each location (exactly 12) * 6. Add a search bar to allow users to search for specific locations * 7. Recenter the map when a location is clicked or searched

0

HTTP

* 4. Display news articles in a side drawer, only showing articles that contain the city's name in the title

import ReactDOM from "https://esm.sh/react-dom@18.2.0";

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

const mapRef = React.useRef(null);

const [map, setMap] = React.useState(null);

const [center, setCenter] = React.useState({ lat: 40.7128, lng: -74.006 });

const [zoom, setZoom] = React.useState(10);

const [news, setNews] = React.useState([]);

const [locations, setLocations] = React.useState([]);

const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);

respectfulMagentaQuelea

@azkasources

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

// Types for structured API response

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

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

e.preventDefault();

</div>

function client() {

createRoot(document.getElementById('root')).render(<ResearchTool />);

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

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

// Server-side research handler

if (request.method === 'POST' && new URL(request.url).pathname === '/research') {

findingsvgfiles

@richi1969

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

// Shared Components

</ol>

<p>Navigating the world of free SVG files requires careful consideration. Always verify the licensing terms of any de

</section>

</div>

function client() {

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

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

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

react_http

@stevekrouse

Client Side React Helper Example Usage /** @jsxImportSource https://esm.sh/react */ import { useState } from "https://esm.sh/react@18.2.0"; import react_http from "https://esm.town/v/stevekrouse/react_http?v=6"; export function App() { const [count, setCount] = useState(0); return ( <div> <h1>Example App</h1> <button onClick={() => setCount(count + 1)} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" > {count} </button> </div> ); } export default () => react_http({ component: App, sourceURL: import.meta.url, head: `<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <title>Example App</title>`, }); Gotchas Only use https imports The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.

2 2 24

3

Script

# Client Side React Helper

## Example Usage

```tsx

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

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

import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";

export function App() {

export default () =>

react_http({

component: App,

#### Only use https imports

The val with your React component will be imported in the browser. Thus, only use `https` imports in this val and any that it

import { ${component.name} } from "${sourceURL}";

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

import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";

createRoot(document.body).render(jsx(${component.name}, {}));

parallaxWordsVal

@ashryanio

@jsxImportSource https://esm.sh/react

0

HTTP

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

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

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

function ParallaxWords() {

y: getRandomY(activeWords.map(w => w.y)),

x: 100, // Start from the right side

speed: 0 // Will be calculated based on brightness

</div>

function client() {

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

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

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

ssr_react_mini_starter

@stevekrouse

Starter App for ssr_react_mini You need to export four things: loader - runs on any GET request, on the server. it accepts the Request and returns the props of your React compnent. action - runs on the server on any non-GET, ie POST, PUT, DELETE, or <form> s submit Component - your React component. it's initially server-rendered and then client-hydrated default - you should mostly leave this line alone This is framework is bleeding-edge. You'll need to read the code of the framework itself (it's very short) to understand what it's doing. If you have questions or comments, please comment below on this val! (or any of these vals)

2

HTTP

# Starter App for [ssr_react_mini](https://www.val.town/v/stevekrouse/ssr_react_mini)

1. `loader` - runs on any GET request, on the server. it accepts the `Request` and returns the props of your React compnent.

3. `Component` - your React component. it's initially server-rendered and then client-hydrated

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

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

import { Button, Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini";

// ensure any server-side imports only run server side

`CREATE TABLE IF NOT EXISTS ssr_react_mini_startesr_clicks (

`select count(*) from ssr_react_mini_starter_clicks`,

await sqlite.execute(`INSERT INTO ssr_react_mini_starter_clicks DEFAULT VALUES`);

const addClick = () => setClicks(clicks + 1); // optimistic, client-side

<title>SSR React Starter</title>

legendaryVioletBovid

@stevekrouse

This is an AI code assistant powered by Cerebras , running llama3.3-70b. Setup Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY

0

HTTP

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

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

import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";

import { tomorrow } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism";

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

async function handleSubmit(e: React.FormEvent) {

function client() {

client();

// Dynamic import for SQLite to avoid client-side import

const client = new Cerebras();

KidsCodingDameDinoAdventure

@jbwinters

* This val implements a Dino Code Adventure game using React. * It uses client-side React for the game logic and UI, and * includes a server-side endpoint for storing high scores.

0

HTTP

* This val implements a Dino Code Adventure game using React.

* It uses client-side React for the game logic and UI, and

* includes a server-side endpoint for storing high scores.

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

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

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

const GRID_SIZE = 5;

</div>

function client() {

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

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

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