diff --git a/README.md b/README.md index 48198da0..18722f6c 100644 --- a/README.md +++ b/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 diff --git a/content/4-component-composition/5-context/qwik/App.tsx b/content/4-component-composition/5-context/qwik/App.tsx new file mode 100644 index 00000000..00e295bf --- /dev/null +++ b/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: "unicorn42@example.com", + }); + + const updateUsername = $((newUsername) => { + user.username = newUsername; + }); + + useContextProvider(UserContext, { user, updateUsername }); + + return ( + <> +
Username: {user.username}
+Email: {user.email}
+ +