feat: umd build. (#36)

* feat: umd build. * refactor: remove comment from tsconfig json file.
morganney · Sep 24, 2022 · f55821d · f55821d
1 parent ac90e29
commit f55821d
Show file tree

Hide file tree

Showing 11 changed files with 3,766 additions and 47 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -22,7 +22,13 @@
   "rules": {
     "no-console": "error",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "varsIgnorePattern": "React"
+      }
+    ]
   },
   "overrides": [
     {

diff --git a/__tests__/icons.tsx → __tests__/icons.ts b/__tests__/icons.tsx → __tests__/icons.ts
diff --git a/docs/examples.md b/docs/examples.md
@@ -1,5 +1,54 @@
 # Examples
 
+### UMD
+
+Using `tts-react` from a CDN:
+
+```html
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>tts-react UMD example</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/umd/tts-react.min.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/babel">
+      const root = ReactDOM.createRoot(document.getElementById('root'))
+      const { TextToSpeech, useTts } = TTSReact
+      const CustomTTS = ({ children }) => {
+        const { play, ttsChildren } = useTts({ children })
+
+        return (
+          <>
+            <button onClick={() => play()}>Play</button>
+            <div>{ttsChildren}</div>
+          </>
+        )
+      }
+
+      root.render(
+        <>
+          <CustomTTS>
+            <p><code>useTts</code> as a UMD module.</p>
+          </CustomTTS>
+          <TextToSpeech>
+            <p><code>TextToSpeech</code> as a UMD module.</p>
+          </TextToSpeech>
+        </>
+      )
+    </script>
+  </body>
+</html>
+```
+
+### Hook
+
+Counting on command:
+
 ```tsx
 import { useState, useCallback } from 'react'
 import { useTts } from 'tts-reat'