diff --git a/README.es-ES.md b/README.es-ES.md new file mode 100644 index 0000000..e597063 --- /dev/null +++ b/README.es-ES.md @@ -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 {/* Your app content */}; +} + +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 ( +
+
+ {title} +

{message}

+ +
+ +
+ ); +} +``` + +### 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 ; +} +```