grunfeld를 소개합니다 Grunfeld는 React 앱을 위한 간단하고 직관적인 대화상자 관리 도구입니다. 복잡한 상태 관리 없이 몇 줄의 코드로 모달, 알림, 확인 대화상자를 구현할 수 있습니다.<dialog> 기반 top-layer 렌더링을 선택할 수 있고, Provider와 개별 대화상자 옵션으로 동작과 스타일을 손쉽게 커스터마이징할 수 있습니다.
설치 방법 # grunfeld는 아래의 다양한 방법으로 설치할 수 있습니다.
npm install @ilokesto/grunfeld
pnpm add @ilokesto/grunfeld
yarn add @ilokesto/grunfeld
bun add @ilokesto/grunfeld빠른 시작 # 앱의 최상위에 GrunfeldProvider를 추가하세요:
import { GrunfeldProvider } from "@ilokesto/grunfeld";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
<GrunfeldProvider>
<Component {...pageProps} />
</GrunfeldProvider>
);
}기본 사용법 # 간단한 확인 대화상자를 생성하고 사용자의 응답을 받을 수 있습니다. grunfeld.add() 메서드는 Promise를 반환하므로 async/await를 사용하여 사용자의 선택을 기다릴 수 있습니다.
import { grunfeld } from "@ilokesto/grunfeld";
export default function YourComponent() {
const showConfirmDialog = async () => {
const result = await grunfeld.add<boolean>((removeWith) => ({
element: (
<div>
<p>Are you sure you want to delete this?</p>
<button onClick={() => removeWith(true)}>Confirm</button>
<button onClick={() => removeWith(false)}>Cancel</button>
</div>
),
position: "center",
dismissCallback: () => console.log("Dialog closed"),
}));
if (result) {
console.log("User confirmed the action");
} else {
console.log("User canceled the action");
}
};
return <button onClick={showConfirmDialog}>Open confirm dialog</button>;
}