npm package: @neoswap/packs-widget
Description: Packs Widget for Solana
Author: NeoSwap
Latest version: 0.0.15

# Neoswap Packs Widget

This package allows you to easily integrate Neoswap packs into your web application. It can be used directly in an HTML file or within a React application.

## Installation

First, install the package via npm:

```bash
npm install @neoswap/packs-widget
```

## Usage

### Method 1: Directly in an HTML File

You can include the widget directly in an HTML file using a script tag. Here's an example:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Packs Widget Example</title>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  </head>
  <body>
    <div id="packs-widget-container"></div>
    <script src="https://unpkg.com/@neoswap/packs-widget@0.0.12/dist/packs-widget.js"></script>
    <script>
      PacksWidget.default.renderPacksWidget('packs-widget-container', 'YOUR_PARTNER_TOKEN')
    </script>
  </body>
</html>
```

Replace 'YOUR_PARTNER_TOKEN' with your actual partner token.

### Method 2: Using in a React Application

You can also use the widget in a React application. Below is an example of how to integrate it into a React component.

#### Using renderPacksWidget

Create a React component to render the widget:

```javascript
import React, { useEffect, useRef } from 'react';

import { renderPacksWidget } from '@neoswap/packs-widget';



const PacksWidgetContainer: React.FC = () => {

const widgetContainerRef = useRef<HTMLDivElement  |  null>(null);

const partnerToken = process.env.YOUR_PARTNER_TOKEN!;



useEffect(() => {

if (widgetContainerRef.current) {

renderPacksWidget(widgetContainerRef.current.id, partnerToken);

}

}, [partnerToken]);



return <div  id="packs-widget-container"  ref={widgetContainerRef}></div>;

};



export default PacksWidgetContainer;
```

Add this component to your application's routing or render it directly in your main application component.

#### Using usePackData

Here's how you can use the usePackData hook to fetch and display pack data:

```javascript
import React, { useEffect } from 'react';
import packsWidget from '@neoswap/packs-widget';

const PacksPage: React.FC = () => {

const partnerToken = process.env.YOUR_PARTNER_TOKEN!;

const {
  packGroups,
  packDetails,
  transactions,
  balances,
  fetchBalances,
  fetchPackDetails,
  fetchPackDetailsPost,
  fetchTransactions,
  fetchPackGroups,
  isLoadingPackGroups,
  errorPackGroups
} = packsWidget.usePackData(partnerToken);

useEffect(() => {
  fetchPackGroups();
}, [fetchBalances, fetchPackGroups, fetchTransactions]);



if (isLoadingPackGroups) {
  return <div>Loading...</div>;
}



if (errorPackGroups) {
  return <div>Error loading data</div>;
}



return (
<div>
<h1>Packs Information</h1>
<h2>Pack Groups</h2>
<button  onClick={fetchPackGroups}>Refresh Pack Groups</button>
<ul>
{packGroups.map(group => (
<li  key={group.id}>{group.name}</li>
))}
</ul>
</div>
);
};

export default PacksPage;
```

Environment Variables

For the React example, ensure you have a .env file with the following content:

`YOUR_PARTNER_TOKEN=your_partner_token`

Replace 'your_partner_token' with your actual partner token.