Besides components, Plasmic also generates other useful assets that you need to use in your application.
Global variants
Global variants are represented in the generated code as React contexts, defined in the file PlasmicGlobalVariant__{NAME}.tsx. These files are also owned by Plasmic, and will be overwritten when they are outdated.
If your components make use of global variants, you must provide the activated global variant value using the generated context provider. Usually you can do this at the root of your React tree, though you can also specify different global variant values for different sections of the product — it’s just a React context, and you can just use it as such.
For example, here’s how you might use a Theme global variant to toggle between dark and light:
// {tsx}
import {ThemeContext} from "./plasmic/PlasmicGlobalVariant__Theme";
functionApp(){
const theme = useUserThemePreference();
return (
<ThemeContext.Provider value={theme}>
...
</ThemeContext.Provider>
);
}
The Screen global variant
If you are making use of the Screen global variant to build responsive designs, then there is a special provider that you should install at the root of your application. This provider will automatically provide the currently-activated screen variants based on the window size:
// {tsx}
import {ScreenVariantProvider} from "./plasmic/PlasmicGlobalVariant__Screen";
functionApp(){
return (
<ScreenVariantProvider>
...
</ScreenVariantProvider>
);
}
Icons
All the SVG icons that you have in Plasmic are automatically generated as React components. You can use them as you would use any icon library:
By default, these icon components are sized to be 1em, with fill / stroke colors set to currentColor, so you can size them using the font-size css property, and color them using the color css property, just as you can with similar icon libraries — except they are your icons!
If your Plasmic component make use of icons, then the generated Plasmic* React component will instantiate these corresponding icon components.
Style tokens
We also support generating design tokens into the codebase. This is so you can, for instance, reuse your color tokens as Sass variables. We specifically emit Salesforce Theo files, which can in turn generate Sass variables, CSS custom properties, etc. by running the theo tool.
For example, here’s how you can generate sass variables from the json file:
Global variants
// {tsx}import {ThemeContext} from "./plasmic/PlasmicGlobalVariant__Theme";
function App() { const theme = useUserThemePreference(); return ( <ThemeContext.Provider value={theme}> ... </ThemeContext.Provider> );}The Screen global variant
// {tsx}import {ScreenVariantProvider} from "./plasmic/PlasmicGlobalVariant__Screen";
function App() { return ( <ScreenVariantProvider> ... </ScreenVariantProvider> );}Icons
// {tsx}import TrashIcon from "./plasmic/PlasmicIcon__Trash";
function App() { return <TrashIcon className="my-icon" />;}Style tokens