You can use dhtmlxVault in an application created with the React framework. Check the demo on Github.
Please note that the implementation provided below is not the only way to use dhtmlxVault in a React-based application. It gives you initial schema of the integration and implies further extension of the app functionality depending on your goals.
To add Vault sources into a React-based app you need to download the component package and unpack it into a folder of your project.
Then include vault.js and vault.css files into a page. Make sure that you set correct relative paths to these files:
The source files are represented in two versions: the full version and the minified one. Make sure that you set correct relative paths to these files:
index.html
// full version
<script type="text/javascript" src="codebase/vault.js"></script>
<link rel="stylesheet" href="codebase/vault.css">
// minified version
<script type="text/javascript" src="codebase/vault.min.js"></script>
<link rel="stylesheet" href="codebase/vault.min.css">
There are two possible scenarios of initializing Vault inside a React application. One consists in isolating Vault structure and data inside of the React component and another one suggests separating view and data parts with the possibility of interaction between them.
In this variant Vault configuration and data are held inside of the React component with no bonds with the external part of the application.
Vault.js
class VaultComponent extends Component {
render() {
return (
<div ref={el => this.el = el} className="widget-box"></div>
);
}
}
new Vault
constructor to initialize Vault in the container created above: Vault.js
class VaultComponent extends Component {
componentDidMount() {
this.vault = new Vault(this.el, {
mode:"grid",
});
}
}
Vault.js
class VaultComponent extends Component {
componentDidMount() {
this.vault = new Vault(this.el, {
mode:"grid",
});
this.vault.data.parse([
{ name:"myfile_12.png", size: 32420 },
{ name:"myfile_13.png", size: 55674 },
{ name:"myfile_14.png", size: 12440 },
{ name:"info.doc", size: 243441 },
]);
this.vault.toolbar.data.add({
value:"MyAction"
});
}
render() {
return (
<div ref={el => this.el = el} className="widget-box"></div>
);
}
}
This variant adds flexibility in the control over Vault data and configuration by allowing access to them from other parts of the application.
new Vault
constructor to initialize Vault.Vault2.js
class VaultComponent extends Component {
componentDidMount() {
this.vault = new Vault(this.el, {
// config here
});
}
}
class VaultComponent extends Component {
componentDidMount() {
this.vault = new Vault(this.el, {
data: this.props.data,
mode: this.props.mode,
uploader:{
autosend: this.props.autosend,
target: this.props.target
},
toolbar: this.props.toolbar
});
}
}
Thus the props configuration option will be applied to the Vault widget configuration.
Vault2.js
render() {
return (
<div ref={el => this.el = el} className="widget-box"></div>
);
}
Since the properties of Vault are exposed they are available to work with outside the component. In the example below the "grid" mode of rendering a list of files is enabled:
BasicSample.js
<div className='app-box'>
<Vault toolbar mode="grid"></Vault>
</div>
Work with data in this variant of using Vault in a React application can follow the MVVM pattern. Data collection represents Model and Vault represents View. Data collection and Vault are kept separately, and communicate with each other via particular links. Any changes made in the Model (Data collection) trigger corresponding changes in the View (Vault).
Usage of the MVVM pattern allows working with data outside Vault and all data-related manipulations can be moved to a separate file.
DataSample.js
class VaultComponent extends Component {
constructor(props) {
super(props);
this.files = new DataCollection();
}
}
DataSample.js
<Vault data={this.files} className='base-size'></Vault>
Due to data binding you can:
For example, by using the change event:
DataSample.js
class VaultComponent extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.files = new DataCollection();
this.files.events.on("change", () => {
this.setState({
count: this.files.getLength()
});
});
}
}
For example, you can add files into the Vault and clear the list by clicking the bound buttons. In the example below buttons are subscribed to the onClick event:
DataSample.js
class VaultComponent extends Component {
constructor(props) {
super(props);
this.files = new DataCollection();
}
render() {
return (
<div className='app-box'>
<div className='line'>
<input type="button" onClick={this.add} value="Add a file" />
<input type="button" onClick={this.clear} value="Clear all" />
</div>
</div>
);
}
add = () => {
this.files.add({ name:"myfile.png", size:24560 });
}
clear = () => {
this.files.removeAll()
}
}
A click on the "Add a file" button adds a file into the Vault and a click on the "Clear all" button cleans the list of files, as it's defined by the related methods.
Back to top