Global Contexts API reference

For an overview and example usage of global contexts, refer to the global contexts page.

Since global contexts are so similar to code components, much of the documentation on the code components reference is also relevant. Links on this page may refer to the code components reference page.


The registration function takes a component and some metadata about it:

component: React.ComponentType<any>,
meta: GlobalContextMeta,
): void

The first parameter component is the React component function or class that you want to register and use in the Studio.

The second parameter meta is an object containing metadata about the component. The object contains the following fields:

nameYesA unique string name used to identify this component. Each component should be registered with a different name. This name should be a valid javascript identifier, and we recommend picking a name that matches the component’s name in code.
propsYesAn object specifying the props expected for this component. Each key of the object is the name of the prop, and the value is metadata about the prop. See Property types for more.
displayNameNoA human-friendly name to be displayed for the component in Studio UI; can contain spaces and punctuations.
descriptionNoA human-friendly description for what this component does; will be rendered as a helpful hint to Studio users.
refPropNoThe prop that receives and forwards a React ref. Plasmic only uses ref to interact with components in the editor, so it’s not used in the generated code. If not provided, the usual ref prop is used.
providesDataNoMust be true if the component provides data to its slots using DataProvider (imported from @plasmicapp/host).
globalActionsNoAn object specifying the actions provided to its slots using GlobalActionsProvider (imported from @plasmicapp/host). See example usage.
Codegen only:
importPathYesThe path to be used when importing this component in the generated code. It can be the name of the npm package that contains the component (antd), or the path to the file in the project (relative to the srcDir root directory).
isDefaultExportNoIf true, then this component is the default export from importPath.
importNameNoIf the component is not the default export, then it is a named export from importPath, named importName. Default to using name if not specified.


Global actions vs element actions

Global actions (this page) expose functionality down to all children elements.

Element actions expose functionality up to its enclosing component or page.

GlobalActionsProvider is a React Component that provides actions to its slots. See example usage.

contextNameYesThe registered name of the global context (see registerGlobalContext).
actionsYesAn object with the actions exposed by the global context. Each key of the object is the name of the action, and the value is a function.
Was this page helpful?

Have feedback on this page? Let us know on our forum.