The Workspace SDK is a React-based library that provides a simple and efficient way to integrate a sphere-engine Container component into your application. It handles script loading, subscription management, and rendering of the workspace component.
sphere-engine Containers Documentation
npm i se-containers-react
To render the Workspace component you need workspaceId from API.
import React from 'react';
import {Workspace} from 'se-containers-react';
const App = () => {
return (
<Workspace
workspaceId="your-workspace-id"
subscriptions={'afterScenarioExecution: callback'}
visible={true}
width="100px"
height="200px"
/>
);
}
export default App;
The Workspace component accepts the following props:
Prop | Type | Description | Required |
---|---|---|---|
workspaceId | string | The workspaceId from the API | Yes |
subscriptions | {string: callbackFunction} | The list of events to subscribe to | No |
visible | boolean | The visibility of the component | No |
width | string | The width of the component | No |
height | string | The height of the component | No |
Note: The width and height of the component can be set in any CSS unit (px, em, rem, %, etc.).
- afterScenarioExecution
- afterScenarioExecutionExt
- fileContent
- stageStream
Each subscription requires a callback function that will be called when the event is triggered e.g.
<Workspace
workspaceId="your-workspace-id"
subscriptions={{
'afterScenarioExecution': (data) => {
console.log(data);
}
}}
/>
All subscriptions are described in the event documentation
Before using se-containers-react, ensure your project meets these prerequisites:
- Node.js and npm: Install Node.js along with npm.
- React and ReactDOM: Ensure compatible versions of React and ReactDOM are installed: