use-read-aloud 0.1.0 → 1.0.1

package/README.md

@@ -18,21 +18,47 @@ npm install use-read-aloud
 
 ```tsx
 import { useReadAloud } from "use-read-aloud";
+import { useState } from "react";
+import {
+  FastForward,
+  Minus,
+  Pause,
+  Play,
+  Plus,
+  Rewind,
+  RotateCcw,
+  Volume2,
+} from "lucide-react";
 
 function AudioPlayer({ text }: { text: string }) {
-  const { isReading, isPaused, toggle, start, reset } = useReadAloud(
-    () => text,
-    { rate: 1 }
-  );
+  const [playBackSpeed, setPlayBackSpeed] = useState<number>(1);
+
+  const { isPaused, togglePlay, fastForward, seekBackward, replay } =
+    useReadAloud(text, {
+      rate: playBackSpeed,
+    });
 
   return (
     <div>
-      <button onClick={toggle}>
-        {isReading && !isPaused ? "Pause" : "Play"}
+      <button onClick={seekBackward}>
+        <Rewind />
       </button>
-
-      {isReading && <button onClick={start}>Restart</button>}
-      <button onClick={reset}>Stop</button>
+      <button onClick={togglePlay}>{isPaused ? <Play /> : <Pause />}</button>
+      <button onClick={fastForward}>
+        <FastForward />
+      </button>
+      <button onClick={replay}>
+        <RotateCcw />
+      </button>
+      <span>
+        <button onClick={() => setPlayBackSpeed(playBackSpeed - 0.25)}>
+          <Minus />
+        </button>
+        {`${playBackSpeed}x`}
+        <button onClick={() => setPlayBackSpeed(playBackSpeed + 0.25)}>
+          <Plus />
+        </button>
+      </span>
     </div>
   );
 }
@@ -41,14 +67,14 @@ function AudioPlayer({ text }: { text: string }) {
 ## API
 
 ```
