Readme

Client Side React Helper

Example Usage

Create val/** @jsxImportSource https://esm.sh/react */ import react_http from "https://esm.town/v/stevekrouse/react_http?v=6"; import { useState } from "https://esm.sh/react@18.2.0"; export function App() { const [ count, setCount ] = useState(0) return ( <div> <h1>Example App</h1> </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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export default function({ component, sourceURL, head }: { component: Function; sourceURL: string; head?: string }) {
return new Response(
`<html>
<head>${head || ""}</head>
<body></body>
<script type="module">
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}, {}));
</script>
</html>`,
{
headers: {
"content-type": "text/html",
},
},
);
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.