useSystemVoices.md

useSystemVoices

[This is still an experimental feature](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental)

A side effect to retrieve all the available system voices using the Web_Speech_API.

Why? 💡

• At the moment, the window.speechSynthesis.getVoices function returns all the available system voices, but since
  it does it asynchronously the returning value is an empty array until a second call is performed. This hook manage the side-effect of correctly retrieve all the available system voices.

Basic Usage:

import { List, Title } from 'beautiful-react-ui';
import useSystemVoices from 'beautiful-react-hooks/useSystemVoices'; 

const SpeechSynthesisDemo = () => {
  const voices  = useSystemVoices();

  return (
   <DisplayDemo>
     <Title size="lg">System voices</Title> 
     <List condensed>
        {voices.map(({ name, lang }) => <List.Item key={name}>{name} - <small>{lang}</small></List.Item>)}
     </List>
   </DisplayDemo>
  );
};

<SpeechSynthesisDemo />

Mastering the hooks

✅ When to use

• When you need to easily get all the system languages from the Web_Speech_API.

🛑 When not to use

• In production...yet. This is still an experimental feature