https://github.com/mysbryce/fivem-nui-libs
A FiveM NUI Library created to make your code look easier and shorter. There are lots of ways to achieve the things you want. And I'm confident that my library will be even better than before.
https://github.com/mysbryce/fivem-nui-libs
fivem fivem-library fivem-script javascript-library
Last synced: 11 days ago
JSON representation
A FiveM NUI Library created to make your code look easier and shorter. There are lots of ways to achieve the things you want. And I'm confident that my library will be even better than before.
- Host: GitHub
- URL: https://github.com/mysbryce/fivem-nui-libs
- Owner: mysbryce
- Created: 2023-06-03T07:41:16.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2026-05-10T23:36:03.000Z (28 days ago)
- Last Synced: 2026-05-11T01:28:24.235Z (28 days ago)
- Topics: fivem, fivem-library, fivem-script, javascript-library
- Language: JavaScript
- Homepage: https://mysbryce.github.io/fivem-nui-libs/
- Size: 113 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔥 FIVEM-NUI-LIB (Open Source Project)
A FiveM NUI Library created to make your code look easier and shorter. There are lots of ways to achieve the things you want. And I'm confident that my library will be even better than before.
## Features
* **Real-time updates**
Are similar to those in React, where the component on the website is updated when a variable's value changes. Additionally, the state value can be used to show or hide elements in HTML.
* **Input Ref**
The state value is automatically updated based on the changes in the input text.
## Usage
##### Initialize
Create and add `script` tag and use type `module` in that
```html
// index.html
```
```javascript
// app.js
import {} from 'path/to/xnets.js';
```
##### Use a State
```javascript
// app.js
import { useState, addFunction } from 'path/to/xnets.js';
document.addEventListener('DOMContentLoaded', () => {
const [counter, setCounter] = useState(0, 'counter');
addFunction('addCount', () => setCounter(counter() + 1));
});
```
```html
// index.html
Add Count
```
##### Use a Input Ref
```javascript
// app.js
import { useState, addFunction } from 'path/to/xnets.js';
document.addEventListener('DOMContentLoaded', () => {
const [title, setTitle] = useState('', 'title');
addFunction('showTitle', () => alert(title()));
});
```
```html
// index.html
Show Title
```
##### Use a Element Show or Hide
```javascript
// app.js
import { useState, addFunction } from 'path/to/xnets.js';
document.addEventListener('DOMContentLoaded', () => {
const [active, setActive] = useState(1, 'active');
addFunction('setActive', (id) => setActive(id));
});
```
```html
// index.html
.hidden {
display: none;
}
.show {
display: block;
}
Display 1
Display 2
Display 3
Show 1
Show 2
Show 3
```
---
## Thanks you all!
Special thanks to all contributors and supporters that starred this repository.
**Our amazing contributors**
* Kittichai Malain (Frame) (Nervenetts)
* Woradorn Wimonchailerk (Noon) (Nova)
* Puriphong Chonanu (Ko) (Fagile)