Gathering detailed insights and metrics for @metaverse-ese-test-example/frontend-sdk
Gathering detailed insights and metrics for @metaverse-ese-test-example/frontend-sdk
Installations
npm install @metaverse-ese-test-example/frontend-sdkDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
22.10.0
NPM Version
10.9.0
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
3
Package Meta Information
Latest Version
1.0.0-alpha.2
Package Id
@metaverse-ese-test-example/frontend-sdk@1.0.0-alpha.2
Unpacked Size
48.47 kB
Size
8.77 kB
File Count
18
NPM Version
10.9.0
Node Version
22.10.0
Published on
Nov 18, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
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:
1npm install @metaverse-ese-test-example/frontend-sdk
Or:
1yarn 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:
1'use client'; 2 3import { MNetSpace } from '@metaverse-ese-test-example/frontend-sdk/react'; 4 5export default function DemoSpace() { 6 return ( 7 <div className="w-[100%] h-screen"> 8 <MNetSpace 9 apiKey="your-api-key" 10 spaceId="your-space-id" 11 metaverseId="your-metaverse-id" 12 /> 13 </div> 14 ); 15}
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
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>MNet Space</title> 7</head> 8<body> 9 <div id="space-container" style="width: 100%; height: 100vh;"></div> 10 <!-- Load SDK from CDN --> 11 <script src="https://cdn.jsdelivr.net/npm/@metaverse-ese-test-example/frontend-sdk/dist/index.js"></script> 12 <!-- Alternative CDN --> 13 <!-- <script src="https://unpkg.com/@metaverse-ese-test-example/frontend-sdk@1.0.0-alpha.1/dist/index.js"></script> --> 14 <script> 15 // Ensure SDK is loaded before using it 16 document.addEventListener("DOMContentLoaded", () => { 17 const sdk = new window.SDK( 18 { apiKey: 'your-api-key' }, // Replace with your API key 19 'production' // Specify the environment ('production', 'staging', etc.) 20 ); 21 22 sdk.renderSpace({ 23 selector: '#space-container', // Selector for the container element 24 spaceId: 'your-space-id', // Replace with your space ID 25 onComplete: () => { 26 console.log('Space loaded successfully!'); 27 }, 28 onError: (error) => { 29 console.error('Failed to load space:', error); 30 }, 31 }); 32 }); 33 </script> 34</body> 35</html>
Additional Functions (Plain JavaScript)
-
Show iframe:
1sdk.show(); -
Hide iframe:
1sdk.hide(); -
Update options:
1sdk.updateOptions({ 2 selector: '#new-container', 3 spaceId: 'new-space-id', 4}); -
Get iframe state:
1console.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
classNameor wrapping it in your container<div>.
Example:
1<MNetSpace 2 apiKey="your-api-key" 3 spaceId="your-space-id" 4 metaverseId="your-metaverse-id" 5 className="rounded-lg shadow-lg" 6/>
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 support@mnet.com or visit the official documentation.
Enjoy integrating MNet Space into your application! 🎉
License
This SDK is licensed under the MIT License.
No vulnerabilities found.
No security vulnerabilities found.