From 536f7b809684d2926d5fc55cd52b1a16e8be2035 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tammerg=C3=A5rd?= <filip@tammergard.se>
Date: Wed, 31 May 2023 08:36:15 +0200
Subject: [PATCH 1/3] Add ReactNode type docs

---
 docs/react-types/ReactNode.md | 49 +++++++++++++++++++++++++++++++++++
 docs/react-types/index.md     |  1 +
 2 files changed, 50 insertions(+)
 create mode 100644 docs/react-types/ReactNode.md

diff --git a/docs/react-types/ReactNode.md b/docs/react-types/ReactNode.md
new file mode 100644
index 00000000..d44e7c8b
--- /dev/null
+++ b/docs/react-types/ReactNode.md
@@ -0,0 +1,49 @@
+---
+title: ReactNode
+---
+
+`ReactNode` is a type that describes what React can render.
+
+## Parameters
+
+`ReactNode` does not take any parameters.
+
+## Usage
+
+### Typing `children`
+
+The most common use case for `ReactNode` is typing `children`.
+
+```tsx
+interface Props {
+  children?: ReactNode;
+}
+
+function Component({ children }: Props) {
+  return <>{children}</>;
+}
+```
+
+`<Component>` accepts anything that React can render as `children`. Here are some examples:
+
+```tsx
+function Examples() {
+  return (
+    <>
+      <Component>
+        <div>Hello</div>
+      </Component>
+      <Component>Hello</Component>
+      <Component>{123}</Component>
+      <Component>
+        <>Hello</>
+      </Component>
+      <Component>{createPortal(<>Hello</>, document.body)}</Component>
+      <Component>{true}</Component>
+      <Component>{null}</Component>
+      <Component>{undefined}</Component>
+      <Component>{[1, 2, 3]}</Component>
+    </>
+  );
+}
+```
diff --git a/docs/react-types/index.md b/docs/react-types/index.md
index 12171892..55e76cae 100644
--- a/docs/react-types/index.md
+++ b/docs/react-types/index.md
@@ -5,3 +5,4 @@ title: React Types
 `@types/react` makes some types available that can be very useful. Here's a list in alphabetical order with links to the detailed reference pages.
 
 - [`ComponentProps<ElementType>`](/docs/react-types/ComponentProps)
+- [`ReactNode`](/docs/react-types/ReactNode)

From 454af1b5ae3afcf2fc22d3d1df09bc3f548cb209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tammerg=C3=A5rd?= <filip@tammergard.se>
Date: Wed, 31 May 2023 08:57:36 +0200
Subject: [PATCH 2/3] Remove createPortal example

---
 docs/react-types/ReactNode.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/react-types/ReactNode.md b/docs/react-types/ReactNode.md
index d44e7c8b..46a25dba 100644
--- a/docs/react-types/ReactNode.md
+++ b/docs/react-types/ReactNode.md
@@ -38,7 +38,6 @@ function Examples() {
       <Component>
         <>Hello</>
       </Component>
-      <Component>{createPortal(<>Hello</>, document.body)}</Component>
       <Component>{true}</Component>
       <Component>{null}</Component>
       <Component>{undefined}</Component>

From 5bad5fc88e7c9b0cd96f5bb4342495e1ad20f633 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tammerg=C3=A5rd?= <filip@tammergard.se>
Date: Fri, 2 Jun 2023 17:09:32 +0200
Subject: [PATCH 3/3] Use new syntax for returning ReactNode directly

---
 docs/react-types/ReactNode.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/react-types/ReactNode.md b/docs/react-types/ReactNode.md
index 46a25dba..fe8954f9 100644
--- a/docs/react-types/ReactNode.md
+++ b/docs/react-types/ReactNode.md
@@ -15,12 +15,14 @@ title: ReactNode
 The most common use case for `ReactNode` is typing `children`.
 
 ```tsx
+import { ReactNode } from "react";
+
 interface Props {
   children?: ReactNode;
 }
 
 function Component({ children }: Props) {
-  return <>{children}</>;
+  return children;
 }
 ```