react-fivem-hooks
v1.0.4
Published
Essential React hooks for FiveM NUI development written in Typescript
Downloads
77
Readme
React FiveM Hooks
Essential React hooks for FiveM NUI development written in Typescript
Install the package
yarn add react-fivem-hooks
Wrap the component in the provider
import { NuiProvider } from 'react-fivem-hooks';
ReactDOM.render(
<NuiProvider>
<App />
</NuiProvider>,
document.getElementById('root')
);
useNuiEvent
import { useNuiEvent } from 'react-fivem-hooks';
export const Component = () => {
const { data: isOpen } = useNuiEvent<boolean>({ event: 'SET_NUI_OPEN' });
return (
<div>
<span>{isOpen ? 'Profit.' : 'Closed.'}</span>
</div>
);
}
Send the event (Browser console)
// Should display "Profit."
window.postMessage({ type: 'SET_NUI_OPEN', payload: true });
// Should display "Closed."
window.postMessage({ type: 'SET_NUI_OPEN', payload: false });
useDisableControls (Disable input movement)
Generic hook to disable movement in FiveM when typing inside a input field.
Note: This feature requires the nui-controls
library to be used on the client.
import { useDisableControls } from 'react-fivem-hooks';
export const Component = () => {
const { controls } = useDisableControls();
return (
<div>
<input placeholder="Yay, I don't move" {...controls} />
</div>
);
}
nui-controls (lua client library)
This is a resource included in this repository which you can utilise to easily disable controls when using input fields in your NUI.
- Download
nui-controls
from this repository. - Put it in your server folder.
- Add it to the resource you want to use the
useDisableControls
-hook like this:
client_scripts {
'@nui-controls/client.lua',
'...',
}
- Now you can utilise
useDisableControls
in your NUI.
Disclaimer
"react-fivem-hooks" are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the FiveM™ trademark, or any of its subsidiaries or its affiliates. The official FiveM™ website can be found at https://fivem.net/