-useReadAloud(getText, options?)
+useReadAloud(text, options?)
 ```
 
 ### Parameters
 
-- getText - A function that returns the text to read.
+- text - the text to be read.
 
-- options
+- options - options to specify rate and pitch of the speech
 
 ```ts
 type Options = {
@@ -61,11 +87,13 @@ type Options = {
 
 ```ts
 {
-  isReading: boolean;
   isPaused: boolean;
-  start: () => void;
-  toggle: () => void;
-  reset: () => void;
+  play: () => void;
+  pause: () => void;
+  replay: () => void;
+  seekBackward: () => void;
+  fastForward: () => void;
+  togglePlay: () => void;
 }
 ```
 
@@ -93,6 +121,10 @@ Not supported:
 
 - Firefox
 
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)
+
 ## License
 
 MIT

package/dist/test/setupTests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/useReadAloud.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/use-read-aloud.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),A=220;function I(o){const c=[];let s="";for(const n of o.split("."))(s+n+".").length>A?(c.push(s.trim()),s=n+"."):s+=n+".";return s.trim()&&c.push(s.trim()),c}function M(o,c={}){const{rate:s=1,pitch:n=1}=c,[d,k]=e.useState(!1),[b,f]=e.useState(!1),u=e.useRef(0),h=e.useRef([]),a=e.useRef(0),C=e.useCallback(()=>{h.current=[],a.current=0},[]),R=e.useCallback(()=>{const l=o();if(!l.trim())return;const t=l.split(/\n+/).map(y=>y.trim()).filter(Boolean);h.current=t.flatMap(I),a.current=0},[o]),p=e.useCallback(()=>{k(!1),f(!1)},[]),r=e.useCallback(()=>{speechSynthesis.cancel(),C(),p()},[C,p]),i=e.useCallback(()=>{const l=u.current;if(a.current>=h.current.length){p();return}const t=new SpeechSynthesisUtterance(h.current[a.current]);t.rate=s,t.pitch=n,t.onend=()=>{l===u.current&&(a.current+=1,i())},t.onerror=()=>{l===u.current&&r()},speechSynthesis.speak(t)},[p,r,n,s]),S=e.useCallback(()=>{r(),u.current+=1,k(!0),f(!1),R(),i()},[R,i]),g=e.useCallback(()=>{f(!0),speechSynthesis.pause()},[]),m=e.useCallback(()=>{f(!1),u.current+=1,speechSynthesis.cancel(),i()},[i]);return e.useEffect(()=>()=>r(),[r]),{isReading:d,isPaused:b,start:S,reset:r,pause:g,resume:m,toggle:d?b?m:g:S}}exports.useReadAloud=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),m=220;function P(a){const l=[];let t="";for(const c of a.split("."))(t+c+".").length>m?(l.push(t.trim()),t=c+"."):t+=c+".";return t.trim()&&l.push(t.trim()),l}function A(a,l={}){const{rate:t=1,pitch:c=1}=l,[k,h]=e.useState(!0),u=e.useRef(!0),i=e.useRef([]),r=e.useRef(0),b=e.useCallback(()=>{i.current=[],r.current=0},[]),d=e.useCallback(()=>{if(!a.trim())return;const n=a.split(/\n+/).map(g=>g.trim()).filter(Boolean);i.current=n.flatMap(P),r.current=0},[a]),o=e.useCallback(()=>{u.current=!0,h(!0)},[]),f=e.useCallback(()=>{speechSynthesis.cancel(),b(),o()},[b,o]),p=e.useCallback(()=>{if(r.current>=i.current.length){o();return}const n=new SpeechSynthesisUtterance(i.current[r.current]);n.rate=t,n.pitch=c,speechSynthesis.speak(n),n.onend=()=>{r.current+=1,p()},n.onerror=()=>{}},[o,c,t]),C=e.useCallback(()=>{h(!0),u.current=!0,speechSynthesis.pause()},[]),s=e.useCallback(()=>{h(!1),u.current=!1,i.current.length===0&&d(),speechSynthesis.cancel(),p()},[p,d]),y=e.useCallback(()=>{f(),s()},[f,s]),S=e.useCallback(()=>{r.current=Math.max(r.current-1,0),u.current||s()},[s]),R=e.useCallback(()=>{r.current=r.current+1,u.current||s()},[s]);return e.useEffect(()=>{u.current?speechSynthesis.cancel():s()},[t,s]),e.useEffect(()=>()=>f(),[f]),{isPaused:k,play:s,pause:C,replay:y,seekBackward:S,fastForward:R,togglePlay:k?s:C}}exports.useReadAloud=A;

package/dist/use-read-aloud.es.js

@@ -1,55 +1,59 @@
-import { useState as A, useRef as d, useCallback as t, useEffect as w } from "react";
+import { useState as A, useRef as d, useCallback as r, useEffect as g } from "react";
 const M = 220;
