Link

Overview

The Link component is a specialized button element designed for opening external links in FiveM scripts. It extends standard button properties and functions similarly to the openUrl utility but in a more concise and reusable manner. This component is particularly useful for navigation elements such as store links, donation pages, or forums, allowing for a seamless user experience without disrupting gameplay.

This component use openUrl utility

Usage

Importing the Component

import { Link } from "@yankes/fivem-react/components";

Props

The component is a forwardRef implementation for a button element, meaning it inherits all the properties of a button along with the additional props specified in the table below.

Prop	Type	Description
href	string	URL where user will be redirected after click.

Example

import { Link } from "@yankes/fivem-react/components";

export const MyComponent = () => {
    return (
        <Link href="https://tebex.io">
            Our store
        </Link>
    )
}

How It Works

This works exactly like using openUrl utility, but in component there is shorter implementation.

Notes

• The Link component is a forwardRef implementation of a button element, meaning it behaves like a button while supporting additional properties.

• It inherits all standard button properties and provides a simple way to open external URLs.

• The component works similarly to the openUrl utility but offers a more concise and component-based implementation.

• It is useful for creating navigation elements in FiveM React projects without manually handling event listeners.

Conclusion

• The Link component provides a streamlined way to open external URLs within a FiveM React project. By leveraging a component-based approach, it simplifies implementation while maintaining flexibility. This makes it a convenient alternative to manually calling openUrl, ensuring cleaner and more maintainable code.