goober
goober copied to clipboard
How to handle forward ref if it is created inside a component
I have a situation where I create a React component that has a shadow DOM inside using (https://github.com/Wildhoney/ReactShadow):
import { css, styled } from "goober";
import root from "react-shadow";
const App = () => {
const setRef2 = useCallback((target: HTMLElement) => {
const boundcss = css.bind({ target });
counst boundstyled = styled.bind({ target });
}, []);
return (
<root.div ref={setRef2}>
<Toaster />
<style type="text/css">{styles}</style>
fun!fun!
</root.div>
);
}
The issue is, the shadow DOM is not created until the first render. So I can't bind goober till after the first render. I think this creates a problem, because I can only use all the goober functions after the first render.
This is particularly problematic, because I'm consuming a library (https://github.com/timolins/react-hot-toast) that uses goober, and I need it to use the bound functions. Is there a good workaround here?
Agh, that's a good problem right here. Hmm, so would the styled
here be bound correctly inside react-hot-toast
?