.md file cleanup (#2577)

corinagum · web-flow · commit d7a8d617788c · 2019-11-07T19:03:14.000-08:00
diff --git a/HOOKS.md b/HOOKS.md
@@ -14,10 +14,10 @@ Web Chat expose our APIs through React Hooks. This API surface enables us to fre
 
 We design our hooks largely with two basic shapes:
 
-- Actions, these are functions that you can call at any time to perform a side-effect
-- Properties, these are getter function with an optional setter
-   - This is same as [React State Hook pattern](https://reactjs.org/docs/hooks-state.html), but setters are optional
-   - If the value is changed, React will call your render function again
+-  Actions, these are functions that you can call at any time to perform a side-effect
+-  Properties, these are getter function with an optional setter
+   -  This is same as [React State Hook pattern](https://reactjs.org/docs/hooks-state.html), but setters are optional
+   -  If the value is changed, React will call your render function again
 
 ### Actions
 
@@ -36,7 +36,7 @@ All properties follow [React State Hook pattern](https://reactjs.org/docs/hooks-
 ```js
 const [sendBoxValue, setSendBoxValue] = useSendBoxValue();
 
-console.log(`The send box value is "${ sendBoxValue }".`);
+console.log(`The send box value is "${sendBoxValue}".`);
 
 setSendBoxValue('Hello, World!');
 ```
@@ -47,49 +47,49 @@ setSendBoxValue('Hello, World!');
 
 Following is the list of hooks supported by Web Chat API.
 
-- [`useActivities`](#useactivities)
-- [`useAdaptiveCardsHostConfig`](#useadaptivecardshostconfig)
-- [`useAdaptiveCardsPackage`](#useadaptivecardspackage)
-- [`useAvatarForBot`](#useavatarforbot)
-- [`useAvatarForUser`](#useavatarforuser)
-- [`useConnectivityStatus`](#useconnectivitystatus)
-- [`useDictateInterims`](#usedictateinterims)
-- [`useDictateState`](#usedictatestate)
-- [`useDisabled`](#usedisabled)
-- [`useEmitTypingIndicator`](#useemittypingindicator)
-- [`useFocusSendBox`](#usefocussendbox)
-- [`useGrammars`](#usegrammars)
-- [`useGroupTimestamp`](#usegrouptimestamp)
-- [`useLanguage`](#uselanguage)
-- [`useLastTypingAt`](#uselasttypingat)
-- [`useLocalize`](#uselocalize)
-- [`useMarkActivityAsSpoken`](#usemarkactivityasspoken)
-- [`usePerformCardAction`](#useperformcardaction)
-- [`usePostActivity`](#usepostactivity)
-- [`useReferenceGrammarID`](#usereferencegrammarid)
-- [`useRenderActivity`](#useRenderActivity)
-- [`useRenderAttachment`](#useRenderAttachment)
-- [`useRenderMarkdownAsHTML`](#useRenderMarkdownAsHTML)
-- [`useScrollToEnd`](#usescrolltoend)
-- [`useSendBoxValue`](#usesendboxvalue)
-- [`useSendEvent`](#usesendevent)
-- [`useSendFiles`](#usesendfiles)
-- [`useSendMessage`](#usesendmessage)
-- [`useSendMessageBack`](#usesendmessageback)
-- [`useSendPostBack`](#usesendpostback)
-- [`useSendTypingIndicator`](#usesendtypingindicator)
-- [`useShouldSpeakIncomingActivity`](#useshouldspeakincomingactivity)
-- [`useStartDictate`](#usestartdictate)
-- [`useStopDictate`](#usestopdictate)
-- [`useStyleOptions`](#usestyleoptions)
-- [`useStyleSet`](#usestyleset)
-- [`useSubmitSendBox`](#usesubmitsendbox)
-- [`useSuggestedActions`](#usesuggestedactions)
-- [`useTimeoutForSend`](#usetimeoutforsend)
-- [`useUserID`](#useuserid)
-- [`useUsername`](#useusername)
-- [`useVoiceSelector`](#usevoiceselector)
-- [`useWebSpeechPonyfill`](#usewebspeechponyfill)
+-  [`useActivities`](#useactivities)
+-  [`useAdaptiveCardsHostConfig`](#useadaptivecardshostconfig)
+-  [`useAdaptiveCardsPackage`](#useadaptivecardspackage)
+-  [`useAvatarForBot`](#useavatarforbot)
+-  [`useAvatarForUser`](#useavatarforuser)
+-  [`useConnectivityStatus`](#useconnectivitystatus)
+-  [`useDictateInterims`](#usedictateinterims)
+-  [`useDictateState`](#usedictatestate)
+-  [`useDisabled`](#usedisabled)
+-  [`useEmitTypingIndicator`](#useemittypingindicator)
+-  [`useFocusSendBox`](#usefocussendbox)
+-  [`useGrammars`](#usegrammars)
+-  [`useGroupTimestamp`](#usegrouptimestamp)
+-  [`useLanguage`](#uselanguage)
+-  [`useLastTypingAt`](#uselasttypingat)
+-  [`useLocalize`](#uselocalize)
+-  [`useMarkActivityAsSpoken`](#usemarkactivityasspoken)
+-  [`usePerformCardAction`](#useperformcardaction)
+-  [`usePostActivity`](#usepostactivity)
+-  [`useReferenceGrammarID`](#usereferencegrammarid)
+-  [`useRenderActivity`](#useRenderActivity)
+-  [`useRenderAttachment`](#useRenderAttachment)
+-  [`useRenderMarkdownAsHTML`](#useRenderMarkdownAsHTML)
+-  [`useScrollToEnd`](#usescrolltoend)
+-  [`useSendBoxValue`](#usesendboxvalue)
+-  [`useSendEvent`](#usesendevent)
+-  [`useSendFiles`](#usesendfiles)
+-  [`useSendMessage`](#usesendmessage)
+-  [`useSendMessageBack`](#usesendmessageback)
+-  [`useSendPostBack`](#usesendpostback)
+-  [`useSendTypingIndicator`](#usesendtypingindicator)
+-  [`useShouldSpeakIncomingActivity`](#useshouldspeakincomingactivity)
+-  [`useStartDictate`](#usestartdictate)
+-  [`useStopDictate`](#usestopdictate)
+-  [`useStyleOptions`](#usestyleoptions)
+-  [`useStyleSet`](#usestyleset)
+-  [`useSubmitSendBox`](#usesubmitsendbox)
+-  [`useSuggestedActions`](#usesuggestedactions)
+-  [`useTimeoutForSend`](#usetimeoutforsend)
+-  [`useUserID`](#useuserid)
+-  [`useUsername`](#useusername)
+-  [`useVoiceSelector`](#usevoiceselector)
+-  [`useWebSpeechPonyfill`](#usewebspeechponyfill)
 
 ## `useActivities`
 
@@ -153,14 +153,14 @@ useConnectivityStatus(): [string]
 
 This function will return the connectivity status of:
 
-- `connected`: Connected
-- `connectingslow`: Still connecting, not connected
-- `error`: Connection error
-- `notconnected`: Not connected
-- `reconnected`: Reconnected after interruption
-- `reconnecting`: Reconnecting after interruption
-- `sagaerror`: Errors on JavaScript side
-- `uninitialized`: Never connect and not connecting
+-  `connected`: Connected
+-  `connectingslow`: Still connecting, not connected
+-  `error`: Connection error
+-  `notconnected`: Not connected
+-  `reconnected`: Reconnected after interruption
+-  `reconnecting`: Reconnecting after interruption
+-  `sagaerror`: Errors on JavaScript side
+-  `uninitialized`: Never connect and not connecting
 
 ## `useDictateInterims`
 
@@ -180,10 +180,10 @@ useDictateState(): [string]
 
 This function will return the dictate state of:
 
-- `0`: Idle
-- `1`: Starting
-- `2`: Dictating
-- `3`: Stopping
+-  `0`: Idle
+-  `1`: Starting
+-  `2`: Dictating
+-  `3`: Stopping
 
 To control dictate state, use [`useStartDictate`](#usestartdictate) and [`useStopDictate`](#usestopdictate) hooks.
 
@@ -298,9 +298,9 @@ When called, this function will post the activity on behalf of the user, to the
 
 You can use this function to send any type of activities to the bot, but we highly recommend you send the following type of activities only:
 
-- `event`
-- `message`
-- `typing`
+-  `event`
+-  `message`
+-  `typing`
 
 ## `useReferenceGrammarID`
 
@@ -390,8 +390,8 @@ useSendFiles(): (files: (Blob | File)[]) => void
 
 When called, this function will send a message activity with one or more [File](https://developer.mozilla.org/en-US/docs/Web/API/File) attachments to the bot, including these operations:
 
-- Convert [File](https://developer.mozilla.org/en-US/docs/Web/API/File) into object URL
-- Generate thumbnail and will use a Web Worker and a offscreen canvas if supported
+-  Convert [File](https://developer.mozilla.org/en-US/docs/Web/API/File) into object URL
+-  Generate thumbnail and will use a Web Worker and a offscreen canvas if supported
 
 If you are using an `ArrayBuffer`, you can use `FileReader` to convert it into a blob before calling [`URL.createObjectURL`](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL).
 
@@ -560,8 +560,8 @@ These are hooks specific provide specific user experience.
 
 These are hooks that are specific for the microphone button.
 
-- [`useMicrophoneButtonClick`](#usemicrophonebuttonclick)
-- [`useMicrophoneButtonDisabled`](#usemicrophonebuttondisabled)
+-  [`useMicrophoneButtonClick`](#usemicrophonebuttonclick)
+-  [`useMicrophoneButtonDisabled`](#usemicrophonebuttondisabled)
 
 ### `useMicrophoneButtonClick`
 
@@ -585,7 +585,7 @@ This value can be partly controllable through Web Chat props.
 
 These are hooks that are specific for the send box.
 
-- [`useSendBoxDictationStarted`](#usesendboxdictationstarted)
+-  [`useSendBoxDictationStarted`](#usesendboxdictationstarted)
 
 ### `useSendBoxDictationStarted`
 
@@ -599,8 +599,8 @@ This function will return whether the speech-to-text has been started or not.
 
 These are hooks that are specific to the text box in the send box.
 
-- [`useTextBoxSubmit`](#usetextboxsubmit)
-- [`useTextBoxValue`](#usetextboxvalue)
+-  [`useTextBoxSubmit`](#usetextboxsubmit)
+-  [`useTextBoxValue`](#usetextboxvalue)
 
 ### `useTextBoxSubmit`
 
@@ -626,7 +626,7 @@ The setter function will call the setter of [`useSendBoxValue`](#usesendboxvalue
 
 These are hooks that are specific to the typing indicator.
 
-- [`useTypingIndicatorVisible`](#usetypingindicatorvisible)
+-  [`useTypingIndicatorVisible`](#usetypingindicatorvisible)
 
 ### `useTypingIndicatorVisible`
 
@@ -638,5 +638,5 @@ This function will return whether the typing indicator should be visible or not.
 
 This function derives the visibility of the typing indicator by:
 
-- `typingAnimationDuration` value specified in style options, in milliseconds
-- Values from the `useLastTypingAt` hook
+-  `typingAnimationDuration` value specified in style options, in milliseconds
+-  Values from the `useLastTypingAt` hook
diff --git a/samples/23.a.hybrid-react-npm/README.md b/samples/23.a.hybrid-react-npm/README.md
@@ -21,10 +21,10 @@ To run this sample, follow steps below:
 
 There are two packages in this [monorepo](https://en.wikipedia.org/wiki/Monorepo):
 
-- `app`: the hosting app, created using [`create-react-app`](https://github.com/facebook/create-react-app)
-   - Requires `react@16.0.0` and `react-dom@16.0.0`
-- `chat-component`: the chat component, which will render Web Chat
-   - Requires `react@16.8.6` and `react-dom@16.8.6`
+-  `app`: the hosting app, created using [`create-react-app`](https://github.com/facebook/create-react-app)
+   -  Requires `react@16.0.0` and `react-dom@16.0.0`
+-  `chat-component`: the chat component, which will render Web Chat
+   -  Requires `react@16.8.6` and `react-dom@16.8.6`
 
 The hosting app will create an [isolated DOM element](https://reactjs.org/docs/integrating-with-other-libraries.html) and pass it to the `chat-component` package. The chat component will control the rendering of the DOM element, while the hosting app controls the lifetime.
 
@@ -38,9 +38,9 @@ In `chat-component` package, we created an entrypoint for rendering a React comp
 import { render, unmountComponentAtNode } from 'react-dom';
 
 function renderChatComponent(props, node) {
-  render(<ChatComponent {...props} />, node);
+   render(<ChatComponent {...props} />, node);
 
-  return () => unmountComponentAtNode(node);
+   return () => unmountComponentAtNode(node);
 }
 ```
 
@@ -52,17 +52,15 @@ In the host application, we created a new component called `<ChatComponentWrappe
 
 ```jsx
 class ChatComponentWrapper extends React.Component {
-  constructor(props) {
-    super(props);
+   constructor(props) {
+      super(props);
 
-    this.saveChatComponentRef = ref => this.chatComponentRef = ref;
-  }
+      this.saveChatComponentRef = ref => (this.chatComponentRef = ref);
+   }
 
-  render() {
-    return (
-      <div ref={ this.saveChatComponentRef } />
-    );
-  }
+   render() {
+      return <div ref={this.saveChatComponentRef} />;
+   }
 }
 ```
 
@@ -147,18 +145,18 @@ In this approach, we isolated the DOM element from the React DOM tree. Then we u
 
 There are several key limitations to this approach:
 
-- Increased memory usage and bundle size
-- Only `props` can be passed between two DOM trees; React Context cannot be passed between them without extra work
-   - It is doable, but will require two different context objects and they must be wired up manually
-   - This includes `<Provider>` and `connect()` HOC in `react-redux`
-- [React-based customizations](https://github.com/microsoft/botframework-webchat#customize-web-chat-ui) added to Web Chat will still require React 16.8.6 or up
-   - For example, activity and attachment middleware require the newer version of React
-- Introducing new package(s), which could increase unnecessary fragmentation in your codebase
-- The rendering processes between two DOM trees are asynchronous and not guaranteed to complete at the same time
+-  Increased memory usage and bundle size
+-  Only `props` can be passed between two DOM trees; React Context cannot be passed between them without extra work
+   -  It is doable, but will require two different context objects and they must be wired up manually
+   -  This includes `<Provider>` and `connect()` HOC in `react-redux`
+-  [React-based customizations](https://github.com/microsoft/botframework-webchat#customize-web-chat-ui) added to Web Chat will still require React 16.8.6 or up
+   -  For example, activity and attachment middleware require the newer version of React
+-  Introducing new package(s), which could increase unnecessary fragmentation in your codebase
+-  The rendering processes between two DOM trees are asynchronous and not guaranteed to complete at the same time
 
 # Further reading
 
-- [Web Chat: Customize Web Chat UI](https://github.com/microsoft/botframework-webchat#customize-web-chat-ui)
-- [React: Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)
-- [React: Integrating with Other Libraries](https://reactjs.org/docs/integrating-with-other-libraries.html)
-- [React: Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html)
+-  [Web Chat: Customize Web Chat UI](https://github.com/microsoft/botframework-webchat#customize-web-chat-ui)
+-  [React: Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)
+-  [React: Integrating with Other Libraries](https://reactjs.org/docs/integrating-with-other-libraries.html)
+-  [React: Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html)
