Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.polygona.io/llms.txt

Use this file to discover all available pages before exploring further.

Integrating Polygona with React is easy. Just follow these steps:

​
Installation

Install the Polygona SDK: 
npm install @polygona/react-sdk
or 
yarn add @polygona/react-sdk

​
Embedding the Editor

  1. Go to the “Projects” tab in your dashboard.
  2. Click on icon on the top-right corner of the project you want to embed.
  3. Select the platform you’re using (e.g. React, Shopify).
  4. Copy the embed code and follow the instructions to embed it on your website.
Here’s an example of what the embed code might look like: 
import { Editor } from '@polygona/react-sdk';

const MyComponent = () => {
return (
    <Editor
        projectId="YOUR_PROJECT_ID"
        apiKey="YOUR_API_KEY"
      />);
};
Replace 'YOUR_API_KEY' with your actual API key and 'YOUR_PROJECT_ID' with the project ID of the model you want to embed.

​
Handling downloads

To handle downloads, you can use the onDownload prop. This prop is a function that is called when the user clicks the download button. 
import { Editor, downloadProject } from '@polygona/react-sdk';

const MyComponent = () => {
const handleDownload = async (
    projectName: string,
    settings: Record<string, string>,
    outputFormat: 'glb' | 'stl'
) => {
    // You can add your own logic here. For example, you can redirect the user to your
    // checkout page and download the project after the payment is completed.
    const { data } = await downloadProject({
        apiKey,
        projectId: id,
        settings,
        outputFormat,
    });

    if (data) {
        const url = URL.createObjectURL(data);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${projectName}.${outputFormat}`;
        a.click();
        URL.revokeObjectURL(url);
    }
};

return (
    <Editor
        projectId="YOUR_PROJECT_ID"
        apiKey="YOUR_API_KEY"
        onDownload={handleDownload}
    />);
};