How to Create Modals on PrimeReact

#codesandbox

IzyModals is a Wizard library that creats React Modals using PrimeReact component. I will show you how to create a modal using izymodals in this post.

GET STARTED: INSTALLATION

npm i izymodals
# or
yarn add izymodals

LINKS

CodePlusDev
NPMJS
YARNPKG

CodeSandbox Live Examples

Example configs for creating 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" and "tabList" variables are placeholders for PrimeReact Tabs component. "tabList" replaces with tab menu, tabPanels replaces with tab contents. TabModal component's child must start with a arrow function such as the example. So, do not forget to import TabModal component.

Prompt Modal Example File

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;