openUrl

Overview

The openUrl utility is a FiveM-specific function that opens a given URL in the user's default web browser. It utilizes FiveM's invokeNative method to handle external navigation seamlessly. By extending the Window interface with declare global, it ensures TypeScript compatibility. This utility is lightweight, requiring no additional dependencies, and provides a simple way to redirect users to external resources like donation pages, forums, or store links without disrupting their in-game experience.

Usage

Importing the Utility

import { openUrl } from "@yankes/fivem-react/utils";

Parameters

Parameter	Type	Description
url	string	Url that will be open after invoke function

Return Value

This utility doesn't return any value (void function)

Example

import { openUrl } from "@yankes/fivem-react/utils";

export const MyComponent = () => {
    const onClick = () => openUrl("https://tebex.io");

    return (
        <button
            onClick={onClick}
        >
            Our Store
        </button>
    )
}

How It Works

1. The openUrl function is imported into the component.

2. A button is created with an onClick event handler.

3. When the button is clicked, the onClick function executes openUrl("https://tebex.io").

4. This opens browser with new tabhttps://tebex.io, allowing users to navigate to the store seamlessly.

Notes

• The declare global block extends the Window interface to recognize invokeNative, ensuring TypeScript compatibility.

• The openUrl function takes a URL as an argument and calls window.invokeNative("openUrl", url).

• This triggers FiveM to open the specified link in the user's default web browser.

• The function relies on FiveM's built-in invokeNative method, making it an efficient way to handle external link navigation.

• No additional dependencies are required for this functionality.

Conclusion

The openUrl utility is a simple yet effective function for opening external links in a FiveM script built with React. When triggered, it seamlessly opens the specified URL in the user's default browser, ensuring a smooth and intuitive experience. This is particularly useful for directing players to external resources like donation pages, forums, or store links without disrupting their in-game experience.