open-index/open-npm huggingface dataset:
npm package: @plasmicapp/loader
Description: Integrate Plasmic codegen via a convenient PlasmicLoader component!
Latest version: 0.0.59
Deprecated: This package is no longer supported. We recommend updating to new version of the Headless API. https://docs.plasmic.app/learn/upgrading-to-loader-v2

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

```jsx
// 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                  | $12 |
| 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:

```js
// 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:

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