# 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

```tsx
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

```tsx
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 tab`https://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.
