Posted on Oct 20, 2022

How to Create Modals on PrimeReact

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;