📦 - Package release 1.0.0

.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependency directories
+node_modules
+package-lock.json
+
+# # Generated output
+# dist
+# dist-ssr
+
+# Local files
+*.local
+
+# Editor directories and files
+.vscode
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Svnrnns
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,76 @@
+# Mitt React
+
+`mitt-react` is a lightweight utility for integrating the mitt event emitter with React functional components. It provides hooks for listening to and emitting events in a React-friendly way. <br />
+
+In more detail, this package offers a hook that automatically handles event subscription and unsubscription using the `useEffect` hook. This simplifies the process of managing event listeners in React components, ensuring they are properly set up and cleaned up to avoid memory leaks.
+
+## Installation
+
+```bash
+npm install mitt-react
+```
+
+## Usage
+
+### useEventListener (hook)
+
+The `useEventListener` hook allows you to listen to custom events in your React components.
+
+```jsx
+import React, { useState } from 'react';
+import { useEventListener } from 'mitt-react';
+
+const MyComponent = () => {
+  const [message, setMessage] = useState('');
+
+  useEventListener('customEvent', (data) => {
+    setMessage(data);
+  });
+
+  return (
+    <div>
+      <p>{message}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+### eventEmit (function)
+
+The `eventEmit` function allows you to emit custom events.
+
+```jsx
+import React from 'react';
+import { eventEmit } from 'mitt-react';
+
+const MyEmitterComponent = () => {
+  const handleClick = () => {
+    eventEmit('customEvent', 'Hello, World!');
+  };
+
+  return <button onClick={handleClick}>Emit Event</button>;
+};
+
+export default MyEmitterComponent;
+```
+
+## API
+
+### useEventListener
+
+A hook to listen for a custom event.
+
+| Param     | Type   | Nullable | Desc                                |
+| --------- | ------ | -------- | ----------------------------------- |
+| eventName | string | &cross;  | The name of the event to listen for |
+| eventName | string | &cross;  | The name of the event to listen for |
+
+eventName: The name of the event to listen for.
+handler: The function to call when the event is emitted.
+eventEmit(eventName: string, data: any)
+A function to emit a custom event.
+
+eventName: The name of the event to emit.
+data: The data to pass to the event handler.

dist/mitt-react.es.js

@@ -0,0 +1,31 @@
+import { useCallback as c, useEffect as u } from "react";
+function r(t) {
+  return { all: t = t || /* @__PURE__ */ new Map(), on: function(i, e) {
+    var n = t.get(i);
+    n ? n.push(e) : t.set(i, [e]);
+  }, off: function(i, e) {
+    var n = t.get(i);
+    n && (e ? n.splice(n.indexOf(e) >>> 0, 1) : t.set(i, []));
+  }, emit: function(i, e) {
+    var n = t.get(i);
+    n && n.slice().map(function(o) {
+      o(e);
+    }), (n = t.get("*")) && n.slice().map(function(o) {
+      o(i, e);
+    });
+  } };
+}
+const f = r();
+function m(t, i) {
+  const e = c(i, [i]);
+  u(() => (f.on(t, e), () => {
+    f.off(t, e);
+  }), [t, e]);
+}
+function a(t, i) {
+  f.emit(t, i);
+}
+export {
+  a as eventEmit,
+  m as useEventListener
+};

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "mitt-react",
+  "private": false,
+  "version": "1.0.0",
+  "description": "Lightweight utility for integrating mitt with React",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/mitt-react.umd.js",
+  "module": "./dist/mitt-react.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/mitt-react.es.js",
+      "require": "./dist/mitt-react.umd.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/svnrnns/mitt-react"
+  },
+  "keywords": [
+    "react",
+    "react-hooks",
+    "event-emitter",
+    "mitt",
+    "event-management",
+    "react-events",
+    "event-subscription",
+    "event-handling",
+    "react-functional-components",
+    "mitt-integration",
+    "event-listener-hook",
+    "react-utility",
+    "react-event-emitter",
+    "event-emitters-in-react",
+    "react-hook-for-events",
+    "event-management-library"
+  ],
+  "bugs": {
+    "url": "https://github.com/svnrnns/mitt-react/issues"
+  },
+  "homepage": "https://github.com/svnrnns/mitt-react",
+  "author": "seven rings (https://twitter.com/svnrnns)",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "mitt": "^3.0.1",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "vite": "^5.2.11"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.9.5"
+  }
+}

src/emitter.js

@@ -0,0 +1,4 @@
+import mitt from 'mitt';
+
+const emitter = mitt();
+export default emitter;

src/eventEmit.js

@@ -0,0 +1,5 @@
+import emitter from './emitter';
+
+export function eventEmit(eventName, data) {
+  emitter.emit(eventName, data);
+}

src/index.js

@@ -0,0 +1,2 @@
+export { useEventListener } from './useEventListener';
+export { eventEmit } from './eventEmit';

src/useEventListener.js

@@ -0,0 +1,13 @@
+import emitter from './emitter';
+import { useEffect, useCallback } from 'react';
+
+export function useEventListener(eventName, handler) {
+  const memoizedHandler = useCallback(handler, [handler]);
+
+  useEffect(() => {
+    emitter.on(eventName, memoizedHandler);
+    return () => {
+      emitter.off(eventName, memoizedHandler);
+    };
+  }, [eventName, memoizedHandler]);
+}

vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+const packagename = 'mitt-react';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.js'),
+      name: packagename,
+      fileName: (format) => `${packagename}.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+  plugins: [react()],
+});