Add context doc

Author: ryyppy

pages/docs/react/latest/context.mdx

@@ -0,0 +1,208 @@
+---
+title: Context
+description: "Details about Context in ReScript and React"
+canonical: "/docs/react/latest/context"
+category: "Main Concepts"
+---
+
+# Context
+
+<Intro>
+
+Context provides a way to pass data through the component tree without having to pass props down manually at every level.
+
+</Intro>
+
+## Why Context?
+
+In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
+
+**Note:** In ReScript, passing down props is way simpler than in TS / JS due to its [JSX prop punning](/docs/manual/latest/jsx#punning) feature and strong type inference, so it's often preferrable to keep it simple and just do props passing. Less magic means more transparency!
+
+
+## When to Use Context
+
+Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the Button component:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+// src/App.res
+type theme = Light | Dark;
+
+module Button = {
+  @react.component
+  let make = (~theme) => {
+    let className = switch theme {
+      | Light => "theme-light"
+      | Dark => "theme-black"
+    };
+    <button className> {React.string("Click me")} </button>
+  }
+}
+
+module ThemedButton = {
+  @react.component
+  let make = (~theme) => {
+    <Button theme />
+  }
+}
+
+module Toolbar = {
+  @react.component
+  let make = (~theme) => {
+    <div>
+      <ThemedButton theme/>
+    </div>
+  }
+}
+
+@react.component
+let make = () => {
+  // We define the theme in the
+  // toplevel App component and
+  // pass it down
+  <Toolbar theme=Dark/>
+}
+```
+
+```js
+function Button(Props) {
+  var theme = Props.theme;
+  var className = theme ? "theme-black" : "theme-light";
+  return React.createElement("button", {
+              className: className
+            }, "Click me");
+}
+
+function ThemedButton(Props) {
+  var theme = Props.theme;
+  return React.createElement(Button, {
+              theme: theme
+            });
+}
+
+function Toolbar(Props) {
+  var theme = Props.theme;
+  return React.createElement("div", undefined, React.createElement(ThemedButton, {
+                  theme: theme
+                }));
+}
+
+function Playground(Props) {
+  return React.createElement(Toolbar, {
+              theme: /* Dark */1
+            });
+}
+```
+</CodeTab>
+
+Using context, we can avoid passing props through intermediate elements:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+// src/App.res
+
+module ThemeContext = {
+  type theme = Light | Dark;
+  let context = React.createContext(Light)
+
+  module Provider = {
+    let provider = React.Context.provider(context)
+
+    @react.component
+    let make = (~value, ~children) => {
+      React.createElement(provider, {"value": value, "children": children})
+    }
+  }
+}
+
+module Button = {
+  @react.component
+  let make = (~theme) => {
+    let className = switch theme {
+      | ThemeContext.Light => "theme-light"
+      | Dark => "theme-black"
+    };
+    <button className> {React.string("Click me")} </button>
+  }
+}
+
+module ThemedButton = {
+  @react.component
+  let make = () => {
+    let theme = React.useContext(ThemeContext.context)
+
+    <Button theme/>
+  }
+}
+
+module Toolbar = {
+  @react.component
+  let make = () => {
+    <div> <ThemedButton /> </div>
+  }
+}
+
+@react.component
+let make = () => {
+  <ThemeContext.Provider value=ThemeContext.Dark>
+    <div> <Toolbar /> </div>
+  </ThemeContext.Provider>
+}
+```
+```js
+var context = React.createContext(/* Light */0);
+
+var provider = context.Provider;
+
+function ThemeContext$Provider(Props) {
+  var value = Props.value;
+  var children = Props.children;
+  return React.createElement(provider, {
+              value: value,
+              children: children
+            });
+}
+
+function Button(Props) {
+  var theme = Props.theme;
+  var className = theme ? "theme-black" : "theme-light";
+  return React.createElement("button", {
+              className: className
+            }, "Click me");
+}
+
+var Button = {
+  make: Button
+};
+
+function ThemedButton(Props) {
+  var theme = React.useContext(context);
+  return React.createElement(Button, {
+              theme: theme
+            });
+}
+
+var ThemedButton = {
+  make: ThemedButton
+};
+
+function Toolbar(Props) {
+  return React.createElement("div", undefined, React.createElement(ThemedButton, {}));
+}
+
+var Toolbar = {
+  make: Toolbar
+};
+
+function Playground(Props) {
+  return React.createElement(ThemeContext$Provider, {
+              value: /* Dark */1,
+              children: React.createElement("div", undefined, React.createElement(Toolbar, {}))
+            });
+}
+```
+
+</CodeTab>