mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4fc8d5e910
Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
217 lines
7.5 KiB
Plaintext
217 lines
7.5 KiB
Plaintext
---
|
|
title: "React"
|
|
description: "Crea elementos interactivos y reutilizables con componentes de React personalizados en tu documentación de Mintlify usando JSX y estado."
|
|
keywords: ["React components", "interactive components", "JSX", "custom components"]
|
|
boost: 3
|
|
---
|
|
|
|
import { ColorGenerator } from "/snippets/color-generator.jsx";
|
|
|
|
Crea elementos interactivos en tus documentos usando [componentes de React](https://react.dev) y [hooks](https://react.dev/reference/react/hooks) directamente en archivos MDX.
|
|
|
|
<div id="inline-components">
|
|
## Componentes en línea
|
|
</div>
|
|
|
|
Declara componentes directamente en tu archivo MDX:
|
|
|
|
export const Counter = () => {
|
|
const [count, setCount] = useState(0)
|
|
|
|
const increment = () => setCount(count + 1)
|
|
const decrement = () => setCount(count - 1)
|
|
|
|
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>
|
|
|
|
<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>
|
|
)
|
|
}
|
|
|
|
<Counter />
|
|
|
|
```mdx
|
|
export const Counter = () => {
|
|
const [count, setCount] = useState(0)
|
|
const increment = () => setCount(count + 1)
|
|
const decrement = () => setCount(count - 1)
|
|
|
|
return (
|
|
<div>
|
|
<button onClick={decrement}>-</button>
|
|
<span>{count}</span>
|
|
<button onClick={increment}>+</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<Counter />
|
|
```
|
|
|
|
<div id="import-components">
|
|
## Importar componentes
|
|
</div>
|
|
|
|
Los archivos de componentes deben estar en la carpeta `/snippets/`. Más información sobre [fragmentos reutilizables](/es/create/reusable-snippets).
|
|
|
|
<Note>
|
|
Los imports anidados no son compatibles. Importa todos los componentes referenciados directamente en el archivo MDX padre.
|
|
</Note>
|
|
|
|
Crea un archivo de componente en `snippets/`:
|
|
|
|
```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>
|
|
)
|
|
}
|
|
```
|
|
|
|
Luego impórtalo y úsalo:
|
|
|
|
```mdx
|
|
import { ColorGenerator } from "/snippets/color-generator.jsx"
|
|
|
|
<ColorGenerator />
|
|
```
|
|
|
|
<ColorGenerator />
|
|
|
|
<div id="considerations">
|
|
## Consideraciones
|
|
</div>
|
|
|
|
- **SEO**: Es posible que los motores de búsqueda no indexen completamente el contenido dinámico renderizado en el cliente.
|
|
- **Carga inicial**: Los visitantes pueden ver un parpadeo antes de que los componentes se rendericen.
|
|
- **Accesibilidad**: Asegúrate de que los lectores de pantalla anuncien los cambios de contenido dinámico.
|
|
- **Optimiza los arrays de dependencias**: Incluye solo las dependencias necesarias en `useEffect`.
|
|
- **Memoriza operaciones costosas**: Usa `useMemo` o `useCallback` cuando proceda.
|
|
- **Reduce los renderizados**: Divide los componentes grandes en otros más pequeños.
|
|
- **Carga diferida**: El código de los componentes no se puede cargar de forma diferida. Todos los componentes se cargan junto con la página. Si un componente realiza operaciones que consumen muchos recursos al montarse, como obtener datos o cálculos pesados, usa el renderizado condicional para posponer su montaje hasta que el usuario interactúe.
|