Use to show message by using Dialog, snackbar or to show side in React. You can use this package easily to manage your dialog, snackbar or side. Ensure for privacy!! Dialog, side and snackbar only show (in screen or in DOM Tree) if they are opened.
See more examples in live demo.
- This will not cause unexpected re-renders to other components when you open modal item(s). (Only the modal react component re-render)
- This package contains default items that you just use them to solve many cases.
- I use typescript in all examples.
You can install it by:
npminstalltunangn-react-modalImport to App.jsx or App.tsx and open default dialog:
import{TunangnModal,dialog}"tunangn-react-modal";exportdefaultfunctionApp(){return(<div><buttononClick={()=>dialog({title: "My first dialog"})}>Open my dialog</button><TunangnModal/></div>)}I will show you how to use TunangnModal in this article.
An default modal item always has 4 components:
- Header has
titleandxbutton (optional). - Body has
content. - Footer: depend on type of Modal Item, the Footer will has difference children. Firstly, I want to talk about
titleandcontent. - Container: wrap all components above.
This is the Modal React Component that you have to place it in App Component. There are 3 default modal items, you can use all of them immediately with
dialog, side and snackbar from tunangn-react-modal.
TunangnModal has 3 properties:
- canUseWhiteBG: Will white background or black background be used?.
- className: (don't recommend) replace the default class name. If you replace the default class name, make sure you have suitable style because the default inline style will be unapply.
- items: if you want to custom you own modal items, you can use this properties.
items is an object contains options to assign modal item to list. Its properties:
| Name | Type | Description |
|---|---|---|
| type | MITypes | Use to modify the title of modal item. |
| placeOn (Only for Side) | SidePlaces | undefined | Where is side placed? |
| position (Only for Snackbar) | SnackbarPositions | undefined | What is position of snackbar? |
| duration (Only for Snackbar) | number | null | undefined | How long does snackbar last? If you want to disable the auto-close behaviour, you can assign null to this option. |
| clearDefaultInlineStyle | boolean | undefined | Clear default inline stlyes. You can use the default class name to style the UI component for Modal Item. Note: this option will not work if you use element as Function Component or using this option if you want to write css to the default class name. |
| className | string | undefined | Class name of item's container. This will be based class name for other ui element components. You don't need clearDefaultInlineStyle to clear the default inline style, because the default inline style will be cleared if className option is assigned. Note: this option will not work if you use element as Function Component or using this option if you just want to modify UI Element with your own css |
| element | ((props: CustomizedModalItemProps) => JSX.Element) | undefined | Use this option if you want to create you own modal item. |
Note: You cannot use these properties in your own customized modal item.
When you open an dialog with dialog function, an side with side function or an snackbar with snackbar function. You can pass an object
to this function, an this object is data of Modal Item, the data that you want to modify the content of modal item. Each modal item always
has title and content, so you can pass an object with title, content properties to modify the default modal item.
{title?: string|JSX.Element,content?: string|JSX.Element}All default modal items have same data:
| Name | Type | Description |
|---|---|---|
| title | string | JSX.Element | undefined | Use to modify the title of modal item. |
| content | string | JSX.Element | undefined | Use to modify the content of modal item. |
Modal Item Data is a part of Modal Item Properties. Including:
close: a function that you can use to close the modal item. Sometime, you will need to pass a result to this function. It returns a result object. The result object:
{isAgree: boolean,data?: any,message?: string}item: an object contains properties and methods of modal item:
| Name | Type | Description |
|---|---|---|
| name | string | Name of Modal Item. |
| type | string | JSX.Element | undefined | Use to modify the content of modal item. |
| placeOn (Only for Side) | SidePlaces | undefined | Where is side placed? |
| position (Only for Snackbar) | SnackbarPositions | undefined | What is position of snackbar? |
| duration (Only for Snackbar) | number | null | undefined | How long does snackbar last? If you want to disable the auto-close behaviour, you can assign null to this option. |
| getData | getData<T>(): T | Use to get data from open function. |
utils: an object contains helper functions to support the modal item has behaviour almost like default one.
| Name | Type | Description |
|---|---|---|
| getContainerStyle | (style?: React.CSSProperties | undefined) => React.CSSProperties | [Recommend] Use to get container style. You can pass your custom style to this function, your style will override the default one. |
| runAnimation | MITypes | undefined | Type of Modal Item. |
Note: You cannot use these properties in your own customized modal item.
I will show a dialog and open another dialog depend on result.isAgree. Firstly, import dialog from tunangn-react-modal, dialog receive a data object contains title, content and its own properties:
| Name | Type | Description |
|---|---|---|
| cancelBtnLabel | string | JSX.Element | null | undefined | Use to set label for cancel button of dialog. You can hide this button by assign null. |
| agreeBtnLabel | string | JSX.Element | null | undefined | Use to set label for agree button of dialog. You can hide this button by assign null. |
Let's show a dialog
import{TunangnModal,dialog}"tunangn-react-modal";letdialogTitle=<p>Terms and Conditions <spanstyle={{color: "red"}}>*</span></p>;exportdefaultfunctionApp(){return(<><TunangnModal/><buttononClick={()=>{dialog({title: dialogTitle,content: (<div><p>Please read carefully:</p><h4>Item 1</h4><h4>Item 2</h4><h4>Item 3</h4><h4>Item 4</h4><h4>Item 5</h4></div>)}).then(result=>{if(result.isAgree){dialog({title: dialogTitle,content: "You accepted our terms and conditions.",cancelBtnLabel: null})}else{dialog({title: dialogTitle,content: "You unaccepted :(",agreeBtnLabel: null})}})}}>Open default dialog</button></>)}You can see in the example above, there are 2 dialog with difference content will be showed depend on result.isAgree. And I will hide cancel button with agreed dialog, hide agree button with canceled dialog.
Result
Open dialog
Trying agree
Trying cancel
Note: You cannot use these properties in your own customized modal item.
Side doesn't have its own properties.
I wil show left-side (default) with title and content has 10 images.
Let's show a side
import{TunangnModal,side}"tunangn-react-modal";letsideTitle=<pstyle={{display: "flex",alignItems: "center"}}><spanclassName="material-symbols-outlined"style={{marginRight: ".75rem"}}>photo_library</span>Images
</p>;exportdefaultfunctionApp(){const[imageUrls,setImageUrls]=React.useState<Array<string>>([]);React.useEffect(()=>{letpromises=Array(10).fill(0).map(i=>fetch("https://picsum.photos/200/300"));Promise.all(promises).then(responses=>{leturls: string[]=[];responses.forEach(response=>{urls.push(response.url);});setImageUrls(urls);});},[]);return(<><TunangnModal/><buttononClick={()=>{side({title: sideTitle,content: (<divstyle={{overflowY: "scroll",maxHeight: "calc(100vh - 48px)"}}>{imageUrls.length>0 ?
imageUrls.map((url,index)=>{return<imgsrc={url}key={index}/>}) :
<p>There aren't images.</p>}</div>)})}}>Open images side</button></>)}10 images are response, but the side will not be re-render. I think you have the answer, so you need to customize you own side. I will show you in the last example!!!
Result
I re-open the side to see 10 images.
Note: You cannot use these properties in your own customized modal item.
Snackbar has 1 property:
| Name | Type | Description |
|---|---|---|
| color | string | undefined | Use to modify the background color of header. |
I will show 4 various snackbar with various title and content.
import{TunangnModal,snackbar}"tunangn-react-modal";letsuccessSnackbar={title: <spanclassName="material-symbols-outlined">check_circle</span>,content: "You action is performed successfully.",color: "success"};leterrorSnackbar={title: <spanclassName="material-symbols-outlined">error</span>,content: "There is an error.",color: "error"};letwarningSnackbar={title: <spanclassName="material-symbols-outlined">warning</span>,content: "Your requesting data will cause an unexpected side effect!!! ",color: "warning"};letotherSnackbar={title: <spanclassName="material-symbols-outlined">attach_money</span>,content: "You payment is processed.",color: "#a8329b"};exportdefaultfunctionApp(){return(<><TunangnModal/><buttononClick={()=>{snackbar(successSnackbar);}}>Open snackbar</button></>)}Result
The success snackbar
The error snackbar
The waring snackbar
The other snackbar
I will build a small profile right-side with:
- Username, user's avatar.
- Use css.
- Remove almost inline styles.
- Fetch data (images).
I will create a file in src/components/profile/Profile.tsx:
exportdefaultfunctionProfile(props: CustomizedModalItemProps){// Ref of containerconstprofileRef=React.useRef<HTMLDivElement>(null);constdata=props.item.getData()asany;props.item.getDataconst[imageUrls,setImageUrls]=React.useState<Array<string>>([]);const[user,setUser]=React.useState<UserSideData>();React.useEffect(()=>{letpromises=Array(10).fill(0).map(i=>fetch("https://picsum.photos/300"));// Get usergetUser(data.userId).then(user=>setUser(user));// Resolve imagesPromise.all(promises).then(responses=>{leturls: string[]=[];responses.forEach(response=>{urls.push(response.url);});setImageUrls(urls);});// Use container's ref to perform animation when profile is showed.props.utils.runAnimation!(profileRef.current!);},[]);return(<divref={profileRef}style={props.utils.getContainerStyle({minWidth: "420px",padding: ".75rem",borderTopLeftRadius: "16px",borderBottomLeftRadius: "16px",overflowY: "scroll"})}><divclassName="profile-header"><divclassName="user-info">{user
? (<><imgclassName="user-info-image"src={user.url}style={{marginRight: "0.75rem"}}/><strong>{user.name}</strong></>)
: <strong>There isn't user.</strong>}</div><spanclassName="material-symbols-outlined btn-close"onClick={()=>props.close({isAgree: false})}>close</span></div><divclassName="profile-body"><pclassName="user-info-bio">{user?.bio}</p><h3style={{marginBottom: ".75rem"}}>Shortcuts</h3>{sideBodyContent.shortcuts.map((shortcut,index)=>(<divclassName="profile-shortcut border-top"key={index}style={{padding: ".75rem 0"}}>{shortcut.map(article=>(<buttonclassName="btn-article"key={article.id}><spanclassName="material-symbols-outlined"style={{marginRight: ".75rem"}}>{article.icon}</span><span>{upperCaseFirstChar(article.name)}</span></button>))}</div>))}<h3className="border-top"style={{padding: ".75rem 0"}}>Images</h3><divclassName="profile-images">{imageUrls.length>0 ?
imageUrls.map((url,index)=>{return<imgsrc={url}key={index}/>}) :
<p>There aren't images.</p>}</div></div></div>)}Then import Profile.tsx to App.tsx and use it:
import{TunangnModal,openTMI}"tunangn-react-modal";importProfile,{openSideProfile,profileSideName}from"./components/profile/Profile";// Assign user id. There are 2 userids: user-01 and user-02letuserId="user-02";exportdefaultfunctionApp(){return(<><headerclassName="app-header"><p></p><spanclassName="material-symbols-outlined btn-profile"onClick={()=>openSideProfile(userId)}>account_circle</span></header><TunangnModalitems={{myProfileSide: {type: "side",placeOn: "right",element: Profile}}}/></>)}Result
You can see the source in the live demo above