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

Developer Support
21

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

22

Just in your UserContextProvider

23

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>
    );
}
24

interesting, normally in React I would use Context this way

const data = useContext(...)

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

Thanks a lot for your advise

25

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

26

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

27

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

28

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