RickoNoNo3/react-winbox

Cannot use react context inside winbox

salat-23 opened this issue · 5 comments

salat-23 commented

Is there a fix for it? I am using a UI library that depends on outer provider, which cannot be accesed inside winbox.

RickoNoNo3 commented

I have tested the following code, it runs well and consumes the context successfully:

const DefaultContextValue = {text: 'hello'};
const Context = React.createContext(DefaultContextValue);

function App() {
    // some code...
    const [title, setTitle] = useState('test');
    return (
        <Context.Provider value={{...DefaultContextValue, title}}>
            <WinBox {...someProps}>
                <Context.Consumer>
                    {v => (<h5>Value of the context: {JSON.stringify(v)}</h5>)}
                </Context.Consumer>
            </WinBox>
        </Context.Provider>
    )
}

Also, putting Provider and Cunsumer in different functions will result in the same thing.

Enviroments:

  • React 18
  • React-Winbox 1.5.0

Screenshot:
image

Can you give me more specific code implementation or dependencies details? Or you can check the behavior of the library you are using to determine if it is caused by Context.

salat-23 commented

I am sorry, it looks like the actual problem is the dom poisition of the winbox div. I tried to set the root of the winbox by giving root={document.querySelector("#winbox-root")} prop to the WinBox component, but it does not set the element to the desired root. As the result - css styles are not applied. How can I set the root of the winbox element?

RickoNoNo3 commented

@salat-23 Hello, is #29 helpful for you?

salat-23 commented

@salat-23 Hello, is #29 helpful for you?

Tried setting root prop but it doesent work, am I missing something?

RickoNoNo3 commented

in public/index.html:

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="winbox-root"></div>
  <div id="root"></div>
</body>

and in App.jsx:

<WinBox root={document.querySelector('#winbox-root')}></WinBox>

will get the winbox in #winbox-root instead of #root

As WinBox.js (our original package) does not provide a way to change the root dynamically, the root prop here is only enabled once the component did mount.