Skip to content

Instantly share code, notes, and snippets.

@ercnshngit

ercnshngit/layout.tsx

Created May 16, 2024 07:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ercnshngit/c5b23048b80ca63b225515324385f3cc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ercnshngit/c5b23048b80ca63b225515324385f3cc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ercnshngit created this gist May 16, 2024.
    14 changes: 14 additions & 0 deletions layout.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    import React from 'react'

    export default function layout({children}) {
    return (
    <html>
    <body>
    <PopupManagerContextProvider>
    {children}
    </PopupManagerContextProvider>
    </body>
    </html>
    )
    }

    14 changes: 14 additions & 0 deletions popup.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    import React from 'react'

    export default function Popup({children, name}) {
    const {openedPopup} = usePopupManager()

    if(openedPopup !== name) return null

    return createPortal(
    <div>
    {children}
    </div>,
    document.body
    )
    }
    12 changes: 12 additions & 0 deletions popupButton.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@

    import React from 'react'

    export default function OpenPopupButton() {
    const {setOpenedPopup} = usePopupManager()

    return (
    <button onClick={() => setOpenedPopup('popup1')}>
    Open Popup
    </button>
    )
    }
    33 changes: 33 additions & 0 deletions popupManagerContext.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    import { createContext, ReactNode, useContext, useState } from "react";

    //ekranda 1 tane popup gozukecekse tek yapmak daha mantikli sanki
    interface PopupManagerProps {
    openedPopup: string;
    setOpenedPopup: (popup: string) => void;
    }

    export const PopupManagerContext = createContext<PopupManagerProps>({
    openedPopup: "",
    setOpenedPopup: () => {},
    });

    export const PopupManagerContextProvider = ({
    children,
    }: {
    children: ReactNode;
    }) => {
    const [openedPopup, setOpenedPopup] = useState<string>("");

    return (
    <PopupManagerContext.Provider
    value={{
    openedPopup,
    setOpenedPopup,
    }}
    >
    {children}
    </PopupManagerContext.Provider>
    );
    };

    export const usePopupManager = () => useContext(PopupManagerContext);