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

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

Import the Component

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.

Practical Integration

1. API Key Log in to the MNet Developer Portal to obtain your application's API key.

2. Space ID and Metaverse ID These IDs can be managed in your MNet admin dashboard.

3. 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 [e-mail] or visit the official documentation.

Enjoy integrating MNet Space into your application! 🎉