Skip to content

Commit e89f404

Browse files
jaslongjaslong
committed
Context issues
1 parent 225d29b commit e89f404

File tree

8 files changed

+2086
-953
lines changed

8 files changed

+2086
-953
lines changed

‎package-lock.json

-498
This file was deleted.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
"dependencies": {
1212
"react": "^18",
1313
"react-dom": "^18",
14-
"next": "14.2.5"
14+
"next": "14.2.5",
15+
"react-aria-components": "1.3.1"
1516
},
1617
"devDependencies": {
1718
"typescript": "^5",

‎pnpm-lock.yaml

+2,021
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/pages/_app.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
import "@/styles/globals.css";
21
import type { AppProps } from "next/app";
2+
import dynamic from "next/dynamic";
33

4-
export default function App({ Component, pageProps }: AppProps) {
4+
const App = ({Component, pageProps}: AppProps) => {
55
return <Component {...pageProps} />;
6-
}
6+
};
7+
8+
export default dynamic(() => Promise.resolve(App), {
9+
ssr: false,
10+
});

‎src/pages/api/hello.ts

-13
This file was deleted.

‎src/pages/index.tsx

+56-102
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,68 @@
11
import Head from "next/head";
2-
import Image from "next/image";
3-
import { Inter } from "next/font/google";
4-
import styles from "@/styles/Home.module.css";
5-
6-
const inter = Inter({ subsets: ["latin"] });
2+
import {
3+
Button,
4+
Label,
5+
ListBox,
6+
ListBoxContext,
7+
ListBoxItem,
8+
ListStateContext,
9+
Popover,
10+
Select,
11+
SelectContext,
12+
SelectValue
13+
} from "react-aria-components";
14+
import React, { useContext } from "react";
715

816
export default function Home() {
917
return (
1018
<>
1119
<Head>
1220
<title>Create Next App</title>
13-
<meta name="description" content="Generated by create next app" />
14-
<meta name="viewport" content="width=device-width, initial-scale=1" />
15-
<link rel="icon" href="/favicon.ico" />
21+
<meta name="description" content="Generated by create next app"/>
22+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
23+
<link rel="icon" href="/favicon.ico"/>
1624
</Head>
17-
<main className={`${styles.main} ${inter.className}`}>
18-
<div className={styles.description}>
19-
<p>
20-
Get started by editing&nbsp;
21-
<code className={styles.code}>src/pages/index.tsx</code>
22-
</p>
23-
<div>
24-
<a
25-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
26-
target="_blank"
27-
rel="noopener noreferrer"
28-
>
29-
By{" "}
30-
<Image
31-
src="/vercel.svg"
32-
alt="Vercel Logo"
33-
className={styles.vercelLogo}
34-
width={100}
35-
height={24}
36-
priority
37-
/>
38-
</a>
39-
</div>
40-
</div>
41-
42-
<div className={styles.center}>
43-
<Image
44-
className={styles.logo}
45-
src="/next.svg"
46-
alt="Next.js Logo"
47-
width={180}
48-
height={37}
49-
priority
50-
/>
51-
</div>
52-
53-
<div className={styles.grid}>
54-
<a
55-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
56-
className={styles.card}
57-
target="_blank"
58-
rel="noopener noreferrer"
59-
>
60-
<h2>
61-
Docs <span>-&gt;</span>
62-
</h2>
63-
<p>
64-
Find in-depth information about Next.js features and&nbsp;API.
65-
</p>
66-
</a>
67-
68-
<a
69-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
70-
className={styles.card}
71-
target="_blank"
72-
rel="noopener noreferrer"
73-
>
74-
<h2>
75-
Learn <span>-&gt;</span>
76-
</h2>
77-
<p>
78-
Learn about Next.js in an interactive course with&nbsp;quizzes!
79-
</p>
80-
</a>
81-
82-
<a
83-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
84-
className={styles.card}
85-
target="_blank"
86-
rel="noopener noreferrer"
87-
>
88-
<h2>
89-
Templates <span>-&gt;</span>
90-
</h2>
91-
<p>
92-
Discover and deploy boilerplate example Next.js&nbsp;projects.
93-
</p>
94-
</a>
95-
96-
<a
97-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
98-
className={styles.card}
99-
target="_blank"
100-
rel="noopener noreferrer"
101-
>
102-
<h2>
103-
Deploy <span>-&gt;</span>
104-
</h2>
105-
<p>
106-
Instantly deploy your Next.js site to a shareable URL
107-
with&nbsp;Vercel.
108-
</p>
109-
</a>
110-
</div>
25+
<main>
26+
<ListBox aria-label="Favorite animal" selectionMode="single">
27+
<ListBoxChild>Aardvark</ListBoxChild>
28+
<ListBoxChild>Cat</ListBoxChild>
29+
<ListBoxChild>Dog</ListBoxChild>
30+
<ListBoxChild>Kangaroo</ListBoxChild>
31+
<ListBoxChild>Panda</ListBoxChild>
32+
<ListBoxChild>Snake</ListBoxChild>
33+
</ListBox>
34+
<Select>
35+
<SelectChild>Favorite Animal</SelectChild>
36+
<Button>
37+
<SelectValue/>
38+
<span aria-hidden="true">▼</span>
39+
</Button>
40+
<Popover>
41+
<ListBox>
42+
<ListBoxChild>Aardvark</ListBoxChild>
43+
<ListBoxChild>Cat</ListBoxChild>
44+
<ListBoxChild>Dog</ListBoxChild>
45+
<ListBoxChild>Kangaroo</ListBoxChild>
46+
<ListBoxChild>Panda</ListBoxChild>
47+
<ListBoxChild>Snake</ListBoxChild>
48+
</ListBox>
49+
</Popover>
50+
</Select>
11151
</main>
11252
</>
11353
);
11454
}
55+
56+
function ListBoxChild(props: { children: string }) {
57+
const propsContext = useContext(ListBoxContext);
58+
const stateContext = useContext(ListStateContext);
59+
console.log("ListBoxContext", propsContext); // null, not set by ListBox?
60+
console.log("ListStateContext", stateContext); // null, not set by ListBox?
61+
return <ListBoxItem>{props.children}</ListBoxItem>
62+
}
63+
64+
function SelectChild(props: { children: string }) {
65+
const propsContext = useContext(SelectContext);
66+
console.log("SelectContext", propsContext); // not null, set by Select
67+
return <Label>{props.children}</Label>
68+
}

0 commit comments

Comments
 (0)