Skip to content

examples.md

Latest commit

 

History

History
134 lines (116 loc) · 3.28 KB

examples.md

File metadata and controls

134 lines (116 loc) · 3.28 KB

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'
      import { createRoot } from 'https://esm.sh/react-dom/client'
      import { TextToSpeech } from 'https://esm.sh/tts-react'

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

@knighted/jsx/react

Use @knighted/jsx/react 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 + @knighted/jsx/react</title>
  </head>
  <body>
    <script type="module">
      import { createRoot } from 'https://esm.sh/react-dom/client'
      import { TextToSpeech } from 'https://esm.sh/tts-react'
      import { reactJsx } from 'https://esm.sh/@knighted/jsx/react'

      createRoot(document.body).render(
        reactJsx`
          <${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",
          "react-dom/client": "https://esm.sh/react-dom/client",
          "tts-react": "https://esm.sh/tts-react",
          "@knighted/jsx/react": "https://esm.sh/@knighted/jsx/react"
        }
      }
    </script>
    <title>ESM + CDN + Import Map + @knighted/jsx/react</title>
  </head>
  <body>
    <script type="module">
      import { createRoot } from 'react-dom/client'
      import { TextToSpeech } from 'tts-react'
      import { reactJsx } from '@knighted/jsx/react'

      createRoot(document.body).render(
        reactJsx`
          <${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>
    </>
  )
}