A React wrapper for FiveM that enables development without building, with support for external URLs.
Note: This wrapper is intended for development only and is not recommended for production use.
- Run React UI in FiveM without building every change.
- Supports external URLs, not limited to localhost.
- Automatically queues messages until the iframe is ready.
Just include the wrapper in your HTML using a <script> tag:
<script
src="https://cdn.jsdelivr.net/gh/alvarilloo/fivem-react-wrapper@main/wrapper.js"
data-react-url="https://your-domain-here.com">
</script>The wrapper automatically creates an iframe pointing to the URL specified in data-react-url.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FiveM React Wrapper Example</title>
</head>
<body>
<!-- Load the wrapper script -->
<script
src="https://cdn.jsdelivr.net/gh/alvarilloo/fivem-react-wrapper@main/wrapper.js"
data-react-url="https://your-domain-here.com">
</script>
</body>
</html>- Messages sent to
windoware queued until the iframe is ready. - The console will show which URL the wrapper is loading:
[wrapper] Loading UI from: https://your-domain-here.com
You can use it in development or production by simply changing the data-react-url:
<script
src="https://cdn.jsdelivr.net/gh/alvarilloo/fivem-react-wrapper@main/wrapper.js"
data-react-url="https://your-domain-here.com"Also works for localhost development:
<script
src="https://cdn.jsdelivr.net/gh/alvarilloo/fivem-react-wrapper@main/wrapper.js"
data-react-url="http://localhost:3000">
</script>