i’am trying to implement à modal with React, in this modal i want to position the modal relatively to the the element wich trigger it (which is not à parent),
in this set up i can access the the reference to the triggering element like you see here
console.log(
"console button triggering modal offset" + event.target.offsetTop
);
but i can’t access the reference to the modal, this code generate an error
useEffect(() => {
console.log("loggin ref width " + modalRef.current.offsetWidth);
}, [modalRef]);
when i remove the CSSTransition component every thing is fine,
here is the full code,
i would appreciate any help
import {
React,
forwardRef,
useEffect,
useImperativeHandle,
useRef,
useState,
} from "react";
import ReactDOM from "react-dom";
import "./UserParamModal2.css";
import { CSSTransition } from "react-transition-group";
const UserParamModalOverlay = forwardRef((props, ref) => {
const content = (
<div className={`userparammodal ${props.className}`} ref={ref}>
{props.children}
</div>
);
return ReactDOM.createPortal(
content,
document.getElementById("modal-user-param")
);
});
const UserParamModal2 = forwardRef((props, ref) => {
const [visible, setVisible] = useState(false);
const modalRef = useRef();
useImperativeHandle(ref, () => {
return {
toggle(event) {
console.log(
"console button triggering modal offset" + event.target.offsetTop
);
setVisible((prev) => {
return !prev;
});
},
};
});
useEffect(() => {
console.log("loggin ref width " + modalRef.current.offsetWidth);
}, [modalRef]);
return (
<CSSTransition
in={visible}
mountOnEnter
unmountOnExit
timeout={200}
classNames="userparammodal"
>
<UserParamModalOverlay {...props} ref={modalRef}></UserParamModalOverlay>
</CSSTransition>
);
});
export default UserParamModal2;
