react_context_api_auto_heading_level_management.ts

1import { createContext, useContext, ReactNode } from 'react';
2
3// 1. Create the Context
4// We provide a default value of 1
5const LevelContext = createContext<number>(1);
6
7interface SectionProps {
8  children: ReactNode;
9}
10
11// 2. Provide the context
12export function Section({ children }: SectionProps) {
13  const level = useContext(LevelContext);
14  return (
15    <section className="section">
16      <LevelContext.Provider value={level + 1}>
17        {children}
18      </LevelContext.Provider>
19    </section>
20  );
21}
22
23// 3. Use the context
24export function Heading({ children }: { children: ReactNode }) {
25  const level = useContext(LevelContext);
26  switch (level) {
27    case 1:
28      return <h1>{children}</h1>;
29    case 2:
30      return <h2>{children}</h2>;
31    case 3:
32      return <h3>{children}</h3>;
33    case 4:
34      return 4: <h4>{children}</h4>;
35    case 5:
36      return <h5>{children}</h5>;
37    case 6:
38      return <h6>{children}</h6>;
39    default:
40      throw Error('Unknown level: ' + level);
41  }
42}
43
44// Usage Example
45export default function Page() {
46  return (
47    <Section>
48      <Heading>Title</Heading>
49      <Section>
50        <Heading>Sub-heading</Heading>
51        <Section>
52          <Heading>Sub-sub-heading</Heading>
53        </Section>
54      </Section>
55    </Section>
56  );
57}