NssUiApi basics
This directory contains the UI components for the NSS libraries.
Simple: ES6 module import
In this example we import the NssAudio component directly via ES6 module import.
import {NssAudio} from "nui://nss_libs/ui/NssAudio/NssAudio.js";
This is the easiest way to import a component.
Load components via api
Alternatively you can load ui components via the NssUiApi
component. This enables you to load multiple ui components at once, waiting for all components to be loaded and/or loading components dynamically.
import {NssUiApi} from "nui://nss_libs/ui/NssUiApi.js";
/**
* @type {NssUiApi}
*/
const nss_ui_api = new NssUiApi('[YOUR_RESCOURCE_NAME]');
const component_names = [
NssUiApi.NssResponsive,
NssUiApi.NssSvgReplacer,
NssUiApi.NssTextBox
];
nss_ui_api.load(component_names).then((components) => {
new components.NssResponsive();
new components.NssSvgReplacer();
// Do your stuff here...
});
Alternative for local development
Only for developers who want to test the components locally in the browser (e.g. Chrome) without running a REDM server.
Create a file called
nss_ui_api.js
into the root of your html script folder. This file will be a wrapper to decide automatically if the CFX browser is available (we are in a RedM client) or not (we are in a normal browser).Add the following code to the wrapper file:
// noinspection JSFileReferences const is_cfx_browser = navigator.userAgent.indexOf("CitizenFX") > -1; let imp_obj; if (is_cfx_browser) { imp_obj = await import("nui://nss_libs/ui/NssUiApi.js"); } else { // Adapt relative path to your needs, please if you want to use it locally in your web browser. imp_obj = await import("../../../../../[nss]/nss_libs/ui/NssUiApi.js"); } const NssUiApi = imp_obj.NssUiApi; export {NssUiApi};
Replace all
[YOUR_RELATIVE_PATH_TO]
placeholders with the relative paths to thenss_libs
folder.Go into your main javascript file (e.g.
app.js
orindex.js
) and add the following code to import theNssUiApi
:import {NssUiApi} from "./nss_ui_api.js"; /** * @type {NssUiApi} */ const nss_ui_api = new NssUiApi('[YOUR_RESCOURCE_NAME]'); const component_names = [ nss_ui_api.NssResponsive, nss_ui_api.NssSvgReplacer, nss_ui_api.NssTextBox ]; nss_ui_api.load(component_names).then((components) => { new components.NssResponsive(); new components.NssSvgReplacer(); // Do your stuff here... });
Replace the placeholders with the related values.
[YOUR_RESCOURCE_NAME]
is the name of your resource.
Last updated
Was this helpful?