feat: initial Release

BREAKING CHANGE: Initial Release

.github/workflows/ci.yml

@@ -13,21 +13,21 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        node-version: [14.x]
+        node-version: [20.x]
 
     runs-on: ${{ matrix.os }}
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
       - name: Cache ~/.pnpm-store
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         env:
           cache-name: cache-pnpm-store
         with:
@@ -53,12 +53,12 @@ jobs:
     needs: ["test"]
     if: "!contains(github.event.head_commit.message, 'skip-release') && !contains(github.event.head_commit.message, 'skip-ci') && github.event_name != 'pull_request'"
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - name: Cache ~/.pnpm-store
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         env:
           cache-name: cache-pnpm-store
         with:
@@ -70,7 +70,7 @@ jobs:
             ${{ runner.os }}-
       - run: npm i -g pnpm
       - run: pnpm i
-      - run: pnpm dlx semantic-release@20 --branches main
+      - run: pnpm dlx semantic-release@21.0.2 --branches main
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -1,35 +1,59 @@
-**💛 You can help the author become a full-time open-source maintainer by [sponsoring him on GitHub](https://github.com/sponsors/egoist).**
+# react-stay-at-bottom
 
----
+A React hook that keeps a scrollable element at the bottom.
 
-# my-ts-lib
+## Install
 
-[![npm version](https://badgen.net/npm/v/my-ts-lib)](https://npm.im/my-ts-lib) [![npm downloads](https://badgen.net/npm/dm/my-ts-lib)](https://npm.im/my-ts-lib)
+```bash
+npm i react-stay-at-bottom
+```
 
-## Using this template
+## Usage
 
-- Search `my-ts-lib` and replace it with your custom package name.
-- Search `egoist` and replace it with your name.
+```tsx
+import { useStayAtBottom } from 'react-stay-at-bottom'
 
-Features:
+function MessageList({
+  children,
+  messages,
+}: {
+  children: React.ReactNode
+  messages: string[]
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const { stayAtBottom, stopAtBottom, scrollToBottom, atBottom, scroll } =
+    useStayAtBottom(scrollRef)
 
-- Package manager [pnpm](https://pnpm.js.org/), safe and fast
-- Release with [semantic-release](https://npm.im/semantic-release)
-- Bundle with [tsup](https://github.com/egoist/tsup)
-- Test with [vitest](https://vitest.dev)
+  return <div ref={scrollRef}>{children}</div>
+}
+```
 
-To skip CI (GitHub action), add `skip-ci` to commit message. To skip release, add `skip-release` to commit message.
+## Parameters
 
-## Install
+### `scrollRef`(**Required**):
 
-```bash
-npm i my-ts-lib
-```
+type: `React.RefObject<HTMLElement>`
+
+description: a ref to the scrollable element.
+
+### `options`(**Optional**):
+
+type: `{ handleScroll?: (scrollElement: HTMLElement) => void, autoStay?: boolean, initialStay?: boolean }`
+
+description: an object controlling the behavior of the hook:
+
+- `handleScroll`: A function that replace the default scroll handler.
+- `autoStay`: Whether to automatically stay at the bottom when the scrollable element is scrolled. Defaults to `true`.
+- `initialStay`: Whether to stay at the bottom when the component is mounted. Defaults to `false`.
 
-## Sponsors
+## Return
 
-[![sponsors](https://sponsors-images.egoist.dev/sponsors.svg)](https://github.com/sponsors/egoist)
+- `stayAtBottom`: A function that keeps the scrollable element at the bottom.
+- `stopAtBottom`: A function that stops the scrollable element from being kept at the bottom.
+- `scrollToBottom`: A function that scrolls the scrollable element to the bottom.
+- `atBottom`: A boolean indicating whether the scrollable element is at the bottom.
+- `scroll`: A function that scrolls the scrollable element to the bottom.
 
 ## License
 
-MIT &copy; [EGOIST](https://github.com/sponsors/egoist)
+MIT

package.json

@@ -3,8 +3,26 @@
   "type": "module",
   "version": "0.0.3",
   "packageManager": "[email protected]",
-  "description": "My awesome typescript library",
+  "description": "A React hook that keeps a scrollable element at the bottom.",
+  "author": "shlroland <[email protected]>",
   "license": "MIT",
+  "homepage": "https://github.com/shlroland/react-stay-at-bottom/README.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shlroland/react-stay-at-bottom.git"
+  },
+  "keywords": [
+    "react",
+    "hook",
+    "react-hook",
+    "scroll",
+    "bottom",
+    "react-scroll-to-bottom",
+    "message-list",
+    "stay-at-bottom",
+    "keep-at-bottom",
+    "auto-scroll-to-bottom"
+  ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,7 +36,8 @@
   "scripts": {
     "build": "tsup",
     "test": "vitest run",
-    "prepublishOnly": "pnpm run build"
+    "prepublishOnly": "pnpm run build",
+    "commit": "cz"
   },
   "dependencies": {
     "memoize-one": "^6.0.0",
@@ -32,6 +51,8 @@
     "@ocavue/eslint-config": "^2.7.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "commitizen": "^4.3.0",
+    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.10.0",
     "prettier": "3.3.3",
     "tsup": "8.2.4",
@@ -40,5 +61,10 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }