https://github.com/antonstjernquist/react-fivem-hooks
Essential React hooks for FiveM NUI development written in Typescript
https://github.com/antonstjernquist/react-fivem-hooks
fivem fivem-script hook react reactjs typescript
Last synced: 10 months ago
JSON representation
Essential React hooks for FiveM NUI development written in Typescript
- Host: GitHub
- URL: https://github.com/antonstjernquist/react-fivem-hooks
- Owner: antonstjernquist
- Created: 2021-05-31T10:26:07.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-20T19:57:05.000Z (over 1 year ago)
- Last Synced: 2025-04-03T21:51:11.791Z (10 months ago)
- Topics: fivem, fivem-script, hook, react, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 143 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/antonstjernquist) [](https://github.com/antonstjernquist/react-fivem-hooks/actions/workflows/publish.yml) [](https://www.npmjs.com/package/react-fivem-hooks) [](https://www.npmjs.com/package/react-fivem-hooks)
# 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
```Typescript
import { NuiProvider } from 'react-fivem-hooks';
ReactDOM.render(
,
document.getElementById('root')
);
```
## useNuiEvent
```Typescript
import { useNuiEvent } from 'react-fivem-hooks';
export const Component = () => {
const { data: isOpen } = useNuiEvent({ event: 'SET_NUI_OPEN' });
return (
{isOpen ? 'Profit.' : 'Closed.'}
);
}
```
## Send the event (Browser console)
```Javascript
// 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.
```Typescript
import { useDisableControls } from 'react-fivem-hooks';
export const Component = () => {
const { controls } = useDisableControls();
return (
);
}
```
## 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.
1. Download `nui-controls` from this repository.
2. Put it in your server folder.
3. Add it to the resource you want to use the `useDisableControls`-hook like this:
```LUA
client_scripts {
'@nui-controls/client.lua',
'...',
}
```
4. 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/