docs(examples): add react-spring example (remix-run#1417)

Co-authored-by: Michaël De Boey <[email protected]> Co-authored-by: Kent C. Dodds <[email protected]>
warmpigman · Feb 18, 2022 · 2612b4c · 2612b4c
1 parent f8601cd
commit 2612b4c
Show file tree

Hide file tree

Showing 14 changed files with 24,025 additions and 0 deletions.
diff --git a/examples/react-spring/.gitignore b/examples/react-spring/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+/public/build
diff --git a/examples/react-spring/README.md b/examples/react-spring/README.md
@@ -0,0 +1,25 @@
+# React Spring
+
+A simple example demonstrating the integration of `react-spring` with Remix.
+
+## Preview
+
+Open this example on [CodeSandbox](https://codesandbox.com):
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/react-spring)
+
+## Example
+
+This example shows how to animate on mount and animate on different events using `react-spring`.
+
+And when JavaScript is disabled, `unset` the animation styles so that the page is accessible to everyone and is progressively enhanced.
+
+Relevant files:
+
+- [app/root.tsx](./app/root.tsx)
+- [app/routes/index.tsx](./app/routes/index.tsx)
+
+## Related Links
+
+- [remix.run](https://remix.run/)
+- [react-spring](https://react-spring.io/)
diff --git a/examples/react-spring/app/entry.client.tsx b/examples/react-spring/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);
diff --git a/examples/react-spring/app/entry.server.tsx b/examples/react-spring/app/entry.server.tsx
@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}
diff --git a/examples/react-spring/app/no-script.css b/examples/react-spring/app/no-script.css
@@ -0,0 +1,4 @@
+[style*="opacity:0;"] {
+  opacity: unset !important;
+  cursor: default !important;
+}
diff --git a/examples/react-spring/app/root.tsx b/examples/react-spring/app/root.tsx
@@ -0,0 +1,40 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration
+} from "remix";
+import type { LinksFunction, MetaFunction } from "remix";
+
+import styles from "~/styles.css";
+import noScriptStyles from "~/no-script.css";
+
+export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
+
+export const meta: MetaFunction = () => {
+  return { title: "Remix + react-spring" };
+};
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        <noscript>
+          <link rel="stylesheet" href={noScriptStyles} />
+        </noscript>
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/examples/react-spring/app/routes/index.tsx b/examples/react-spring/app/routes/index.tsx
@@ -0,0 +1,36 @@
+import { useSpring, animated, config } from "react-spring";
+
+export default function () {
+  const [{ x }, interpolate] = useSpring(() => ({
+    from: { x: 0 },
+    config: config.wobbly
+  }));
+
+  const { opacity } = useSpring({
+    from: { opacity: 0 },
+    opacity: 1,
+    config: config.slow,
+    delay: 200
+  });
+
+  return (
+    <animated.h1
+      onMouseEnter={() => {
+        interpolate({ x: 1 });
+      }}
+      onMouseLeave={() => {
+        interpolate({ x: 0 });
+      }}
+      style={{
+        width: "min-content",
+        margin: "0 auto",
+        cursor: "pointer",
+        opacity,
+        color: x.to({ range: [0, 1], output: ["#000", "#f00"] }),
+        scale: x.to({ range: [0, 1], output: [1, 1.5] })
+      }}
+    >
+      Remix
+    </animated.h1>
+  );
+}
diff --git a/examples/react-spring/app/styles.css b/examples/react-spring/app/styles.css
@@ -0,0 +1,10 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  display: grid;
+  place-content: center;
+}