axokit-react 0.0.4 → 0.0.6

package/README.md

@@ -1,6 +1,6 @@
-# AxoKit — AsyncButton & useAsyncAction
+# AxoKit React — AsyncButton & useAsyncAction
 
-A tiny headless React UI primitive for handling asynchronous button states.
+Production-ready async interaction primitives for React & Next.js.
 
 Package name: `axokit-react` (install with `npm install axokit-react`).
 
@@ -12,12 +12,20 @@ Package name: `axokit-react` (install with `npm install axokit-react`).
 - Minimal styles; load your own CSS or Tailwind classes
 - Works with React 18+
 
+## Why AxoKit?
+
+- Production‑ready async state management with minimal boilerplate.
+- Works with both component and hook patterns.
+- Tiny footprint and zero runtime dependencies.
+- Fully typed for TypeScript and compatible with React 18+.
+- Accessible ARIA attributes and easy styling with Tailwind or CSS.
+
 ## Installation
 
 ```bash
 npm install axokit-react
 # also install peer dependencies
-npm install react react-dom
+Requires `react` and `react-dom` 18+ as peer dependencies.
 ```
 
 ## Usage (component)
@@ -44,6 +52,16 @@ function SaveButton() {
 }
 ```
 
+## Next.js (App Router)
+
+If you're using the App Router, add `'use client'` at the top of your component file:
+
+```tsx
+'use client';
+
+import { AsyncButton } from 'axokit-react';
+```
+
 ## Usage (hook)
 
 ```tsx
@@ -64,11 +82,33 @@ function HookExample() {
 }
 ```
 
+## Example
+
+```tsx
+import { AsyncButton } from 'axokit-react';
+
+function Demo() {
+  const doWork = () => fetch('/api/work');
+  return (
+    <AsyncButton
+      onAction={doWork}
+      loadingText="Working…"
+      successText="Done!"
+      errorText="Failed"
+      showSpinner
+      className="btn"
+    >
+      Click me
+    </AsyncButton>
+  );
+}
+```
+
 ## API
 
 ### `AsyncButton(props)`
 
-- `onAction: () => Promise<any>` — **required**.
+- `onAction: () => Promise<unknown>` — **required**.
 - `loadingText?: string` — default: `"Loading..."`.
 - `successText?: string` — default: `"Done!"`.
 - `errorText?: string` — default: `"Try again"`.
@@ -106,4 +146,6 @@ Use `data-state` to adjust styles via CSS/Tailwind.
 
 MIT
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+## Keywords
+
+async, react, async-button, useAsyncAction, hook, component, loading, success, error, state, nextjs, tailwind, aria, accessible, typescript

package/dist/index.d.ts

@@ -14,9 +14,9 @@ interface UseAsyncActionReturn {
     trigger: () => Promise<void>;
     reset: () => void;
 }
-declare function useAsyncAction(action: () => Promise<any>, options?: UseAsyncActionOptions): UseAsyncActionReturn;
+declare function useAsyncAction(action: () => Promise<unknown>, options?: UseAsyncActionOptions): UseAsyncActionReturn;
 interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    onAction: () => Promise<any>;
+    onAction: () => Promise<unknown>;
     loadingText?: string;
     successText?: string;
     errorText?: string;

package/dist/index.js

@@ -45,6 +45,7 @@ function useAsyncAction(action, options = {}) {
   const timeoutRef = React.useRef(null);
   const mountedRef = React.useRef(true);
   React.useEffect(() => {
+    mountedRef.current = true;
     return () => {
       mountedRef.current = false;
       if (timeoutRef.current) {

package/dist/index.mjs

@@ -8,6 +8,7 @@ function useAsyncAction(action, options = {}) {
   const timeoutRef = React.useRef(null);
   const mountedRef = React.useRef(true);
   React.useEffect(() => {
+    mountedRef.current = true;
     return () => {
       mountedRef.current = false;
       if (timeoutRef.current) {

package/package.json

@@ -1,7 +1,24 @@
 {
   "name": "axokit-react",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Headless async button and hook for React",
+  "keywords": [
+    "react",
+    "async",
+    "async-button",
+    "useAsyncAction",
+    "hook",
+    "component",
+    "loading",
+    "success",
+    "error",
+    "state",
+    "nextjs",
+    "tailwind",
+    "aria",
+    "accessible",
+    "typescript"
+  ],
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",