1# getBlobAndRenderAsImage
2
3Shows how to get a Val Town blob and render it as an image in the DOM with React.
4
5## Setup
141. Fetching the blob:
15
16 - The client-side React component makes a fetch request to "/image".
17 - This request is handled by our server function.
18
405. Client-side handling:
41
42 - The fetch request in the React component receives the Response.
43 - We call `response.blob()` to get a Blob object from the Response.
44
51
52
537. Updating the React state:
54
55 - We set the data URL as the state of our component.
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { Light as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
5import json from "https://esm.sh/react-syntax-highlighter/dist/esm/languages/hljs/json";
6import { docco } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/hljs";
7
8SyntaxHighlighter.registerLanguage('json', json);
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
52 {embedCode && (
53 <div className="result">
54 <h2>Embed Code (Copy and paste this into your React component):</h2>
55 <textarea readOnly value={embedCode} />
56 <p>Current Visitor Count: {visitorCount}</p>
90 const encodedUrl = encodeURIComponent(websiteUrl);
91 const embedCode = `
92import { useState, useEffect } from 'react';
93
94function VisitorCounter() {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import confetti from "https://esm.sh/canvas-confetti@1.6.0";
5
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { Light as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
5import json from "https://esm.sh/react-syntax-highlighter/dist/esm/languages/hljs/json";
6import { docco } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/hljs";
7
8SyntaxHighlighter.registerLanguage('json', json);
1import { createElement as h, useReducer } from "https://esm.sh/react";
2import { createRoot } from "https://esm.sh/react-dom/client";
3
4let shapes = [
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
10 useEffect(() => {
11 // Load the Spline component dynamically
12 import("https://esm.sh/@splinetool/react-spline@2.2.6")
13 .then((module) => {
14 setSplineComponent(() => module.default);
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5// Define our word-picture pairs
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5// Utility function to generate a unique 16-character ID
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
