Tatanation React useMQTT Hook (｡🇯‌🇸‌)

📦 NPM Package: tatanation-react-use-mqtt

📌 Introduction

tatanation-react-use-mqtt is a lightweight, flexible React hook for managing MQTT subscriptions with ease. It allows you to efficiently subscribe to topics, handle messages, and manage connections.

✨ Features

• 📡 Subscribe to MQTT topics easily
• 🔄 Automatic reconnection handling
• 🎯 Customizable connection setup
• ⚡ Optimized React state management (almost stateless!)
• 🛠️ Logging control (that you can disable logs when needed)
• ⚛️ Support React's Older Versions (React 16.8.0 and above are supported!)
• TS Typesafe Guarantee (TypeScript is supported!)

🚀 Installation

npm install tatanation-react-use-mqtt
# or
yarn add tatanation-react-use-mqtt

🛠️ Usage

import { useMQTT, defineMQTTClientConnection } from "tatanation-react-use-mqtt";

const mqttConfig = defineMQTTClientConnection({
  host: "your-mqtt-broker.com",
  port: 9001,
  protocol: "ws",
  disableLogs: false,
});

const MyComponent = () => {
  const { error, retrySubscribe } = useMQTT("your/topic", (message) => {
    console.log("Received MQTT message:", message);
  });

  return (
    <div>
      {error ? <p>Error: {error.message}</p> : <p>Connected to MQTT!</p>}
      <button onClick={retrySubscribe}>Retry</button>
    </div>
  );
};

📝 Configuration Options

Option	Type	Default	Description
host	string	-	MQTT broker URL
port	number	-	MQTT port number
protocol	string	"ws"	MQTT connection protocol
disableLogs	boolean	false	Disables all logs

🤝 Contributing

Feel free to submit issues or pull requests to improve this package!

---

🔥 Tatanation React useMQTT Hook – Simple. Efficient. Reliable.