Have ideas to improve npm?Join in the discussion! »

@plasmicapp/loader
TypeScript icon, indicating that this package has built-in type declarations

0.0.20 • Public • Published

A plugin to sync your Plasmic designs via a convenient component! Supports both NextJS and Gatsby.

// some-page.js

import PlasmicLoader from "@plasmicapp/loader";

export default function MyPage(props) {
  return (
    <div>
      <PlasmicLoader
        projectId="some-project-id"
        component="component-name"
        componentProps={{
          onClick() {
            // ...
          },
          someComponentProp() {
            // ...
          },
        }}
        providerProps={{
          Screen: null,
          Theme: "dark",
        }}
      />
    </div>
  );
}
Prop Required? Description
component Yes The name of the component that you want to load. Note that you can only load named components in Plasmic
componentProps No Any additional prop you wish to pass to your component
projectId Only if you have multiple projects with the same component name The unique project identifier. It is inside your Plasmic project URL: https://studio.plasmic.app/projects/here-project-id
providerProps Only if your component uses Global Variants An object with all the Global Variants and their value for this component

Usage with NextJS

For NextJS codebases, add our plugin like this:

// next.config.js
const plasmic = require("@plasmicapp/loader/next");

const withPlasmic = plasmic({
  projects: ["projectid", "projectid@>0"], // An array of project to sync.
});

module.exports = withPlasmic({
  // Your NextJS config.
});

Usage with Gatsby

For Gatsby codebases, add our plugin like this:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@plasmicapp/loader/gatsby`,
      options: {
        projects: ["projectid", "projectid@>0"], // An array of projects to sync.
      },
    },
  ],
};

Keywords

none

Install

npm i @plasmicapp/loader

DownloadsWeekly Downloads

144

Version

0.0.20

License

none

Unpacked Size

23.8 kB

Total Files

19

Last publish

Collaborators

  • avatar