-function P(f) {
-  const c = [];
+function b(a) {
+  const i = [];
   let e = "";
-  for (const n of f.split("."))
-    (e + n + ".").length > M ? (c.push(e.trim()), e = n + ".") : e += n + ".";
-  return e.trim() && c.push(e.trim()), c;
+  for (const c of a.split("."))
+    (e + c + ".").length > M ? (i.push(e.trim()), e = c + ".") : e += c + ".";
+  return e.trim() && i.push(e.trim()), i;
 }
-function q(f, c = {}) {
-  const { rate: e = 1, pitch: n = 1 } = c, [m, R] = A(!1), [S, l] = A(!1), u = d(0), p = d([]), i = d(0), g = t(() => {
-    p.current = [], i.current = 0;
-  }, []), k = t(() => {
-    const a = f();
-    if (!a.trim()) return;
-    const s = a.split(/\n+/).map((b) => b.trim()).filter(Boolean);
-    p.current = s.flatMap(P), i.current = 0;
-  }, [f]), h = t(() => {
-    R(!1), l(!1);
-  }, []), r = t(() => {
-    speechSynthesis.cancel(), g(), h();
-  }, [g, h]), o = t(() => {
-    const a = u.current;
-    if (i.current >= p.current.length) {
-      h();
+function I(a, i = {}) {
+  const { rate: e = 1, pitch: c = 1 } = i, [m, l] = A(!0), u = d(!0), o = d([]), n = d(0), y = r(() => {
+    o.current = [], n.current = 0;
+  }, []), S = r(() => {
+    if (!a.trim())
+      return;
+    const s = a.split(/\n+/).map((w) => w.trim()).filter(Boolean);
+    o.current = s.flatMap(b), n.current = 0;
+  }, [a]), f = r(() => {
+    u.current = !0, l(!0);
+  }, []), h = r(() => {
+    speechSynthesis.cancel(), y(), f();
+  }, [y, f]), p = r(() => {
+    if (n.current >= o.current.length) {
+      f();
       return;
     }
     const s = new SpeechSynthesisUtterance(
-      p.current[i.current]
+      o.current[n.current]
     );
-    s.rate = e, s.pitch = n, s.onend = () => {
-      a === u.current && (i.current += 1, o());
+    s.rate = e, s.pitch = c, speechSynthesis.speak(s), s.onend = () => {
+      n.current += 1, p();
     }, s.onerror = () => {
-      a === u.current && r();
-    }, speechSynthesis.speak(s);
-  }, [h, r, n, e]), y = t(() => {
-    r(), u.current += 1, R(!0), l(!1), k(), o();
-  }, [k, o]), C = t(() => {
-    l(!0), speechSynthesis.pause();
-  }, []), I = t(() => {
-    l(!1), u.current += 1, speechSynthesis.cancel(), o();
-  }, [o]);
-  return w(() => () => r(), [r]), {
-    isReading: m,
-    isPaused: S,
-    start: y,
-    reset: r,
-    pause: C,
-    resume: I,
-    toggle: m ? S ? I : C : y
+    };
+  }, [f, c, e]), k = r(() => {
+    l(!0), u.current = !0, speechSynthesis.pause();
+  }, []), t = r(() => {
+    l(!1), u.current = !1, o.current.length === 0 && S(), speechSynthesis.cancel(), p();
+  }, [p, S]), R = r(() => {
+    h(), t();
+  }, [h, t]), C = r(() => {
+    n.current = Math.max(n.current - 1, 0), u.current || t();
+  }, [t]), P = r(() => {
+    n.current = n.current + 1, u.current || t();
+  }, [t]);
+  return g(() => {
+    u.current ? speechSynthesis.cancel() : t();
+  }, [e, t]), g(() => () => h(), [h]), {
+    isPaused: m,
+    play: t,
+    pause: k,
+    replay: R,
+    seekBackward: C,
+    fastForward: P,
+    togglePlay: m ? t : k
   };
 }
 export {
-  q as useReadAloud
+  I as useReadAloud
 };

package/dist/useReadAloud.d.ts

@@ -2,12 +2,12 @@ export type Options = {
     rate?: number;
     pitch?: number;
 };
-export declare function useReadAloud(getText: () => string, options?: Options): {
-    isReading: boolean;
+export declare function useReadAloud(text: string, options?: Options): {
     isPaused: boolean;
-    start: () => void;
-    reset: () => void;
+    play: () => void;
     pause: () => void;
-    resume: () => void;
-    toggle: () => void;
+    replay: () => void;
+    seekBackward: () => void;
+    fastForward: () => void;
+    togglePlay: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-read-aloud",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "type": "module",
   "description": "A React hook for reading text aloud using the Web Speech API",
   "author": "Siva Murugan",
@@ -23,13 +23,16 @@
     "dev": "vite",
     "types": "tsc --emitDeclarationOnly",
     "build": "vite build && tsc --emitDeclarationOnly",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "vitest"
   },
   "peerDependencies": {
     "react": ">=18"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
@@ -38,9 +41,11 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "happy-dom": "^20.0.11",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vitest": "^4.0.16"
   },
   "repository": {
     "type": "git",