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 ( + <> +

Welcome back, {user.username}

+ + + ); +}); + +export default App; diff --git a/content/4-component-composition/5-context/qwik/UserProfile.tsx b/content/4-component-composition/5-context/qwik/UserProfile.tsx new file mode 100644 index 00000000..15830c00 --- /dev/null +++ b/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 ( +
+

My Profile

+

Username: {user.username}

+

Email: {user.email}

+ +
+ ); +}); + +export default UserProfile;