Overextended
Ox Lib

Ox Lib

A standalone library for providing easily reusable code as importable modules and exports.

Github
Releases

Installation

We strongly recommend referring to Guides for setting up Git, Node.js, and pnpm.

Download a release (opens in a new tab) or build the source code.

git clone https://github.com/overextended/ox_lib.git
cd ox_lib/web
pnpm i
pnpm build

Config

Resource configuration is handled using convars (opens in a new tab).

# https://v6.mantine.dev/theming/colors/#default-colors
setr ox:primaryColor blue
setr ox:primaryShade 8
setr ox:userLocales 1 # Allow users to select their locales using /ox_lib

You'll also need to grant ace permissions to the resource.

add_ace resource.ox_lib command.add_ace allow
add_ace resource.ox_lib command.remove_ace allow
add_ace resource.ox_lib command.add_principal allow
add_ace resource.ox_lib command.remove_principal allow

Usage

To enable the library inside of your resource just add @ox_lib/init.lua as a shared_script in your fxmanifest.lua file.

shared_scripts {
    '@ox_lib/init.lua',
}

Or if the library is the only shared script you use you can do:

shared_script '@ox_lib/init.lua'

You can specify modules to import from inside your fxmanifest.lua, or load them dynamically.

ox_libs {
    'locale',
    'math',
    'table',
}

When ox_lib has been imported into your script, it will make several new globals available:

  • lib for dynamically importing ox_lib modules into your script.
  • require for importing modules from your own script.
  • cache see here.

You can now use the library functions inside of your resource, check the rest of the documentation to see how to utilise them.

Using icons for interface functions

The icon library used is Font Awesome 6.0, if for the icon you define only a string the default icon type will be solid.
If you want to use a different icon type, i.e apple as a brand, you need to define icon as a table (array) with the first value being the icon type (fas, far, fab) as a string, and the second being the icon name.

icon = {'fab', 'apple'}

Building the UI

If you wish to edit any of the UI elements you will need to download the source code, edit what you need and then compile it.

⚠️

DO NOT de-bundle and un-minify the release CSS and JS files to edit them.

Requirements:

Installing Node.js:

  • Download the LTS version of Node.js.
  • Go through the install and make sure you install all of the features.
  • Run node --version in cmd and make sure that it gives you the version number. If it doesn't then you didn't install it correctly.

Installing pnpm:

  • After installing NodeJS you can install pnpm by running npm install -g pnpm.

Building the UI:

  • cd into the web directory.
  • run pnpm i to install the dependencies.
  • run pnpm build to build the source files.

When working in the browser you can run pnpm start, which supports hot reloads meaning that you will see your changes after saving your file.

If you want to work in game you can run pnpm start:game which writes changes to disk, so the only thing you have to do is restart the resource for it take affect.

updateInterface