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
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;
Support me for my Open Source Projects
https://github.com/uuur86
https://github.com/sponsors/uuur86
Top comments (0)