> ## 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.

# React

> Integrating Polygona with React

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

### Installation

Install the Polygona SDK:

```bash theme={null}
npm install @polygona/react-sdk
```

or

```bash theme={null}
yarn add @polygona/react-sdk
```

### Embedding the Editor

1. Go to the <strong>"Projects"</strong> tab in your dashboard.
2. Click on <span style={{
   display: 'inline-block',
   backgroundColor: 'black',
   padding: '0.2rem',
   borderRadius: '0.2rem',
   lineHeight: '1rem',
   }}><Icon icon="code" color="white" /></span> 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:

```jsx theme={null}
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.

```jsx theme={null}
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}
    />);
};
```