0.0.0 • Published 2 years ago
ultra-modal v0.0.0
Ultra Modal
A modal for react.
Always rewrite the same code for modal. Let's try a ui utility libraray. That's give more controlle on the ui with prebuild tools.
Set 1:
Replace your layout page with this code
# app/layout.tsx;
import "ultra-modal/styles.css";
import { ModalXProvider } from "ultra-modal";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<head />
<body>
<ModalXProvider theme="light">{children}</ModalXProvider>
</body>
</html>
);
}Use modal context
"use client";
import React from "react";
import { useModalX } from "ultra-modal";
import { CustomForm } from "../components";
export default function HomePage() {
const modalX = useModalX();
const handleShowDetails = () => {
modalX.show("customForm", CustomForm());
};
return (
<>
<div className="card">
<h4 className="cardTitle">I can do this</h4>
<button className="cardButton" onClick={handleShowDetails}>
See more
</button>
</div>
</>
);
}0.0.0
2 years ago