help with react context
Im making a tooltip that is on the topmost part of the document, and it needs to know if a component is being hovered, that component is nested.
TooltipContext file
TooltipContext file
import { createContext, useState, useContext } from "react";
import PropTypes from "prop-types";
const TooltipContext = createContext();
const TooltipProvider = ({ children }) => {
const [tooltip, setTooltip] = useState({
visible: false,
name: "",
position: null,
});
const handleServerHover = (isHovered, name, position) => {
if (isHovered) {
setTooltip({
visible: isHovered,
name: name,
position: {
top: position.top,
height: position.height,
left: position.right,
},
});
} else {
setTooltip((prev) => ({
...prev,
visible: false,
}));
}
};
return (
<TooltipContext.Provider value={{ tooltip, handleServerHover }}>
{console.log("BINGUS")}
{children}
</TooltipContext.Provider>
);
};
TooltipProvider.propTypes = {
children: PropTypes.element,
};
// Custom hook to use the TooltipContext
const useTooltip = () => useContext(TooltipContext);
export { TooltipProvider, useTooltip };import { createContext, useState, useContext } from "react";
import PropTypes from "prop-types";
const TooltipContext = createContext();
const TooltipProvider = ({ children }) => {
const [tooltip, setTooltip] = useState({
visible: false,
name: "",
position: null,
});
const handleServerHover = (isHovered, name, position) => {
if (isHovered) {
setTooltip({
visible: isHovered,
name: name,
position: {
top: position.top,
height: position.height,
left: position.right,
},
});
} else {
setTooltip((prev) => ({
...prev,
visible: false,
}));
}
};
return (
<TooltipContext.Provider value={{ tooltip, handleServerHover }}>
{console.log("BINGUS")}
{children}
</TooltipContext.Provider>
);
};
TooltipProvider.propTypes = {
children: PropTypes.element,
};
// Custom hook to use the TooltipContext
const useTooltip = () => useContext(TooltipContext);
export { TooltipProvider, useTooltip };
