Val Town Code Search

MultiImageCompressor main.tsx13 matches

@robbert_h•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5interface CompressedImage {
11
12function ImageCompressor() {
13  const [images, setImages] = React.useState<CompressedImage[]>([]);
14  const [totalCompressed, setTotalCompressed] = React.useState(0);
15  const canvasRef = React.useRef<HTMLCanvasElement>(null);
16
17  // Add useEffect to clean up object URLs
18  React.useEffect(() => {
19    return () => {
20      images.forEach(image => {
26  }, [images]);
27
28  const generatePreview = React.useCallback((file: File): Promise<string> => {
29    return new Promise((resolve, reject) => {
30      // Try multiple methods to generate preview
64  }, []);
65
66  const compressImage = React.useCallback(async (file: File): Promise<File> => {
67    return new Promise((resolve, reject) => {
68      const reader = new FileReader();
140  }, []);
141
142  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
143    const files = event.target.files;
144    if (!files) return;
342        <script src="https://esm.town/v/std/catch"></script>
343        <script type="module">
344          import React from "https://esm.sh/react@18.2.0";
345          import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
346          
347          const App = (await import(import.meta.url)).default;
348          
349          createRoot(document.getElementById("root")).render(
350            React.createElement(App)
351          );
352        </script>

UI main.tsx20 matches

@gokulnpc•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import ReactDOM from "https://esm.sh/react-dom@18.2.0";
4import { LiveProvider, LiveEditor, LiveError, LivePreview } from "https://esm.sh/react-live@4.1.0";
5import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter@15.5.0";
6import { atomDark } from "https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/styles/prism";
7
8// Error Boundary Component
9class ErrorBoundary extends React.Component {
10  constructor(props) {
11    super(props);
40  const [parsedComponent, setParsedComponent] = useState(null);
41
42  const generateComponent = async (e: React.FormEvent) => {
43    e.preventDefault();
44    setIsLoading(true);
62      try {
63        // eslint-disable-next-line no-new-func
64        const ComponentFunc = new Function('React', `return (${code})`)();
65        setParsedComponent(() => ComponentFunc);
66      } catch (parseError) {
94    <div className="max-w-4xl mx-auto p-6 bg-gray-900 min-h-screen">
95      <h1 className="text-3xl font-bold text-white mb-6 text-center">
96        React Component Generator
97      </h1>
98      
103            value={prompt}
104            onChange={(e) => setPrompt(e.target.value)}
105            placeholder="Describe your React component (e.g., 'A todo list with add and delete functionality')"
106            className="flex-grow p-3 rounded-l-lg bg-gray-800 text-white"
107          />
142              {parsedComponent ? (
143                <div className="bg-white p-6 rounded-lg">
144                  {React.createElement(parsedComponent)}
145                </div>
146              ) : (
164  const root = document.getElementById("root");
165  if (root) {
166    ReactDOM.createRoot(root).render(
167      <React.StrictMode>
168        <App />
169      </React.StrictMode>
170    );
171  }
185          {
186            role: "system",
187            content: `You are an expert React component generator. 
188            Generate a complete, functional React component based on the user's description.
189            - Use modern React with functional components and hooks
190            - Include necessary imports (import React from 'react')
191            - Provide a fully working component
192            - Use inline styles or tailwind if styling is needed
229    <html>
230      <head>
231        <title>React Component Generator</title>
232        <script src="https://cdn.tailwindcss.com"></script>
233      </head>

cerebras_coder main.tsx11 matches

@gokulnpc•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0  */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
5import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
6import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts";
7const [uploadedImage, setUploadedImage] = useState<string | null>(null);
8const fileInputRef = React.useRef<HTMLInputElement>(null);
9
10// random 3 prompts from STARTER_PROMPTS
82}: {
83  prompt: string;
84  setPrompt: React.Dispatch<React.SetStateAction<string>>;
85  handleSubmit: (e: React.FormEvent) => void;
86  handleStarterPromptClick: (promptItem: PromptItem) => void;
87}) {
171
172function App() {
173  const previewRef = React.useRef<HTMLDivElement>(null);
174  const [prompt, setPrompt] = useState("");
175  const [projectId, setProjectId] = useState<number | null>(null);
229  }
230
231  async function handleSubmit(e: React.FormEvent | string) {
232    if (typeof e !== "string") {
233      e.preventDefault();
735                </div>
736                <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
737                  <React.Fragment key={iframeKey}>
738                    <iframe
739                      srcDoc={code}
741                      className="w-full grow"
742                    />
743                  </React.Fragment>
744                </div>
745              </div>

cerebrasTemplate main.tsx3 matches

@gokulnpc•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
4import { email } from "https://esm.town/v/std/email";
5

cerebrasTemplate main.tsx3 matches

@keien•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5function App() {

cerebrasTemplate main.tsx3 matches

@cory16457•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5function App() {

stunningChocolateApe main.tsx2 matches

@Dhokane1199•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 **/
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3
4export default (req: Request) => {

hopefulGoldChinchilla main.tsx10 matches

@charmaine•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0  */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
5import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
6import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts";
7
80}: {
81  prompt: string;
82  setPrompt: React.Dispatch<React.SetStateAction<string>>;
83  handleSubmit: (e: React.FormEvent) => void;
84  handleStarterPromptClick: (promptItem: PromptItem) => void;
85}) {
169
170function App() {
171  const previewRef = React.useRef<HTMLDivElement>(null);
172  const [prompt, setPrompt] = useState("");
173  const [projectId, setProjectId] = useState<number | null>(null);
227  }
228
229  async function handleSubmit(e: React.FormEvent | string) {
230    if (typeof e !== "string") {
231      e.preventDefault();
733                </div>
734                <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
735                  <React.Fragment key={iframeKey}>
736                    <iframe
737                      srcDoc={code}
739                      className="w-full grow"
740                    />
741                  </React.Fragment>
742                </div>
743              </div>

cerebras_coder main.tsx10 matches

@harrythedevopsguy•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0  */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
5import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
6import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts";
7
33}: {
34  prompt: string;
35  setPrompt: React.Dispatch<React.SetStateAction<string>>;
36  handleSubmit: (e: React.FormEvent) => void;
37  handleStarterPromptClick: (promptItem: PromptItem) => void;
38}) {
122
123function App() {
124  const previewRef = React.useRef<HTMLDivElement>(null);
125  const [prompt, setPrompt] = useState("");
126  const [projectId, setProjectId] = useState<number | null>(null);
180  }
181
182  async function handleSubmit(e: React.FormEvent | string) {
183    if (typeof e !== "string") {
184      e.preventDefault();
679                </div>
680                <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
681                  <React.Fragment key={iframeKey}>
682                    <iframe
683                      srcDoc={code}
685                      className="w-full grow"
686                    />
687                  </React.Fragment>
688                </div>
689              </div>

gentleMagentaLizard main.tsx2 matches

@Chirag•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 **/
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3
4export default (req: Request) => {

« Previous

1...660 661 662 663 664 665 666...840

Projects

View all 181 projects

vt-discord4 file matches

@boucher•Updated 1 day ago

Starter template with client-side React & Hono server

diceRollerUI1 file match

@dcm31•Updated 1 day ago

A web-based dice roller using React on Val Town

Users

View all 2 users

@effector2 projects

Updated 2 hours ago

Write business logic with ease Meet the new standard for modern TypeScript development. Type-safe, reactive, framework-agnostic library to manage your business logic.

@officialrajdeepsingh1 project

Updated 1 day ago

Documentation

View all 4 documentation results

Val Town Code SearchReturn to Val Town

MultiImageCompressormain.tsx13 matches

UImain.tsx20 matches

cerebras_codermain.tsx11 matches

cerebrasTemplatemain.tsx3 matches

cerebrasTemplatemain.tsx3 matches

cerebrasTemplatemain.tsx3 matches

stunningChocolateApemain.tsx2 matches

hopefulGoldChinchillamain.tsx10 matches

cerebras_codermain.tsx10 matches

gentleMagentaLizardmain.tsx2 matches

Projects

vt-discord4 file matches

diceRollerUI1 file match

Users

@effector2 projects

@officialrajdeepsingh1 project

Documentation

Val Town Code Search Return to Val Town

MultiImageCompressor main.tsx13 matches

UI main.tsx20 matches

cerebras_coder main.tsx11 matches

cerebrasTemplate main.tsx3 matches

cerebrasTemplate main.tsx3 matches

cerebrasTemplate main.tsx3 matches

stunningChocolateApe main.tsx2 matches

hopefulGoldChinchilla main.tsx10 matches

cerebras_coder main.tsx10 matches

gentleMagentaLizard main.tsx2 matches