@metaverse-ese-test-example/frontend-sdk

v1.0.0-alpha.2

Published

22 days ago

**MNET Space SDK** provides a simple React component to integrate MNet Space into your web applications. This component supports rendering and interacting with MNet's metaverse space.

0High
0Medium
0Low

mr.tonyhuynh.bitcountry

MNET Space SDK - Frontend React Component

MNET Space SDK provides a simple React component to integrate MNet Space into your web applications. This component supports rendering and interacting with MNet's metaverse space.

Installation

Install the SDK package via npm or yarn:

npm install @metaverse-ese-test-example/frontend-sdk

Or:

yarn add @metaverse-ese-test-example/frontend-sdk

Usage

Using with React

The SDK provides the MNetSpace component to display the MNet Space. Here's a basic example:

'use client';

import { MNetSpace } from '@metaverse-ese-test-example/frontend-sdk/react';

export default function DemoSpace() {
  return (
    <div className="w-[100%] h-screen">
      <MNetSpace
        apiKey="your-api-key"
        spaceId="your-space-id"
        metaverseId="your-metaverse-id"
      />
    </div>
  );
}

Component Props

| Prop | Type | Required | Description | |-----------------|------------|----------|--------------------------------------------------------------------| | apiKey | string | Yes | The API key for authenticating with the MNet service. | | spaceId | string | Yes | The ID of the MNet space you want to display. | | metaverseId | string | Yes | The ID of the metaverse containing the space. | | className | string | No | Custom CSS classes to apply to the component container. |

Using with Plain JavaScript

Loading SDK from a CDN

If you are not using React, you can integrate the SDK directly by loading it from a CDN and inserting an iframe into your web page.

HTML and JavaScript Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MNet Space</title>
</head>
<body>
  <div id="space-container" style="width: 100%; height: 100vh;"></div>
  <!-- Load SDK from CDN -->
  <script src="https://cdn.jsdelivr.net/npm/@metaverse-ese-test-example/frontend-sdk/dist/index.js"></script>
  <!-- Alternative CDN -->
  <!-- <script src="https://unpkg.com/@metaverse-ese-test-example/[email protected]/dist/index.js"></script> -->
  <script>
    // Ensure SDK is loaded before using it
    document.addEventListener("DOMContentLoaded", () => {
      const sdk = new window.SDK(
        { apiKey: 'your-api-key' }, // Replace with your API key
        'production' // Specify the environment ('production', 'staging', etc.)
      );

      sdk.renderSpace({
        selector: '#space-container', // Selector for the container element
        spaceId: 'your-space-id', // Replace with your space ID
        onComplete: () => {
          console.log('Space loaded successfully!');
        },
        onError: (error) => {
          console.error('Failed to load space:', error);
        },
      });
    });
  </script>
</body>
</html>

Additional Functions (Plain JavaScript)

Show iframe:
```
sdk.show();
```
Hide iframe:
```
sdk.hide();
```

Update options:

sdk.updateOptions({
  selector: '#new-container',
  spaceId: 'new-space-id',
});

Get iframe state:

console.log(sdk.getState()); // Returns 'loading', 'loaded', or 'error'

Practical Integration

API Key Log in to the MNet Developer Portal to obtain your application's API key.
Space ID and Metaverse ID These IDs can be managed in your MNet admin dashboard.
Custom Styling You can customize the component's size and layout by passing a className or wrapping it in your container <div>.

Example:

<MNetSpace
  apiKey="your-api-key"
  spaceId="your-space-id"
  metaverseId="your-metaverse-id"
  className="rounded-lg shadow-lg"
/>

Output

When implemented, the component will render the specified MNet Space, allowing direct interaction within the metaverse.

Development and Debugging

Access Permissions: Ensure your API key has access to the specified Space ID.
Check Console Logs: If you encounter issues, review the browser console for detailed error messages.

Support

If you encounter any problems or have questions, contact our support team at [email protected] or visit the official documentation.

Enjoy integrating MNet Space into your application! 🎉

License

This SDK is licensed under the MIT License.