diff --git a/beta/public/images/docs/diagrams/passing_data_context_close.dark.svg b/beta/public/images/docs/diagrams/passing_data_context_close.dark.svg new file mode 100644 index 00000000..78432ad2 --- /dev/null +++ b/beta/public/images/docs/diagrams/passing_data_context_close.dark.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/passing_data_context_close.svg b/beta/public/images/docs/diagrams/passing_data_context_close.svg new file mode 100644 index 00000000..c9af9b5b --- /dev/null +++ b/beta/public/images/docs/diagrams/passing_data_context_close.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/passing_data_context_far.dark.svg b/beta/public/images/docs/diagrams/passing_data_context_far.dark.svg new file mode 100644 index 00000000..205d4574 --- /dev/null +++ b/beta/public/images/docs/diagrams/passing_data_context_far.dark.svg @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/passing_data_context_far.svg b/beta/public/images/docs/diagrams/passing_data_context_far.svg new file mode 100644 index 00000000..cd5af384 --- /dev/null +++ b/beta/public/images/docs/diagrams/passing_data_context_far.svg @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.svg b/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.svg new file mode 100644 index 00000000..7b8a1701 --- /dev/null +++ b/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/passing_data_lifting_state.svg b/beta/public/images/docs/diagrams/passing_data_lifting_state.svg new file mode 100644 index 00000000..b424b42d --- /dev/null +++ b/beta/public/images/docs/diagrams/passing_data_lifting_state.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.svg b/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.svg new file mode 100644 index 00000000..86958f25 --- /dev/null +++ b/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.svg @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/passing_data_prop_drilling.svg b/beta/public/images/docs/diagrams/passing_data_prop_drilling.svg new file mode 100644 index 00000000..1aedf7c8 --- /dev/null +++ b/beta/public/images/docs/diagrams/passing_data_prop_drilling.svg @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/src/components/MDX/Diagram.tsx b/beta/src/components/MDX/Diagram.tsx index e9c2c8ac..ead42694 100644 --- a/beta/src/components/MDX/Diagram.tsx +++ b/beta/src/components/MDX/Diagram.tsx @@ -11,11 +11,28 @@ interface DiagramProps { height: number; width: number; children: string; + captionPosition: 'top' | 'bottom' | null; } -export function Diagram({name, alt, height, width, children}: DiagramProps) { +function Caption({text}: {text: string}) { return ( -
+
+ {text} +
+ ); +} + +export function Diagram({ + name, + alt, + height, + width, + children, + captionPosition, +}: DiagramProps) { + return ( +
+ {captionPosition === 'top' && }
-
- {children} -
+ {(!captionPosition || captionPosition === 'bottom') && ( + + )}
); } diff --git a/beta/src/components/MDX/DiagramGroup.tsx b/beta/src/components/MDX/DiagramGroup.tsx index 5328aa77..a156dc21 100644 --- a/beta/src/components/MDX/DiagramGroup.tsx +++ b/beta/src/components/MDX/DiagramGroup.tsx @@ -11,7 +11,7 @@ interface DiagramGroupProps { export function DiagramGroup({children}: DiagramGroupProps) { return ( -
+
{children}
); diff --git a/beta/src/pages/learn/passing-data-deeply-with-context.md b/beta/src/pages/learn/passing-data-deeply-with-context.md index 4d5eafd0..dd77575d 100644 --- a/beta/src/pages/learn/passing-data-deeply-with-context.md +++ b/beta/src/pages/learn/passing-data-deeply-with-context.md @@ -19,9 +19,24 @@ Usually, you will pass information from a parent component to a child component ## The problem with passing props {/*the-problem-with-passing-props*/} -[Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it. But it can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation sometimes called "prop drilling." +[Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it. -Lifting state up vs prop drilling +But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation sometimes called "prop drilling." + + + + + +Lifting state up + + + + +Prop drilling + + + + Wouldn't it be great if there were a way to "teleport" data to the components in the tree that need it without passing props? With React's context feature, there is! @@ -195,7 +210,21 @@ You can't do it with props alone. This is where context comes into play. You wil Context lets a parent--even a distant one!--provide some data to the entire tree inside of it. -Context provides data to the entire tree + + + + +Using context in close children + + + + + +Using context in distant children + + + + ### Step 1: Create the context {/*step-1-create-the-context*/} @@ -829,8 +858,6 @@ Context is not limited to static values. If you pass a different value on the ne In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you. -Context provides data to the entire tree - * Context lets a component provide some information to the entire tree below it.