Merge pull request #296 from Taar/advanced-docs

Update Advanced Docs

docs/advanced.md

@@ -20,8 +20,9 @@ at the [default set of components](../packages/components/src/mdx-components.js)
 
 ## Custom Provider component
 
-A custom Provider component can be added to the theme to wrap the entire application.
+A custom Provider component is useful for adding custom context providers in React or adding persistent UI elements to the entire deck.
-This is useful for adding custom context providers in React or adding persistent UI elements to the entire deck.
+
+To define a custom Provider component, you'll need to import it into your custom theme and set it using the key `Provider` like shown below:
 
 ```js
 // example theme.js
@@ -44,6 +45,37 @@ which can be used to show custom page numbers or add other elements to the UI.
 - `step`: (number) the current visible step in an Appear or Step component
 - Each slide includes a `meta` object with a `notes` field when the Notes component is used within a slide
 
+#### Example
+
+The example below will display the current slide out of the total amount of slides.
+
+```js
+// Example Provider.js
+import React from 'react'
+
+function AtTheBottomCenter ({ children }) {
+  const css = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    color: #ffffff;
+    textAlign: 'center',
+  }
+
+  return <div css={css}>
+    {children}
+  </div>
+}
+
+export function Provider ({ children, ...props }) {
+  return <>
+    {children}
+    <AtTheBottomCenter>{props.index}/{props.slides.length}</AtTheBottomCenter>
+  </>
+}
+```
+
 ## Combining multiple mdx files
 
 Unlike the official `@mdx-js/loader`,