### Project Setup and Development Commands
Source: https://github.com/onlyoffice/docspace-react/blob/master/README.md
Essential commands for setting up and developing the ONLYOFFICE DocSpace React project. This includes cloning the repository, installing dependencies, running tests, building the project, and creating a package.
```bash
git clone https://github.com/ONLYOFFICE/docspace-react
```
```bash
npm install
```
```bash
npm run test
```
```bash
npm run rollup
```
```bash
npm pack
```
--------------------------------
### Start React Development Server
Source: https://github.com/onlyoffice/docspace-react/blob/master/README.md
Command to start the Node.js development server for the React application. This command should be run from the root directory of the React project.
```bash
npm run start
```
--------------------------------
### Serve Static React Build
Source: https://github.com/onlyoffice/docspace-react/blob/master/README.md
Commands to install and use the 'serve' package to host the static build of the React application. It shows how to serve on a default port and a custom port.
```bash
npm install -g serve
serve -s build
serve -s build -l 4000
```
--------------------------------
### Install and Configure ONLYOFFICE DocSpace React Package
Source: https://context7.com/onlyoffice/docspace-react/llms.txt
Installs the @onlyoffice/docspace-react package using npm or yarn. It also shows a basic setup example for integrating the DocSpace component into a React application, requiring the server URL and configuration options.
```bash
# Install the package
npm install --save @onlyoffice/docspace-react
# Or using yarn
yarn add @onlyoffice/docspace-react
```
```tsx
// Basic setup in your React application
import React from 'react';
import { DocSpace } from "@onlyoffice/docspace-react";
function App() {
return (
console.log("Ready"),
onAppError: (e) => console.error(e),
}
}}
/>
);
}
export default App;
```
--------------------------------
### Build and Start Storybook
Source: https://github.com/onlyoffice/docspace-react/blob/master/README.md
Commands to build and start the Storybook environment for the ONLYOFFICE DocSpace React component. These commands are used for developing and previewing UI components in isolation.
```bash
npm run build-storybook
```
```bash
npm run storybook
```
--------------------------------
### Initialize DocSpace Component with Callbacks
Source: https://context7.com/onlyoffice/docspace-react/llms.txt
Demonstrates the basic initialization of the DocSpace React component. It includes essential callbacks for when the application is ready, an error occurs, and to receive the SDK instance for advanced operations. This setup is crucial for integrating DocSpace into a React application.
```tsx
import React from 'react';
import { DocSpace } from "@onlyoffice/docspace-react";
import { SDKInstance } from "@onlyoffice/docspace-sdk-js/dist/types/instance";
function App() {
// Callback fired when DocSpace is fully loaded and ready
const onAppReady = (e: Event) => {
console.log("ONLYOFFICE DocSpace App is ready!");
};
// Callback fired when an error occurs during initialization
const onAppError = (e: Event) => {
console.error("DocSpace error:", e);
};
// Callback to receive the DocSpace SDK instance for advanced operations
const onSetDocspaceInstance = (instance: SDKInstance) => {
console.log("DocSpace instance received:", instance);
// Use instance methods: instance.getUserInfo(), instance.login(), instance.destroyFrame()
};
return (
);
}
export default App;
```
--------------------------------
### Create React App with ONLYOFFICE DocSpace
Source: https://github.com/onlyoffice/docspace-react/blob/master/README.md
Commands to create a new React project, navigate into it, and install the ONLYOFFICE DocSpace React component using npm. This sets up the basic project structure and dependencies.
```bash
npx create-react-app docspace-react-demo
cd docspace-react-demo
npm install --save @onlyoffice/docspace-react
```
--------------------------------
### Build React Application for Production
Source: https://github.com/onlyoffice/docspace-react/blob/master/README.md
Command to create a production build of the React application. This generates a 'build' directory containing static assets ready for deployment.
```bash
npm run build
```
--------------------------------
### Initialize DocSpace in System Mode for API Access in React
Source: https://context7.com/onlyoffice/docspace-react/llms.txt
Initializes DocSpace in system mode for background operations and API calls without displaying the full interface. This mode is useful for programmatic access to DocSpace features through the SDK instance. The `onSetDocspaceInstance` callback provides access to the SDK instance.
```tsx
import React from 'react';
import { DocSpace } from "@onlyoffice/docspace-react";
import { SDKInstance } from "@onlyoffice/docspace-sdk-js/dist/types/instance";
function SystemMode() {
const onSetDocspaceInstance = async (instance: SDKInstance) => {
// Access DocSpace API methods programmatically
const userInfo = await instance.getUserInfo();
console.log("Current user:", userInfo);
};
return (
);
}
export default SystemMode;
```
--------------------------------
### Configure DocSpace URL for Storybook
Source: https://github.com/onlyoffice/docspace-react/blob/master/README.md
Modify the .env file to set the DOCSPACE_URL for Storybook. This URL is essential for Storybook to correctly connect to the DocSpace instance.
```env
"DOCSPACE_URL": "https://example-onlyoffice.com/"
```
--------------------------------
### Integrate ONLYOFFICE DocSpace Component in React App
Source: https://github.com/onlyoffice/docspace-react/blob/master/README.md
Replaces the default App.js content with a React component that uses the DocSpace component from @onlyoffice/docspace-react. It configures the DocSpace URL, frame ID, mode, dimensions, and event handlers. Ensure to replace the placeholder URL with your actual DocSpace server address.
```javascript
import React, { useRef } from 'react';
import { DocSpace } from "@onlyoffice/docspace-react";
import SDKInstance from "@onlyoffice/docspace-sdk-js/dist/types/instance";
const onAppReady = function (e) {
console.log("ONLYOFFICE DocSpace App is ready!");
};
const onAppError = (e) => {
console.log(e);
}
const onSetDocspaceInstance = function (instance: SDKInstance) {
console.log(instance);
};
export default function App() {
return (
);
}
```
--------------------------------
### Display File Selector Interface in React
Source: https://context7.com/onlyoffice/docspace-react/llms.txt
Renders a file picker interface for selecting files from DocSpace. This component is ideal for implementing file selection workflows in your application. It requires the DocSpace component and basic configuration with the 'file-selector' mode.
```tsx
import React from 'react';
import { DocSpace } from "@onlyoffice/docspace-react";
function FilePicker() {
return (
console.log("File selector ready"),
onAppError: (e) => console.error("Error:", e),
}
}}
/>
);
}
export default FilePicker;
```
--------------------------------
### Authenticate DocSpace with Password Hash in React
Source: https://context7.com/onlyoffice/docspace-react/llms.txt
Enables automatic login to DocSpace using email and a password hash. The `onRequestPasswordHash` callback is invoked with the email to retrieve the password hash, and `onUnsuccessLogin` handles authentication failures. This requires providing email, `onRequestPasswordHash`, and `onUnsuccessLogin` props to the DocSpace component.
```tsx
import React from 'react';
import { DocSpace } from "@onlyoffice/docspace-react";
function AuthenticatedDocSpace() {
// Return the password hash for the given email
// In production, retrieve this securely from your backend
const onRequestPasswordHash = (email: string): string => {
// Password hash should be obtained securely from your authentication system
return "your-password-hash-here";
};
// Handle failed authentication attempts
const onUnsuccessLogin = () => {
alert("Login failed. Please check your credentials.");
// Redirect to login page or show authentication modal
};
return (
console.log("DocSpace ready"),
onAppError: (e) => console.error("Error:", e),
}
}}
email="user@example.com"
onRequestPasswordHash={onRequestPasswordHash}
onUnsuccessLogin={onUnsuccessLogin}
/>
);
}
export default AuthenticatedDocSpace;
```
--------------------------------
### Open Document in DocSpace Editor
Source: https://context7.com/onlyoffice/docspace-react/llms.txt
Integrates the ONLYOFFICE DocSpace editor to view or edit a specific document. This mode requires a file ID and enables collaborative editing features. It's suitable for direct document interaction within your React application.
```tsx
import React from 'react';
import { DocSpace } from "@onlyoffice/docspace-react";
function DocumentEditor() {
const fileId = 12345; // The DocSpace file ID to open
return (
console.log("Editor ready"),
onAppError: (e) => console.error("Editor error:", e),
}
}}
/>
);
}
export default DocumentEditor;
```
--------------------------------
### Display DocSpace File Manager
Source: https://context7.com/onlyoffice/docspace-react/llms.txt
Renders the full ONLYOFFICE DocSpace file manager interface. This mode allows users to navigate folders, perform file operations like upload, download, delete, and share, and manage rooms. It's the default mode for comprehensive document management.
```tsx
import React from 'react';
import { DocSpace } from "@onlyoffice/docspace-react";
function FileManager() {
return (
console.log("File manager ready"),
onAppError: (e) => console.error("Error:", e),
}
}}
/>
);
}
export default FileManager;
```
--------------------------------
### Display DocSpace Room Selector
Source: https://context7.com/onlyoffice/docspace-react/llms.txt
Renders an interface for selecting ONLYOFFICE DocSpace rooms. This component is useful for workflows that require users to choose a specific room for file operations or navigation within collaborative workspaces.
```tsx
import React from 'react';
import { DocSpace } from "@onlyoffice/docspace-react";
function RoomPicker() {
return (
console.log("Room selector ready"),
onAppError: (e) => console.error("Error:", e),
}
}}
/>
);
}
export default RoomPicker;
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.