react-text-to-speech - npm Package Compare versions

Comparing version 0.4.5 to 0.5.0

package.json

 {
   "name": "react-text-to-speech",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "An easy to use react component for the Web Speech API.",
-  "main": "./build/index.js",
   "type": "module",
-  "scripts": {
-    "build": "npm i && tsc"
-  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "repository": {
@@ -35,4 +33,7 @@ "type": "git",
   "devDependencies": {
-    "@types/react": "^18.2.21"
+    "@types/react": "^18.2.28"
+  },
+  "scripts": {
+    "build": "pnpm i && tsc"
   }
 }

README.md

@@ -8,4 +8,5 @@ # react-text-to-speech
 - Easy to use
-- Handles multiple speech instances easily. See [Advanced Usage](#Advanced-Usage)
 - Stops speech instance on page reload.
+- Handles multiple speech instances easily. See [Advanced Usage](#advanced-usage)
+- Fully Customizable. See [usage with FoC](#full-customization)
 ## Installation
@@ -27,3 +28,3 @@ To install react-text-to-speech
 ## Usage
-When you use the `<Speech>` component of `react-text-to-speech`, initially the user will see the `startBtn` and when the user clicks on it, the speech instance will start and the user will be able to see the `stopBtn` which will stop the speech instance if the user click on it.
+When you use the `<Speech>` component of `react-text-to-speech`, initially the user will see the `startBtn` and when the user clicks on it, the speech instance will start and the user will see the `pauseBtn` which can be used to pause the speech instance. The user will also see the `stopBtn` which can be used to stop the speech instance at any moment.
 #### Basic Usage
@@ -41,3 +42,3 @@ ```jsx
 
-Let's assume that you fetch news from any News API and the API returns 3 news in response as shown below. Now if the user clicks on `startBtn` of #1 news (assuming # as id) and then after some time, clicks on `startBtn` on #2 news before the speech instance of #1 news ends, then `react-text-to-speech` will not just stop the #1 news speech instance and start the #2 news speech instance, but will also convert the `stopBtn` of #1 news to `startBtn`, thus avoiding any error.
+Let's assume that you fetch news from any News API and the API returns 3 news in response as shown below. Now if the user clicks on `startBtn` of #1 news (assuming # as id) and then clicks on `startBtn` on #2 news before the speech instance of #1 news ends, then `react-text-to-speech` will not just stop the #1 news speech instance and start the #2 news speech instance, but will also convert the `pauseBtn` of #1 news to `startBtn`, thus avoiding any confusion.
 ```jsx
@@ -54,4 +55,2 @@ import React from 'react'
     ]
-    const startBtn = <button className='my-start-btn'>Start Speech</button>
-    const stopBtn = <button className='my-stop-btn'>Stop Speech</button>
 
@@ -62,3 +61,3 @@ return <>
             <div>{desc}</div>
-            <Speech id={id} text={title + '. ' + desc} startBtn={startBtn} stopBtn={stopBtn} />
+            <Speech key={id} text={`${title}. ${desc}`} />
         </div>)}
@@ -68,2 +67,50 @@ </>
 ```
+#### Partial Customization
+Use props provided by `<Speech>` component to customize it.
+```jsx
+import React from 'react';
+import Speech from 'react-text-to-speech';
+
+export default function App() {
+    const startBtn = <button className='my-start-btn'>Start Speech</button>
+    const pauseBtn = <button className='my-pause-btn'>Pause Speech</button>
+    const stopBtn = <button className='my-stop-btn'>Stop Speech</button>
+
+    return <Speech 
+        text='This is a partially customized speech component.'
+        pitch={1.5}
+        rate={2}
+        volume={0.5}
+        startBtn={startBtn}
+        pauseBtn={pauseBtn}
+        stopBtn={stopBtn}
+        props={{ title: 'React Text-To-Speech Component' }}
+        onError={() => console.error('Browser not supported!')}
+    />
+}
+```
+#### Full Customization 
+Use Function as Children(FoC) to fully customize the `<Speech>` component.
+```jsx
+import React from 'react'
+import Speech from 'react-text-to-speech'
+
+export default function App() {
+    return <Speech
+        text='This is a fully customized speech component.'
+        pitch={1.5}
+        rate={2}
+        volume={0.5}
+        onError={() => console.error('Browser not supported!')}
+    >
+        {({ speechStatus, start, pause, stop }) => (
+            <YourCustomComponent>
+                {speechStatus !== 'started' && <button className='my-start-btn' onClick={start}>Start Speech</button>}
+                {speechStatus === 'started' && <button className='my-pause-btn' onClick={pause}>Pause Speech</button>}
+                <button className='my-stop-btn' onClick={stop}>Stop Speech</button>
+            </YourCustomComponent>
+        )}
+    </Speech>
+}
+```
 ## Speech Component API Reference
@@ -73,16 +120,31 @@ Here is the full API for the `<Speech>` component, these properties can be set on an instance of Speech:
 | - | - | - | - | - |
-| `id` | `String \| Number` | No | null | Required when there are multiple speech instances. When a speech instance is started, the already running speech instance will stop and the speech button will automatically be changed to the `startBtn` based on the `id` of the instance. |
 | `text` | `String` | Yes | - | It contains the text to be spoken when `startBtn` is clicked. |
-| `style` | `React.CSSProperties` | No | {} | The style attribute of `JSX.Element`. |
-| `startBtn` | `JSX.Element \| string` | No | `<HiVolumeUp />` | Button to start the speech instance. |
-| `stopBtn` | `JSX.Element \| string` | No | `<HiVolumeOff />` | Button to stop the speech instance. |
-| `pitch` | `Number (0 to 10)` | No | 5 | The pitch at which the utterance will be spoken. |
-| `rate` | `Number (0 to 10)` | No | 5 | The speed at which the utterance will be spoken. |
-| `volume` | `Number (0 to 10)` | No | 10 | The volume at which the utterance will be spoken. |
+| `pitch` | `Number (0 to 2)` | No | 1 | The pitch at which the utterance will be spoken. |
+| `rate` | `Number (0.1 to 10)` | No | 1 | The speed at which the utterance will be spoken. |
+| `volume` | `Number (0 to 1)` | No | 1 | The volume at which the utterance will be spoken. |
 | `lang` | `String` | No | - | The language in which the utterance will be spoken. |
-
-## Used By
-- [NewsDose](https://newsdoseweb.netlify.app/)
-- [CloudNotes](https://cloudnotesweb.netlify.app/)
+| `startBtn` | [`Button`](#button) | No | `<HiVolumeUp />` | Button to start the speech instance. |
+| `pauseBtn` | [`Button`](#button) | No | `<HiVolumeOff />` | Button to pause the speech instance. |
+| `stopBtn` | [`Button`](#button) | No | `<HiMiniStop />` | Button to stop the speech instance. |
+| `onError` | `Function` | No | `() => alert('Browser not supported! Try some other browser.')` | Function to be executed if browser doesn't support `Web Speech API` |
+| `props` | `React.DetailedHTMLProps` | No | - | Props to customize the `<Speech>` component. |
+| `children` | [`Children`](#children) | No | - | See [usage with FoC](#full-customization) |
+### Types
+#### Button
+```typescript
+type Button = JSX.Element | string | null
+```
+#### Children
+```typescript
+import { ReactNode } from 'react';
+type SpeechStatus = 'started' | 'paused' | 'stopped'
+interface ChildrenOptions {
+    speechStatus?: SpeechStatus
+    start?: () => void
+    pause?: () => void
+    stop?: () => void
+}
+type Children = (childrenOptions: ChildrenOptions) => ReactNode
+```
 ## Author
 [Sahil Aggarwal](https://www.github.com/SahilAggarwal2004)

No alert changes

Improved metrics

Total package byte prevSize

13438

increased by35.86%

Lines of code

96

increased by39.13%

Number of lines in readme file

143

increased by76.54%

No dependency changes