Val Town Code SearchReturn to Val Town

API Access

You can access search results via JSON API by adding format=json to your query:

https://codesearch.val.run/?q=react&page=711&format=json

For typeahead suggestions, use the /typeahead endpoint:

https://codesearch.val.run/typeahead?q=react

Returns an array of strings in format "username" or "username/projectName"

Found 8597 results for "react"(990ms)

cerebras_codermain.tsx10 matches

@ztruefear•Updated 4 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";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
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
31}: {
32 prompt: string;
33 setPrompt: React.Dispatch<React.SetStateAction<string>>;
34 handleSubmit: (e: React.FormEvent) => void;
35 handleStarterPromptClick: (promptItem: PromptItem) => void;
36}) {
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
121 const [projectId, setProjectId] = useState<number | null>(null);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
674 </div>
675 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
676 <React.Fragment key={iframeKey}>
677 <iframe
678 srcDoc={code}
680 className="w-full grow"
681 />
682 </React.Fragment>
683 </div>
684 </div>

cerebras_codermain.tsx10 matches

@bvc100x•Updated 4 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";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
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
31}: {
32 prompt: string;
33 setPrompt: React.Dispatch<React.SetStateAction<string>>;
34 handleSubmit: (e: React.FormEvent) => void;
35 handleStarterPromptClick: (promptItem: PromptItem) => void;
36}) {
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
121 const [projectId, setProjectId] = useState<number | null>(null);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
674 </div>
675 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
676 <React.Fragment key={iframeKey}>
677 <iframe
678 srcDoc={code}
680 className="w-full grow"
681 />
682 </React.Fragment>
683 </div>
684 </div>

cerebras_codermain.tsx10 matches

@evincere•Updated 4 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";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
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
31}: {
32 prompt: string;
33 setPrompt: React.Dispatch<React.SetStateAction<string>>;
34 handleSubmit: (e: React.FormEvent) => void;
35 handleStarterPromptClick: (promptItem: PromptItem) => void;
36}) {
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
121 const [projectId, setProjectId] = useState<number | null>(null);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
674 </div>
675 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
676 <React.Fragment key={iframeKey}>
677 <iframe
678 srcDoc={code}
680 className="w-full grow"
681 />
682 </React.Fragment>
683 </div>
684 </div>

cerebras_codermain.tsx10 matches

@piebru•Updated 4 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";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
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
31}: {
32 prompt: string;
33 setPrompt: React.Dispatch<React.SetStateAction<string>>;
34 handleSubmit: (e: React.FormEvent) => void;
35 handleStarterPromptClick: (promptItem: PromptItem) => void;
36}) {
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
121 const [projectId, setProjectId] = useState<number | null>(null);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
674 </div>
675 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
676 <React.Fragment key={iframeKey}>
677 <iframe
678 srcDoc={code}
680 className="w-full grow"
681 />
682 </React.Fragment>
683 </div>
684 </div>

cerebras_codermain.tsx10 matches

@dedicatedstudent•Updated 4 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";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
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
31}: {
32 prompt: string;
33 setPrompt: React.Dispatch<React.SetStateAction<string>>;
34 handleSubmit: (e: React.FormEvent) => void;
35 handleStarterPromptClick: (promptItem: PromptItem) => void;
36}) {
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
121 const [projectId, setProjectId] = useState<number | null>(null);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
674 </div>
675 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
676 <React.Fragment key={iframeKey}>
677 <iframe
678 srcDoc={code}
680 className="w-full grow"
681 />
682 </React.Fragment>
683 </div>
684 </div>

reactExamplemain.tsx3 matches

@officialrajdeepsingh•Updated 4 months ago
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "npm:react-dom@18.2.0/server";
3
4export const reactExample = (request: Request) =>
5 new Response(
6 renderToString(

blob_adminREADME.md1 match

@kamenxrider•Updated 4 months ago
6
7Versions 0-17 of this val were done with Hono and server-rendering.
8Versions 18+ were generated with Townie and use client-side React.
9
10To use this val, fork it to your account.

blob_adminmain.tsx5 matches

@kamenxrider•Updated 4 months ago
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono";
3import { debounce } from "https://esm.sh/lodash-es";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
5import { useDropzone } from "https://esm.sh/react-dropzone?deps=react@18.2.0,react-dom@18.2.0";
6import React, { ReactNode, useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
7import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe";
8import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton";
9
10interface TooltipProps {
11 children: ReactNode;
12 content: string;
13}

cerebras_codermain.tsx10 matches

@dno_luigi•Updated 4 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";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
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
31}: {
32 prompt: string;
33 setPrompt: React.Dispatch<React.SetStateAction<string>>;
34 handleSubmit: (e: React.FormEvent) => void;
35 handleStarterPromptClick: (promptItem: PromptItem) => void;
36}) {
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
121 const [projectId, setProjectId] = useState<number | null>(null);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
674 </div>
675 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
676 <React.Fragment key={iframeKey}>
677 <iframe
678 srcDoc={code}
680 className="w-full grow"
681 />
682 </React.Fragment>
683 </div>
684 </div>

notUberMapComponentmain.tsx3 matches

@vawogbemi•Updated 4 months ago
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server?deps=react@18.2.0,react-dom@18.2.0";
3import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5const GOOGLE_MAPS_API_KEY = "AIzaSyAOtUMb5jLTjTVM7iKzIx2SJ3HgMKNcM7U";

vt-discord4 file matches

@boucher•Updated 2 days ago
Starter template with client-side React & Hono server

diceRollerUI1 file match

@dcm31•Updated 2 days ago
A web-based dice roller using React on Val Town
effector
Write business logic with ease Meet the new standard for modern TypeScript development. Type-safe, reactive, framework-agnostic library to manage your business logic.
officialrajdeepsingh
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh