Created
October 13, 2022 12:03
-
-
Save hmetgundogdu/98d126af01c7f515457388b4f4c642a9 to your computer and use it in GitHub Desktop.
This is a idea for debounced component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { ReactNode, useEffect, useState } from 'react'; | |
| interface MountControllerProps { | |
| teal?: number; | |
| leading?: number; | |
| mount: boolean; | |
| children: ReactNode; | |
| } | |
| function MountController({ children }: MountControllerProps) { | |
| return <>{children}</>; | |
| } | |
| interface ModalProps { | |
| isOpen: boolean; | |
| } | |
| function Modal(_: ModalProps) { | |
| return ( | |
| <div className="modal"> | |
| <div className="modal-title">Modal Title</div> | |
| <div className="modal-body">Modal Content</div> | |
| </div> | |
| ); | |
| } | |
| export default function Main() { | |
| const [isModalOpen, setModalOpen] = useState(false); | |
| useEffect(() => { | |
| setModalOpen(true); | |
| setTimeout(() => setModalOpen(false), 5000); | |
| }, []); | |
| return ( | |
| <div> | |
| <MountController mount={isModalOpen} teal={1000}> | |
| <Modal isOpen={isModalOpen} /> | |
| </MountController> | |
| </div> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment