mintlify__docs/react-components.mdx

---
title: "React"
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).

### Basic example

Here is a basic example of a counter component:

```mdx
export const Counter = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +
      </button>
    </div>
  );
}
```

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

```mdx
<Counter />
```

The counter renders as an interactive React component.

<Counter />

## Importing components

Just like in regular React, you can import components from other files.

```mdx
import { ColorGenerator } from "/snippets/color-generator.jsx"
```

<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>

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

```mdx
<ColorGenerator />
```

Learn more about [reusable snippets](/reusable-snippets).

### Complex example

You can build much more complex components. Here is an example of a color generator component that uses multiple React hooks:

```mdx /snippets/color-generator.jsx [expandable]
export const ColorGenerator = () => {
  const [hue, setHue] = useState(180)
  const [saturation, setSaturation] = useState(50)
  const [lightness, setLightness] = useState(50)
  const [colors, setColors] = useState([])

  useEffect(() => {
    const newColors = []
    for (let i = 0; i < 5; i++) {
      const l = Math.max(10, Math.min(90, lightness - 20 + i * 10))
      newColors.push(`hsl(${hue}, ${saturation}%, ${l}%)`)
    }
    setColors(newColors)
  }, [hue, saturation, lightness])

  const copyToClipboard = (color) => {
    navigator.clipboard
      .writeText(color)
      .then(() => {
        console.log(`Copied ${color} to clipboard!`)
      })
      .catch((err) => {
        console.error("Failed to copy: ", err)
      })
  }

  return (
    <div className="p-4 border dark:border-zinc-950/80 rounded-xl not-prose">
      <div className="space-y-4">
        <div className="space-y-2">
          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            Hue: {hue}°
            <input
              type="range"
              min="0"
              max="360"
              value={hue}
              onChange={(e) => setHue(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(0, ${saturation}%, ${lightness}%), 
                  hsl(60, ${saturation}%, ${lightness}%), 
                  hsl(120, ${saturation}%, ${lightness}%), 
                  hsl(180, ${saturation}%, ${lightness}%), 
                  hsl(240, ${saturation}%, ${lightness}%), 
                  hsl(300, ${saturation}%, ${lightness}%), 
                  hsl(360, ${saturation}%, ${lightness}%))`,
              }}
            />
          </label>

          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            Saturation: {saturation}%
            <input
              type="range"
              min="0"
              max="100"
              value={saturation}
              onChange={(e) => setSaturation(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(${hue}, 0%, ${lightness}%), 
                  hsl(${hue}, 50%, ${lightness}%), 
                  hsl(${hue}, 100%, ${lightness}%))`,
              }}
            />
          </label>

          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            Lightness: {lightness}%
            <input
              type="range"
              min="0"
              max="100"
              value={lightness}
              onChange={(e) => setLightness(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(${hue}, ${saturation}%, 0%), 
                  hsl(${hue}, ${saturation}%, 50%), 
                  hsl(${hue}, ${saturation}%, 100%))`,
              }}
            />
          </label>
        </div>

        <div className="flex space-x-1">
          {colors.map((color, idx) => (
            <div
              key={idx}
              className="h-16 rounded flex-1 cursor-pointer transition-transform hover:scale-105"
              style={{ backgroundColor: color }}
              title={`Click to copy: ${color}`}
              onClick={() => copyToClipboard(color)}
            />
          ))}
        </div>

        <div className="text-sm font-mono text-zinc-950/70 dark:text-white/70">
          <p>
            Base color: hsl({hue}, {saturation}%, {lightness}%)
          </p>
        </div>
      </div>
    </div>
  )
}
```

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

```mdx
<ColorGenerator />
```

The color generator renders as an interactive React component.

<ColorGenerator />

## Considerations

<AccordionGroup>
  <Accordion title="Client-side rendering impact">
    React hook components render on the client-side, which has several implications:

    - **SEO**: Search engines might not fully index dynamic content.
    - **Initial load**: Visitors may experience a flash of loading content before components render.
    - **Accessibility**: Ensure dynamic content changes are announced to screen readers.
  </Accordion>
  <Accordion title="Performance best practices">
    - **Optimize dependency arrays**: Include only necessary dependencies in your `useEffect` dependency arrays.
    - **Memoize complex calculations**: Use `useMemo` or `useCallback` for expensive operations.
    - **Reduce re-renders**: Break large components into smaller ones to prevent cascading re-renders.
    - **Lazy loading**: Consider lazy loading complex components to improve initial page load time.
  </Accordion>
</AccordionGroup>