Add example sharing local state between components

examples/local-state-sharing/libs/store.js

@@ -0,0 +1,3 @@
+const initialStore = { name: "john" };
+
+export default initialStore;

examples/local-state-sharing/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "local-state-sharing",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "next": "9.1.1",
+    "swr": "link:../.."
+  },
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  }
+}

examples/local-state-sharing/pages/index.js

@@ -0,0 +1,52 @@
+import { useState } from "react"
+import initialStore from "../libs/store"
+import useSWR, { mutate } from "swr"
+
+function Profile() {
+  const { data } = useSWR("globalState", () => Promise.resolve(initialStore))
+  const [value, updateValue] = useState((data || {}).name)
+  if (!data) {
+    return null
+  }
+  return (
+    <div>
+      <h1>My name is {data.name}.</h1>
+      <input
+        value={value}
+        onChange={e => updateValue(e.target.value)}
+        style={{ width: 200, marginRight: 8 }}
+      />
+      <button
+        type="button"
+        onClick={() => {
+          mutate("globalState", { ...data, name: value })
+        }}
+      >
+        Uppercase my name!
+      </button>
+    </div>
+  )
+}
+
+function Other() {
+  const { data } = useSWR("globalState", () => Promise.resolve(initialStore))
+  if (!data) {
+    return null
+  }
+  return (
+    <div style={{ border: "1px solid #ddd", marginTop: 30, padding: 20 }}>
+      <h1>
+        Another Component: <br />
+        My name is {data.name}.
+      </h1>
+    </div>
+  )
+}
+
+export default () => (
+  <div style={{ padding: 40 }}>
+    useSWR can share state between components:
+    <Profile />
+    <Other />
+  </div>
+)