How to access Storybook globals from components inside .mdx file?

[kerryj89]

Summary

I've created an .mdx file and inside it I created some React wrapper components that wrap the Storybook doc blocks to extend its functionality - works great!

But I want these wrapper components to be able to set/get from Storybook globals defined in preview.tsx's globalTypes.

I am trying to leverage Storybook's globals so that it can re-render optimally, but should I instead be using localStorage and useEffect to watch for changes there for these wrapper components? Sorry if my terminology or thinking is wrong, still learning React on the side.

Additional information

No response

Create a reproduction

No response

[andreszapatavff]

@kerryj89 did you get anywhere with this?

[kerryj89]

It's been a while but I don't think so. A quick search for globalTypes in my codebase with Storybook didn't return anything. I did feel like I was getting somewhere using their channels

The code in this comment might lead you somewhere but maybe outside of the React system.

[andreszapatavff]

@kerryj89 thank you for getting back. I will check the link out.

[Sidnioulz]

#32362 (comment) from a duplicate conversation provides a working solution. Note that globals aren't directly reactive but according to the OP on that thread, MDX gets remounted entirely on globals changes anyway.