From 2a1771b765a2cd25f65202e7dd0f3c0b6a655212 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Thu, 17 Jul 2025 12:38:26 -0700
Subject: [PATCH] Update react page
---
react-components.mdx | 106 ++++++++++++++++++++++++++++---------------
1 file changed, 70 insertions(+), 36 deletions(-)
diff --git a/react-components.mdx b/react-components.mdx
index 336f0c501..4145ef7ea 100644
--- a/react-components.mdx
+++ b/react-components.mdx
@@ -4,69 +4,101 @@ description: "Build interactive and reusable elements with React components"
icon: "react"
---
-import { Counter } from "/snippets/counter.mdx";
import { ColorGenerator } from "/snippets/color-generator.jsx";
[React components](https://react.dev) are a powerful way to create interactive and reusable elements in your documentation.
-You can use React components directly in your `MDX` files without any additional setup.
-
## Using React components
-You can build components directly in your MDX files using [React hooks](https://react.dev/reference/react/hooks).
+You can build React components directly in your `MDX` files using [React hooks](https://react.dev/reference/react/hooks).
-### Basic example
+### Example
-Here is a basic example of a counter component:
+This example declares a `Counter` component and then uses it with ``.
```mdx
export const Counter = () => {
- const [count, setCount] = useState(0);
-
+ const [count, setCount] = useState(0)
+
+ const increment = () => setCount(count + 1)
+ const decrement = () => setCount(count - 1)
+
return (
-
-
Current count: {count}
-
+
+
+
+
+
+ {count}
+
+
+
+
- );
+ )
}
-```
-The `Counter` component can be used in your `MDX` files like this:
-
-```mdx
```
-The counter renders as an interactive React component.
+export const Counter = () => {
+ const [count, setCount] = useState(0)
-
+ const increment = () => setCount(count + 1)
+ const decrement = () => setCount(count - 1)
-## Importing components
+ return (
+
+
+
+
+
+ {count}
+
-Just like in regular React, you can import components from other files.
+
+
+
+ )
+}
-```mdx
-import { ColorGenerator } from "/snippets/color-generator.jsx"
-```
+The counter renders as an interactive React component.
-
- Unlike regular React, you can't import components from every `MDX` file. Reusable components can only be referenced from `MDX` files within the `snippets` folder.
-
+
-After importing the component, use it in your `MDX` files like this:
+## Importing components
-```mdx
-
-```
+You can import components from your `snippets` folder. Unlike regular React, you cannot import components from every `MDX` file. Reusable components must be referenced from files within the `snippets` folder. Learn more about [reusable snippets](/reusable-snippets).
-Learn more about [reusable snippets](/reusable-snippets).
+### Example
-### Complex example
+This example declares a `ColorGenerator` component that uses multiple React hooks and then uses it in an `MDX` file.
-You can build much more complex components. Here is an example of a color generator component that uses multiple React hooks:
+Create `color-generator.jsx` file in the `snippets` folder:
```mdx /snippets/color-generator.jsx [expandable]
export const ColorGenerator = () => {
@@ -181,9 +213,11 @@ export const ColorGenerator = () => {
}
```
-The `ColorGenerator` component can be used in your `MDX` files like this:
+Import the `ColorGenerator` component and use it in an `MDX` file:
```mdx
+import { ColorGenerator } from "/snippets/color-generator.jsx"
+
```