Is there any way to use global context data in Plasmic Studio?

huhmm, so let me break it down further so I can understand correctly

  1. I register my React Global Context UserContextProvider with username and role data
  2. I update the Context data username through Plasmic studio project settings
  3. Let say I am having the Text component in the middle of my page which I want to render content using that Context’s username
    Where should my DataProvider be?

Thanks

Just in your UserContextProvider

E.g.:

export default function ClientContextProvider(props: React.PropsWithChildren<ClientContextProps>) {
    const {
        logoUrl,
        tagline,
        children,
    } = props;

    return (
        <ClientContext.Provider value={{ logoUrl, tagline, }}>
          <DataProvider name="clientStuff" data={{ logoUrl, tagline }}>
            {children}
          </DataProvider>
        </ClientContext.Provider>
    );
}

interesting, normally in React I would use Context this way

const data = useContext(...)

return (<div>{data.username}</div>);

Thanks a lot for your advise

Right, and DataProvider is backed by a normal React Context as well, and there are some utilities to access its data like useSelector()

But you don’t need to write any code components calling useSelector to access the data in the DataProvider context, you can pick it directly in Studio

cheers, thanks a lot for your awesome help as usual. I will give it a crack

it works as expected, thanks a lot for your help, Yang :slightly_smiling_face: