first commit

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/workflows/main.yml

@@ -0,0 +1,31 @@
+name: CI
+on:
+  push:
+    branches:
+      - "**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Action Setup
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Setup NodeJs
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Setup Pnpm
+        run: npm install -g pnpm
+
+      - name: Installing Dependencies
+        run: pnpm install
+
+      - name: Linting
+        run: pnpm run lint

.github/workflows/publish.yml

@@ -0,0 +1,41 @@
+name: Publish
+on:
+  push:
+    branches:
+      - "main"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Action Setup
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Setup NodeJs
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Setup Pnpm
+        run: npm install -g pnpm
+
+      - name: Installing Dependencies
+        run: pnpm install
+
+      - name: Linting
+        run: pnpm run lint
+
+      - name: Building
+        run: pnpm run build
+
+      - name: Publishing
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: pnpm changeset publish

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.npmignore

@@ -0,0 +1,8 @@
+.changeset
+.github
+node_modules
+src
+
+.env
+.gitignore
+tsconfig.json

.nvmrc

@@ -0,0 +1 @@
+v18.16.1

README.md

@@ -0,0 +1,100 @@
+# React Hook Bag
+
+![ReactJs](https://img.shields.io/badge/lanugage-React.Js-blue.svg)
+![License](https://img.shields.io/badge/license-MIT-blue.svg)
+
+`React Hook Bag` is a npm package for useful react hooks. It has many commonly used hooks.
+
+## Features
+
+- **useOutsideClick:** Click outside on an element.
+- **useRefsExtractor:** Extract values of some refs as object.
+
+## Get started
+Add this package to your project.
+
+```bash
+pnpm install react-hook-bag
+```
+
+## Examples
+
+### useOutsideClick
+
+```tsx
+"use client";
+import React, { useRef, useState } from "react";
+import { useOutsideClick } from "react-hook-bag";
+
+export default function App() {
+  const [isOpen, setIsOpen] = useState(false);
+  const modal = useRef(null);
+
+  const handleClick = () => setIsOpen((pre) => !pre);
+
+  useOutsideClick([modal], isOpen, handleClick);
+
+  return (
+    <div className="container">
+      {isOpen ? (
+        <div className="modal" ref={modal}>
+          <div className="user">
+            <h2 className="userName">Example</h2>
+            <img className="userImage" src="/user-img.jpg" />
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
+      <button className="button" onClick={handleClick}>
+        Show User
+      </button>
+    </div>
+  );
+}
+```
+
+### useRefsExtractor
+
+```tsx
+"use client";
+import React, { useRef } from "react";
+import { useRefsExtractor } from "react-hook-bag";
+
+export default function App() {
+  const refs = {
+    name: useRef({} as HTMLInputElement),
+    about: useRef({} as HTMLTextAreaElement)
+  }
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+
+    const data = useRefsExtractor(refs, (ref) => ref.current?.value);
+    console.log(data);
+  }  
+
+  return (
+    <div className="container">
+      <form onSubmit={handleSubmit}>
+        <input type="text" ref={refs.name}/>
+        <textarea ref={refs.about}></textarea>
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  );
+}
+```
+
+
+## Contributing
+
+Contributions are welcome! I would like you to contribute in this project.
+
+## Roadmap
+
+This project is in its early stages, and there are many missing features that need implementation. Check the [Issues](https://github.com/mdmahikaishar/react-hook-bag/issues) section for a list of features, enhancements, and bug fixes that are planned.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](https://github.com/mdmahikaishar/react-hook-bag/LICENSE.md) file for details.

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-hook-bag",
+  "version": "0.1.0",
+  "description": "A npm package for useful react hooks. It has many commonly used hooks.",
+  "author": "mdmahikaishar <[email protected]>",
+  "license": "MIT",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/cjs/index.d.ts",
+  "module": "./dist/mjs/index.js",
+  "scripts": {
+    "lint": "tsc --noEmit",
+    "build": "pnpm run build:cjs && pnpm run build:mjs",
+    "build:cjs": "tsc --outDir ./dist/cjs --module commonjs",
+    "build:mjs": "tsc --outDir ./dist/mjs --module es6"
+  },
+  "exports": {
+    ".": [
+      {
+        "types": "./dist/cjs/index.d.ts",
+        "import": "./dist/mjs/index.js",
+        "require": "./dist/cjs/index.js",
+        "default": "./dist/cjs/index.js"
+      }
+    ]
+  },
+  "files": [
+    "dist/cjs",
+    "dist/mjs"
+  ],
+  "keywords": [
+    "react-house",
+    "react-hooks",
+    "use-hooks"
+  ],
+  "peerDependencies": {
+    "react": "^18"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "tslib": "^2",
+    "typescript": "^5"
+  }
+}