This repo contains examples of importing Webix Complex Widgets into a React App.
By default, the demo shows how to initialize the File Manager and Spreadsheet, but it can be replaced with any of Webix Complex Widgets.
Complex widgets are PRO components.
By default, Webix, Spreadsheet, and File Manager are fetched from npm, so make sure you have signed in to our private @xbs scope.
Note: NPM always provides access to the latest versions of packages, so credentials are valid only while the license is active.
Alternatively, you can remove these dependencies, include the "codebase" of Webix/Complex widget to your project, and import files using custom path. This can be done for Trial package as well (check webix.com/download).
Webpack configuration and basic dependencies in package.json is the default outcome of the npm eject command. The initial project was bootstrapped with Create React App.
npm install
npm start
Open `http://localhost:3000` to view the demo in the browser.
Production build
To build the production version, run npm run build.
It will build the application for production to the build folder. After that your app is ready to be deployed.
Option 1: Global import (see the main branch)
The minimum requirements to init the Spreadsheet/File Manager in a React app are
- have a global Webix object (it should be available before the component's sources are imported).
Since there're two complex widgets in this demo, the global assignment was moved to
index.js. - import the widget from "@xbs/filemanager"`.
import * as webix from "@xbs/webix-pro";
window.webix = webix;this.uiContainer = React.createRef();
componentDidMount() {
webix.ready(() => {
require("@xbs/filemanager")
webix.ui({
view:"filemanager",
container: this.uiContainer.current,
});
})
}Option 2: ProvidePlugin (see the demo-provideplugin branch)
Another option is to use ProvidePlugin.
This is required if you want to initialize the File Manager as a Jet application (or other complex widgets that support this feature).
The Spreadsheet and Kanban will be initialized in the same way as in the 1st option.
In Webpack configuration, add
new webpack.ProvidePlugin({
webix: "@xbs/webix-pro",
}),So that the webix will be available in all modules.
componentDidMount(){
webix.ready(() => {
const fManager = require("@xbs/filemanager");
this.app = new fManager.App({
webix, // provide the global Webix scope
url: "https://docs.webix.com/filemanager-backend/",
});
this.app.render(this.uiContainer.current);
})
}If you use ESLint with the no-undef rule, you'll also need to extend these settings with the following statement, as ProvidePlugin allows to refer to a global value without importing/defining Webix in a module.
"globals": {
"webix": "readonly"
}
MIT