From 92bb6edcab078172036f219cf662edbd424d5a5e Mon Sep 17 00:00:00 2001
From: Punit Soni <punit.soni33@gmail.com>
Date: Mon, 29 Jul 2024 16:02:10 +0530
Subject: [PATCH] markdown file updated

---
 README.md                             |  51 +++++++------
 example/src/hooks/useSpeech/index.tsx | 106 ++++++++++++++------------
 2 files changed, 85 insertions(+), 72 deletions(-)

diff --git a/README.md b/README.md
index 455f54f..9bb0092 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@
 
 ## Documentation
 
-### https://react-helper-hooks.vercel.app
+### https://punitsonime.github.io/react-helper-hooks
 
 
 ## Install Package
@@ -39,30 +39,30 @@ yarn add react-helper-hooks
 
 ## Available Hooks
 
-- useArray - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useArray)
-- useAsync - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useAsync)
-- useAsyncLoop - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useAsyncLoop)
-- useColorBlend - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useColorBlend)
-- useCopyToClipboard - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useCopyToClipboard)
-- useDebounce - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useDebounce)
-- useEventListener - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useEventListener)
-- useFetch - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useFetch)
-- useGeolocation - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useGeolocation)
-- useGroupByFirstLetter - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useGroupByFirstLetter)
-- useIsAppOffline - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useIsAppOffline)
-- usePrevious - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#usePrevious)
-- useScript - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useScript)
-- useScrollToTop - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useScrollToTop)
-- useSpeech - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useSpeech)
-- useStateJson - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useStateJson)
-- useStateWithHistory - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useStateWithHistory)
-- useStorage - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useStorage)
-- useSubdomain - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useSubdomain)
-- useTimeout - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useTimeout)
-- useToggle - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useToggle)
-- useUpdateEffect - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useUpdateEffect)
-- useWindowDimensions - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useWindowDimensions)
-- useWindowFocus - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useWindowFocus)
+- useArray - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useArray)
+- useAsync - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useAsync)
+- useAsyncLoop - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useAsyncLoop)
+- useColorBlend - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useColorBlend)
+- useCopyToClipboard - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useCopyToClipboard)
+- useDebounce - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useDebounce)
+- useEventListener - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useEventListener)
+- useFetch - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useFetch)
+- useGeolocation - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useGeolocation)
+- useGroupByFirstLetter - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useGroupByFirstLetter)
+- useIsAppOffline - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useIsAppOffline)
+- usePrevious - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#usePrevious)
+- useScript - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useScript)
+- useScrollToTop - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useScrollToTop)
+- useSpeech - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useSpeech)
+- useStateJson - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useStateJson)
+- useStateWithHistory - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useStateWithHistory)
+- useStorage - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useStorage)
+- useSubdomain - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useSubdomain)
+- useTimeout - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useTimeout)
+- useToggle - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useToggle)
+- useUpdateEffect - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useUpdateEffect)
+- useWindowDimensions - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useWindowDimensions)
+- useWindowFocus - [![][documentation-demo]](https://punitsonime.github.io/react-helper-hooks/#useWindowFocus)
 
 
 -----------------------------
@@ -86,3 +86,4 @@ yarn add react-helper-hooks
 MIT © [PunitSoniME](https://github.com/PunitSoniME)
 
 [documentation-demo]: https://img.shields.io/badge/documentation-🚀-blue.svg
+[documentation-url]: https://punitsonime.github.io/react-helper-hooks
diff --git a/example/src/hooks/useSpeech/index.tsx b/example/src/hooks/useSpeech/index.tsx
index 690b3ab..e754288 100644
--- a/example/src/hooks/useSpeech/index.tsx
+++ b/example/src/hooks/useSpeech/index.tsx
@@ -3,6 +3,7 @@ import { useSpeech } from '../../../..';
 import { packageName } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Textarea } from "@/components/ui/textarea"
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 const Block = lazy(() => import('@/common/Details/Block'));
 const Documentation = lazy(() => import('@/common/Documentation'));
@@ -36,6 +37,7 @@ export default function SpeechComponent() {
     const disableResumeButton = currentPlayingState !== 'paused';
     const disableStopButton = !(['playing', 'resumed', 'paused'].includes(currentPlayingState));
 
+    const isSpeechSynthesisSupported = 'speechSynthesis' in window;
 
     return (
         <Suspense fallback={<></>}>
@@ -45,54 +47,64 @@ export default function SpeechComponent() {
                 info={info}
                 usage={usage}
             >
-
-                <Block title='Example'>
-
-                    <Textarea
-                        defaultValue={text}
-                        className='mb-4'
-                        disabled={disablePlayButton}
-                        onChange={(e) => {
-                            setText(e.target.value);
-                        }} />
-
-                    <div className="flex gap-3 mb-2">
-                        <Button size="sm" disabled={disablePlayButton}
-                            onClick={() => {
-                                loadSpeech(document.getElementById('text-to-speech-content'), text);
-                                play();
-                            }}>Play</Button>
-
-                        <Button size="sm" disabled={disablePauseButton}
-                            onClick={() => {
-                                pause();
-                            }}>Pause</Button>
-
-                        <Button size="sm" disabled={disableResumeButton}
-                            onClick={() => {
-                                resume();
-                            }}>Resume</Button>
-
-                        <Button size="sm" variant="destructive"
-                            disabled={disableStopButton}
-                            onClick={() => {
-                                stop();
-                            }}>Stop</Button>
-                    </div>
-
-                    <div className='flex justify-between flex-col items-start gap-3'>
-
-                        <div id="text-to-speech-content"
-                            dangerouslySetInnerHTML={{
-                                __html: text
-                            }}
-                        >
-                        </div>
-                    </div>
-
-                </Block>
+                {
+                    isSpeechSynthesisSupported ?
+                        <Block title='Example'>
+
+                            <Alert className='my-3 bg-green-400 text-green-900'>
+                                <AlertTitle>Yahooo...</AlertTitle>
+                                <AlertDescription>Your browser <b>supports</b> speech synthesis.</AlertDescription>
+                            </Alert>
+
+                            <Textarea
+                                defaultValue={text}
+                                className='mb-4'
+                                disabled={disablePlayButton}
+                                onChange={(e) => {
+                                    setText(e.target.value);
+                                }} />
+
+                            <div className="flex gap-3 mb-2">
+                                <Button size="sm" disabled={disablePlayButton}
+                                    onClick={() => {
+                                        loadSpeech(document.getElementById('text-to-speech-content'), text);
+                                        play();
+                                    }}>Play</Button>
+
+                                <Button size="sm" disabled={disablePauseButton}
+                                    onClick={() => {
+                                        pause();
+                                    }}>Pause</Button>
+
+                                <Button size="sm" disabled={disableResumeButton}
+                                    onClick={() => {
+                                        resume();
+                                    }}>Resume</Button>
+
+                                <Button size="sm" variant="destructive"
+                                    disabled={disableStopButton}
+                                    onClick={() => {
+                                        stop();
+                                    }}>Stop</Button>
+                            </div>
+
+                            <div className='flex justify-between flex-col items-start gap-3'>
+
+                                <div id="text-to-speech-content"
+                                    dangerouslySetInnerHTML={{
+                                        __html: text
+                                    }}
+                                >
+                                </div>
+                            </div>
+
+                        </Block> : <Alert className="my-3" variant="destructive">
+                            <AlertTitle>Oooops...</AlertTitle>
+                            <AlertDescription>Your browser <b>sdoenn't supports</b> speech synthesis.</AlertDescription>
+                        </Alert>
+                }
             </Documentation>
 
-        </Suspense>
+        </Suspense >
     )
 }