Aslemammad

// Consistent version of `useMutableSource`, Inspired by https://github.com/pmndrs/valtio/blob/master/src/useMutableSource.ts
import { useEffect, useRef, useState } from 'react';

const TARGET = Symbol('target');
const GET_VERSION = Symbol('getVersion');

export type Source<TargetType extends any, VersionType extends any> = {
	[TARGET]: TargetType;
	[GET_VERSION]: (target: TargetType) => VersionType;
};

Aslemammad

import React from 'react';
import { Reoverlay } from 'reoverlay';

const PostPage = () => {
  
  const deletePost = () => {
    // showModal("Component name in config", props)
    Reoverlay.showModal("ConfirmModal", {
      confirmText: "Are you sure you want to delete this post",
      onConfirm: () => {

Aslemammad

import React from 'react';
import { ModalWrapper, Reoverlay } from 'reoverlay';
// reoverlay css 
import 'reoverlay/lib/ModalWrapper.css';

const ConfirmModal = ({ confirmText, onConfirm }) => {

  const closeModal = () => {
    Reoverlay.hideModal();
  }

Aslemammad

import React from 'react';
import { Reoverlay, ModalContainer } from 'reoverlay';

import { AuthModal, DeleteModal, ConfirmModal } from '../modals';

// Here you pass your modals to Reoverlay
Reoverlay.config([
  {
    name: "AuthModal",
    component: AuthModal

Aslemammad

const HomePage = () => {
  const [isDeleteModalOpen, setDeleteModal] = useState(false)
  const [isConfirmModalOpen, setConfirmModal] = useState(false)
  
  return (
    <div>
      <Modal isOpen={isDeleteModalOpen}>
        Code here...
      </Modal>
      <Modal isOpen={isConfirmModalOpen}>