tts-react - npm Package Compare versions

tts-react

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.6.1 to 0.6.2

package.json

		{
		"name": "tts-react",
		"version": "0.6.1",
		"version": "0.6.2",
		"description": "React component to convert text to speech.",
		@@ -74,2 +74,3 @@ "main": "dist/index.js",
		"eslint-plugin-react-hooks": "^4.6.0",
		"html-react-parser": "^3.0.4",
		"jest": "^29.0.2",
		@@ -76,0 +77,0 @@ "jest-environment-jsdom": "^29.0.2",

README.md

		@@ -17,3 +17,3 @@ # [`tts-react`](https://www.npmjs.com/package/tts-react)

		## Demo
		## Demo (Storybook)

		@@ -26,2 +26,4 @@ [morganney.github.io/tts-react](https://morganney.github.io/tts-react/)

		You can use the hook to create a `Speak` component that converts the text to speech on render:

		```tsx
		@@ -31,32 +33,18 @@ import { useTts } from 'tts-react'

		interface HookExampleProps extends TTSHookProps {
		highlight?: boolean
		}
		type SpeakProps = Pick<TTSHookProps, 'children'>

		const HookExample = ({ children, highlight = false }: HookExampleProps) => {
		const { ttsChildren, state, onPlay, onStop, onPause } = useTts({
		children,
		markTextAsSpoken: highlight
		})
		const Speak = ({ children }: SpeakProps) => (
		<>{useTts({ children, autoPlay: true }).ttsChildren}</>
		)

		const App = () => {
		return (
		<div>
		{state.isReady && (
		<>
		<button onClick={onPlay}>Play</button>
		<button onClick={onPause}>Pause</button>
		<button onClick={onStop}>Stop</button>
		</>
		)}
		{ttsChildren}
		</div>
		<Speak>
		<p>This text will be spoken on render.</p>
		</Speak>
		)
		}

		const App = () => {
		return <HookExample highlight>Some text to be spoken.</HookExample>
		}
		```

		You can use the hook to create a `Speak` component that converts the text to speech on render:
		Or create a more advanced component with controls for adjusting the speaking:

		@@ -67,12 +55,30 @@ ```tsx

		type SpeakProps = Pick<TTSHookProps, 'children'>
		interface CustomProps extends TTSHookProps {
		highlight?: boolean
		}

		const Speak = ({ children }: SpeakProps) => {
		const { ttsChildren } = useTts({ children, autoPlay: true })
		const CustomTTSComponent = ({ children, highlight = false }: CustomProps) => {
		const { ttsChildren, state, onPlay, onStop, onPause } = useTts({
		children,
		markTextAsSpoken: highlight
		})

		return <>{ttsChildren}</>
		return (
		<div>
		<>
		<button disabled={state.isPlaying} onClick={onPlay}>Play</button>
		<button onClick={onPause}>Pause</button>
		<button onClick={onStop}>Stop</button>
		</>
		{ttsChildren}
		</div>
		)
		}

		const App = () => {
		return <Speak>This text will be spoken on render.</Speak>
		return (
		<CustomTTSComponent highlight>
		<p>Some text to be spoken and highlighted.</p>
		</CustomTTSComponent>
		)
		}
		@@ -83,2 +89,4 @@ ```

		Use the `TextToSpeech` component to get up and running quickly:

		```tsx
		@@ -228,3 +236,3 @@ import { TextToSpeech, Positions, Sizes } from 'tts-react'

		## FAQs
		## FAQ

		@@ -247,1 +255,11 @@ <details>
		</details>

		<details>
		<summary>Why is text from <code>dangerouslySetInnerHTML</code> not spoken?</summary>
		<p><code>tts-react</code> does not speak text from <code>dangerouslySetInnerHTML</code>. Instead convert your HTML string into React elements via an html-to-react parser. See this <a href="https://morganney.github.io/tts-react/?path=/story/tts-react--dangerously-set-inner-html">example</a>.</p>
		</details>

		<details>
		<summary>What's up with Safari?</summary>
		<p>Safari simply does not follow the spec completely (yet). As one example, Safari 15.6.1 on macOS Monterey 12.5.1, throws a <code>SpeechSynthesisEvent</code> during a <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/error_event"><code>SpeechSynthesisUtterance.error</code></a>, while the spec says errors against utterances <a href="https://wicg.github.io/speech-api/#utterance-events">"must use the SpeechSynthesisErrorEvent interface"</a>.</p>
		</details>

Improved metrics

Worsened metrics