PrimeReact에서 모달을 만드는 방법

IzyModals는 PrimeReact 컴포넌트를 사용하여 React Modals를 생성하는 Wizard 라이브러리입니다. 이 게시물에서는 izymodals를 사용하여 모달을 만드는 방법을 보여 드리겠습니다.

시작하기: 설치

npm i izymodals
# or
yarn add izymodals

연결

CodePlusDev
NPMJS
YARNPKG

CodeSandbox 라이브 예제

TabModal 생성을 위한 예제 구성

import { TabModal } from "izymodals";

const steps = [
    {
      label: "Step 1",
      content: Container,
      params: {
        children: <PromptExample buttonLabel="Step 1 Button: Do you like it?" />
      }
    },
    {
      label: "Step 2",
      content: Container,
      params: {
        children: (
          <PromptExample buttonLabel="Step 2: Do you recommend it to your friend?" />
        )
      }
    }
  ];

return (
    <TabModal status steps={steps}>
      {({ tabList, tabPanels }) => {
        return (
          <div className="col-12 flex">
            <div className="col-2">
              <div className="card">
                <div className="flex align-items-center flex-column ">
                  {tabList}
                </div>
              </div>
            </div>
            <div className="col-10">
              <div className="flex flex-column">{tabPanels}</div>
            </div>
          </div>
        );
      }}
    </TabModal>
  );

"tabPanels"및 "tabList"변수는 PrimeReact 탭 구성 요소의 자리 표시자입니다. "tabList"는 탭 메뉴로 대체되고 tabPanels는 탭 내용으로 대체됩니다. TabModal 컴포넌트의 자식은 예제와 같이 화살표 함수로 시작해야 합니다. 따라서 TabModal 구성 요소를 가져오는 것을 잊지 마십시오.

프롬프트 모달 예제 파일

import { useState } from "react";
import { PromptModal } from "izymodals";

const PropmtExample = (props) => {
  const [status, setStatus] = useState(false);

  return (
    <div>
      <PromptModal
        status
        labelYes="yes"
        labelNo="no"
        onYes={() => setStatus("yes")}
        onNo={() => setStatus("no")}
        {...props}
      >
        Test {status}
      </PromptModal>
    </div>
  );
};

export default PropmtExample;

내 오픈 소스 프로젝트 지원
https://github.com/uuur86
https://github.com/sponsors/uuur86