Skip to content
Open
Changes from all commits
Commits
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
100 changes: 100 additions & 0 deletions README.es-ES.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@


# React Easy Modals

[![bundle size](https://img.shields.io/bundlephobia/minzip/react-easy-modals)](https://bundlephobia.com/result?p=react-easy-modals)

Un administrador de modales simple, flexible, libre de dependencias y con seguridad de tipos para React.

[📚 Documentación](https://react-easy-modals-docs.vercel.app/)

## Primeros pasos

### Instalación

```bash
npm install react-easy-modals
```

### Agrega ModalProvider a tu aplicación

Envuelve tu aplicación con `ModalProvider` para habilitar los modales:

```tsx
import { ModalProvider } from "react-easy-modals";

function App() {
return <ModalProvider>{/* Your app content */}</ModalProvider>;
}

export default App;
```

### Crea tu componente Modal

Crea un componente modal básico:

```tsx
function Modal({ title, message, close, isOpen }) {
if (!isOpen) return null;

return (
<div className="modal-backdrop">
<div className="modal">
<strong>{title}</strong>
<p>{message}</p>
<button onClick={() => close()}>OK</button>
</div>
<style jsx>{`
.modal-backdrop {
position: fixed;
z-index: 50;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.modal {
color: white;
background: black;
border: 1px solid gray;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
width: 300px;
}
.modal button {
background: white;
color: black;
padding: 5px;
}
`}</style>
</div>
);
}
```

### Ponlo a prueba

Importa `useModals` en cualquier parte de tu aplicación para abrir o cerrar tus modales:

```tsx
import { useModals } from "react-easy-modals";
import Modal from "./Modal";

function Page() {
const modals = useModals();

async function handleClick() {
const result = await modals.open(Modal, {
title: "Alert",
message: "This is an alert",
});
console.log(result);
};

return <button onClick={handleClick}>Open Modal</button>;
}
```