- Notifications
You must be signed in to change notification settings - Fork12
React Custom Hooks for NodeCG
License
nodecg/react-hooks
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This package is a collection custom hooks ofReact Hooks for NodeCG API.
🚨 This package is in alpha state. But feel free to try out and file an issue for suggestion/bugs!
npm install @nodecg/react-hooks# oryarn add @nodecg/react-hooks# orpnpm add @nodecg/react-hooks
(This section comes from when React hooks was just introduced as an alpha feature, but is still useful to keep as an introduction.)
The React Hooks are a new way ofsharing code between components, introduced in version 16.8.
Please read the documentation of React Hooks thoroughly before using them.
It also helps to learn the background mechanism of React Hooks.React hooks: not magic, just arrays
Useeslint-plugin-react-hooks in your project. It is 100% smarter than you to detect violation of the Rules of Hooks.
- Subscribes to specified replicant and returns the value as state.
- Allows you to use replicant values in function component.
import{useReplicant}from"@nodecg/react-hooks";// This component will re-render when the `counter replicant value changesexportfunctionRunnerName(){const[count,setCount]=useReplicant("counter");return(<div><div>{count}</div><buttononClick={()=>setCount(count+1)}/></div>);}
- Subscribes messages with
listenFor, and unlistens on unmount. - Combining with other hooks enables powerful stateful features with function component
import{useListenFor}from"@nodecg/react-hooks";// Shows modal for 1 second when NodeCG receives 'errorHappened' message from the serverexportfunctionAlertOnMessage(){const[showAlert,setShowAlert]=useState(false);useListenFor("errorHappened",()=>{setShowAlert(true);});useEffect(()=>{if(!showAlert){return;}// Disappear alert 1 second afterconsttimer=setTimeout(()=>{setShowAlert(false);},1000);// Make sure to return cleanup functionreturn()=>{clearTimeout(timer);};},[showAlert]);return<Modalshow={showAlert}/>;}
MIT © Keiichiro Amemiya (Hoishin)
About
React Custom Hooks for NodeCG
Topics
Resources
License
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors7
Uh oh!
There was an error while loading.Please reload this page.