Skip to content

Latest commit

 

History

History
140 lines (120 loc) · 3.41 KB

examples.md

File metadata and controls

140 lines (120 loc) · 3.41 KB
Raw

Examples

CDN + ESM

Using tts-react with ESM from a CDN:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ESM + CDN</title>
  </head>
  <body>
    <script type="module">
      import { createElement } from 'https://esm.sh/react@rc/?dev'
      import { createRoot } from 'https://esm.sh/react-dom@rc/client?dev'
      import { TextToSpeech } from 'https://esm.sh/tts-react@next?deps=react@rc&dev'

      createRoot(document.body).render(
        createElement(TextToSpeech, { markTextAsSpoken: true }, 'Hello from tts-react.')
      )
    </script>
  </body>
</html>

htm

Use htm for JSX-like syntax:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ESM + CDN + htm</title>
  </head>
  <body>
    <script type="module">
      import { createElement } from 'https://esm.sh/react@rc/?dev'
      import { createRoot } from 'https://esm.sh/react-dom@rc/client?dev'
      import { TextToSpeech } from 'https://esm.sh/tts-react@next?deps=react@rc&dev'
      import htm from 'https://esm.sh/htm'

      const html = htm.bind(createElement)

      createRoot(document.body).render(
        html`
          <${TextToSpeech} markTextAsSpoken>
            <p>Hello from tts-react.</p>
          </${TextToSpeech}>
        `
      )
    </script>
  </body>
</html>

Import Map

You can also use an import map if you prefer bare specifiers in your import statements:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@rc/?dev",
          "react-dom/client": "https://esm.sh/react-dom@rc/client?dev",
          "tts-react": "https://esm.sh/tts-react@next?deps=react@rc&dev",
          "htm": "https://esm.sh/htm"
        }
      }
    </script>
    <title>ESM + CDN + Import Map + htm</title>
  </head>
  <body>
    <script type="module">
      import { createElement } from 'react'
      import { createRoot } from 'react-dom/client'
      import { TextToSpeech } from 'tts-react'
      import htm from 'htm'

      const html = htm.bind(createElement)

      createRoot(document.body).render(
        html`
          <${TextToSpeech} markTextAsSpoken>
            <p>Hello from tts-react.</p>
          </${TextToSpeech}>
        `
      )
    </script>
  </body>
</html>

Hook

Counting on command:

import { useState, useCallback, useEffect } from 'react'
import { useTts } from 'tts-react'

const CountOnEnd = () => {
  const [count, setCount] = useState(1)
  const [counting, setCounting] = useState(false)
  const { ttsChildren, play } = useTts({
    children: count,
    markTextAsSpoken: true,
    onEnd: useCallback(() => {
      setCount((prev) => prev + 1)
    }, [])
  })

  useEffect(() => {
    if (counting) {
      play()
    }
  }, [count, counting, play])

  return (
    <>
      <button disabled={counting} onClick={() => setCounting(true)}>
        Start
      </button>
      <button onClick={() => setCounting(false)}>Stop</button>
      <p>{ttsChildren}</p>
    </>
  )
}