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.

`registerGlobalContext`

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

Copy

PLASMIC.registerGlobalContext(
  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:

Field	Required?	Description
`name`	Yes	A 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.
`props`	Yes	An 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.
`displayName`	No	A human-friendly name to be displayed for the component in Studio UI; can contain spaces and punctuations.
`description`	No	A human-friendly description for what this component does; will be rendered as a helpful hint to Studio users.
`refProp`	No	The 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.
`providesData`	No	Must be true if the component provides data to its slots using `DataProvider` (imported from @plasmicapp/host).
`globalActions`	No	An object specifying the actions provided to its slots using `GlobalActionsProvider` (imported from @plasmicapp/host). See example usage.
Codegen only:
`importPath`	Yes	The 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).
`isDefaultExport`	No	If true, then this component is the default export from `importPath`.
`importName`	No	If the component is not the default export, then it is a named export from `importPath`, named `importName`. Default to using `name` if not specified.

`GlobalActionsProvider`

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.

Field	Required?	Description
`contextName`	Yes	The registered name of the global context (see `registerGlobalContext`).
`actions`	Yes	An 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.