Skip to content

Update react page #924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 17, 2025
Merged

Update react page #924

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 70 additions & 36 deletions react-components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,69 +4,101 @@
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 `<Counter />`.

```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 (
<div>
<p>Current count: {count}</p>
<button onClick={() => setCount(count + 1)}>
+
</button>
<div className="flex items-center justify-center">
<div className="flex items-center rounded-xl overflow-hidden border border-zinc-950/20 dark:border-white/20">
<button
onClick={decrement}
className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-r border-zinc-950/20 dark:border-white/20"
aria-label="Decrease"
>
-
</button>

<div className="flex text-sm items-center justify-center h-8 px-6 text-zinc-950/80 dark:text-white/80 font-medium min-w-[4rem] text-center">
{count}
</div>

<button
onClick={increment}
className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-l border-zinc-950/20 dark:border-white/20"
aria-label="Increase"
>
+
</button>
</div>
</div>
);
)
}
```

The `Counter` component can be used in your `MDX` files like this:

```mdx
<Counter />
```

The counter renders as an interactive React component.
export const Counter = () => {
const [count, setCount] = useState(0)

Check warning on line 57 in react-components.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

react-components.mdx#L57 

Did you really mean 'setCount'?

<Counter />
const increment = () => setCount(count + 1)
const decrement = () => setCount(count - 1)

## Importing components
return (
<div className="flex items-center justify-center">
<div className="flex items-center rounded-xl overflow-hidden border border-zinc-950/20 dark:border-white/20">
<button
onClick={decrement}
className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-r border-zinc-950/20 dark:border-white/20"
aria-label="Decrease"
>
-
</button>

<div className="flex text-sm items-center justify-center h-8 px-6 text-zinc-950/80 dark:text-white/80 font-medium min-w-[4rem] text-center">
{count}
</div>

Just like in regular React, you can import components from other files.
<button
onClick={increment}
className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-l border-zinc-950/20 dark:border-white/20"
aria-label="Increase"
>
+
</button>
</div>
</div>
)
}

```mdx
import { ColorGenerator } from "/snippets/color-generator.jsx"
```
The counter renders as an interactive React component.

<Warning>
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.
</Warning>
<Counter />

After importing the component, use it in your `MDX` files like this:
## Importing components

```mdx
<ColorGenerator />
```
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 = () => {
Expand Down Expand Up @@ -181,9 +213,11 @@
}
```

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"

<ColorGenerator />
```

Expand Down