{"id":50276993,"url":"https://github.com/mysbryce/fivem-nui-libs","last_synced_at":"2026-05-27T21:03:34.623Z","repository":{"id":172168944,"uuid":"648918573","full_name":"mysbryce/fivem-nui-libs","owner":"mysbryce","description":"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.","archived":false,"fork":false,"pushed_at":"2026-05-10T23:36:03.000Z","size":116,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-11T01:28:24.235Z","etag":null,"topics":["fivem","fivem-library","fivem-script","javascript-library"],"latest_commit_sha":null,"homepage":"https://mysbryce.github.io/fivem-nui-libs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mysbryce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-03T07:41:16.000Z","updated_at":"2026-05-10T23:36:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"18a53a1b-3629-4260-9337-cad9970f7e79","html_url":"https://github.com/mysbryce/fivem-nui-libs","commit_stats":null,"previous_names":["itsbrycex0/fivem-nui-libs","mysbryce/fivem-nui-libs"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mysbryce/fivem-nui-libs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mysbryce%2Ffivem-nui-libs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mysbryce%2Ffivem-nui-libs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mysbryce%2Ffivem-nui-libs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mysbryce%2Ffivem-nui-libs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mysbryce","download_url":"https://codeload.github.com/mysbryce/fivem-nui-libs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mysbryce%2Ffivem-nui-libs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33583399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-27T02:00:06.184Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fivem","fivem-library","fivem-script","javascript-library"],"created_at":"2026-05-27T21:03:31.820Z","updated_at":"2026-05-27T21:03:34.617Z","avatar_url":"https://github.com/mysbryce.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔥 FIVEM-NUI-LIB (Open Source Project)\n\nA 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.\n\n## Features\n\n* **Real-time updates**\n  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.\n* **Input Ref**\n  The state value is automatically updated based on the changes in the input text.\n\n## Usage\n\n##### Initialize\n\nCreate and add `script` tag and use type `module` in that\n\n```html\n// index.html\n\n\u003cscript src=\"app.js\" type=\"module\"\u003e\u003c/script\u003e\n```\n\n```javascript\n// app.js\n\nimport {} from 'path/to/xnets.js';\n```\n\n##### Use a State\n\n```javascript\n// app.js\n\nimport { useState, addFunction } from 'path/to/xnets.js';\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n    \tconst [counter, setCounter] = useState(0, 'counter');\n\taddFunction('addCount', () =\u003e setCounter(counter() + 1));\n});\n```\n\n```html\n// index.html\n\n\u003cspan data-xnets=\"counter\"\u003e\u003c/span\u003e\n\u003cbutton type=\"button\" data-xnets-click=\"addCount()\"\u003eAdd Count\u003c/button\u003e\n```\n\n##### Use a Input Ref\n\n```javascript\n// app.js\n\nimport { useState, addFunction } from 'path/to/xnets.js';\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n    \tconst [title, setTitle] = useState('', 'title');\n\taddFunction('showTitle', () =\u003e alert(title()));\n});\n```\n\n```html\n// index.html\n\n\u003cinput type=\"text\" data-xnets-ref=\"title\"\u003e\n\u003cbutton type=\"button\" data-xnets-click=\"showTitle()\"\u003eShow Title\u003c/button\u003e\n```\n\n##### Use a Element Show or Hide\n\n```javascript\n// app.js\n\nimport { useState, addFunction } from 'path/to/xnets.js';\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n    const [active, setActive] = useState(1, 'active');\n\n    addFunction('setActive', (id) =\u003e setActive(id));\n});\n```\n\n```html\n// index.html\n\n\u003cstyle\u003e\n    .hidden {\n        display: none;\n    }\n\n    .show {\n        display: block;\n    }\n\u003c/style\u003e\n\n\u003cdiv show-on=\"active equal 1\" show-class=\"show\" hide-class=\"hidden\"\u003eDisplay 1\u003c/div\u003e\n\u003cdiv show-on=\"active equal 2\" show-class=\"show\" hide-class=\"hidden\"\u003eDisplay 2\u003c/div\u003e\n\u003cdiv show-on=\"active equal 3\" show-class=\"show\" hide-class=\"hidden\"\u003eDisplay 3\u003c/div\u003e\n\n\u003cbutton type=\"button\" data-xnets-click=\"setActive(1)\"\u003eShow 1\u003c/button\u003e\n\u003cbutton type=\"button\" data-xnets-click=\"setActive(2)\"\u003eShow 2\u003c/button\u003e\n\u003cbutton type=\"button\" data-xnets-click=\"setActive(3)\"\u003eShow 3\u003c/button\u003e\n```\n\n---\n\n## Thanks you all!\n\nSpecial thanks to all contributors and supporters that starred this repository.\n\n**Our amazing contributors**\n\n* Kittichai Malain (Frame) (Nervenetts)\n* Woradorn Wimonchailerk (Noon) (Nova)\n* Puriphong Chonanu (Ko) (Fagile)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmysbryce%2Ffivem-nui-libs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmysbryce%2Ffivem-nui-libs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmysbryce%2Ffivem-nui-libs/lists"}