Add Component composition > Context for Qwik (matschik#155)

README.md

@@ -179,12 +179,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox

content/4-component-composition/5-context/qwik/App.tsx

@@ -0,0 +1,33 @@
+import {
+  component$,
+  useStore,
+  useContextProvider,
+  createContext,
+  $,
+} from "@builder.io/qwik";
+import UserProfile from "./UserProfile";
+
+export const UserContext = createContext("user-context");
+
+const App = component$(() => {
+  const user = useStore({
+    id: 1,
+    username: "unicorn42",
+    email: "[email protected]",
+  });
+
+  const updateUsername = $((newUsername) => {
+    user.username = newUsername;
+  });
+
+  useContextProvider(UserContext, { user, updateUsername });
+
+  return (
+    <>
+      <h1>Welcome back, {user.username}</h1>
+      <UserProfile />
+    </>
+  );
+});
+
+export default App;

content/4-component-composition/5-context/qwik/UserProfile.tsx

@@ -0,0 +1,19 @@
+import { component$, useContext } from "@builder.io/qwik";
+import { UserContext } from "./App";
+
+const UserProfile = component$(() => {
+  const { user, updateUsername } = useContext(UserContext);
+
+  return (
+    <div>
+      <h2>My Profile</h2>
+      <p>Username: {user.username}</p>
+      <p>Email: {user.email}</p>
+      <button onClick$={() => updateUsername("Jane")}>
+        Update username to Jane
+      </button>
+    </div>
+  );
+});
+
+export default UserProfile;