- Edit src/App.js and save to reload.
-
+ {tokens.map((line, i) => (
+
+ {line.map((token, key) => (
+
+ ))}
+
+ ))}
+
+ )}
+ {children};
+};
diff --git a/website/src/components/integrations-demo.js b/website/src/components/integrations-demo.js
new file mode 100644
index 0000000000..850c7c157f
--- /dev/null
+++ b/website/src/components/integrations-demo.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useAtom } from 'jotai';
+import { atomWithImmer } from 'jotai/immer';
+
+import { countAtom } from '~atoms';
+import { Button, Code } from '~components';
+
+export const IntegrationsDemo = () => {
+ const [count, setCount] = useAtom(countAtom);
+
+ const increment = () => setCount((c) => (c = c + 1));
+
+ const code = `import { useAtom } from 'jotai'
+import { atomWithImmer } from 'jotai/immer'
+
+// Create a new atom with an immer-based write function
+const countAtom = atomWithImmer(0)
+
+const Counter = () => {
+ const [count] = useAtom(countAtom)
+ return