1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState, useRef } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
13
14 useEffect(() => {
15 import("https://esm.sh/wired-elements@3.0.0-rc.6?deps=react@18.2.0").then(() => {
16 setWiredElements(true);
17 });
26## Technology
27
28- React for the user interface
29- Rough.js for the sketchy, hand-drawn rendering
30- HTML Canvas for the drawing operations
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState, useRef } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
1
2# Wired Components React Playground
3
4An interactive playground for experimenting with the [wired-elements](https://github.com/rough-stuff/wired-elements) library using React. This playground allows you to:
5
6- Browse and preview available wired components
13## Features
14
15- **React-based Interface**: Built using React for a smooth, modern experience
16- **Component Library**: Easy access to common wired-elements components
17- **Interactive Preview**: See how components look and behave in real-time
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { RoughCanvas } from "https://esm.sh/roughjs@4.5.2/bin/canvas?deps=react@18.2.0";
5
6// HandDrawnCard component - combines a real container with canvas drawing
79// Component to store canvas drawing data that will be rendered by the main canvas
80const CanvasDrawingData = ({ type, position, roughness, isHovering }) => {
81 const context = React.useContext(DrawingContext);
82
83 useEffect(() => {
94
95// Context for managing all canvas drawings
96const DrawingContext = React.createContext({
97 drawings: {},
98 addDrawing: () => {},
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { RoughCanvas } from "https://esm.sh/roughjs@4.5.2/bin/canvas?deps=react@18.2.0";
5
6// Context for managing all canvas drawings
7const DrawingContext = React.createContext({
8 drawings: {},
9 addDrawing: () => {},
13// Component to store canvas drawing data that will be rendered by the main canvas
14const CanvasDrawingData = ({ type, position, roughness, isHovering }) => {
15 const context = React.useContext(DrawingContext);
16
17 useEffect(() => {
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import {
3 OrbitControls,
4 OrthographicCamera,
5 useFBO,
6} from "https://esm.sh/@react-three/drei";
7import { Canvas } from "https://esm.sh/@react-three/fiber";
8import { wrapEffect, EffectComposer } from "https://esm.sh/@react-three/postprocessing";
9import { Effect } from "https://esm.sh/postprocessing";
10import { Suspense, useRef, useState, useEffect } from "https://esm.sh/react@18.2.0";
11
12
1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5- **Remix** this starter template on the top right to get started.
7- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
8
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
