@nodecg/react-hooks

@nodecg/react-hooks

This package is a collection custom hooks of React Hooks for NodeCG API.

🚨 This package is in alpha state. But feel free to try out and file an issue for suggestion/bugs!

Install

npm install @nodecg/react-hooks
# or
yarn add @nodecg/react-hooks
# or
pnpm add @nodecg/react-hooks

About 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 of sharing code between components, introduced in version 16.8.

Please read the documentation of React Hooks thoroughly before using them.

• Video introduction
• The Motivation
• Rules
• Hooks API reference
• FAQ

It also helps to learn the background mechanism of React Hooks. React hooks: not magic, just arrays

Recommendation

Use eslint-plugin-react-hooks in your project. It is 100% smarter than you to detect violation of the Rules of Hooks.

Usage

useReplicant

• 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 changes
export function RunnerName() {
  const [count, setCount] = useReplicant("counter");
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)} />
    </div>
  );
}

useListenFor

• 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 server
export function AlertOnMessage() {
  const [showAlert, setShowAlert] = useState(false);
  useListenFor("errorHappened", () => {
    setShowAlert(true);
  });
  useEffect(() => {
    if (!showAlert) {
      return;
    }
    // Disappear alert 1 second after
    const timer = setTimeout(() => {
      setShowAlert(false);
    }, 1000);
    // Make sure to return cleanup function
    return () => {
      clearTimeout(timer);
    };
  }, [showAlert]);

  return <Modal show={showAlert} />;
}

License

MIT © Keiichiro Amemiya (Hoishin)