docs(toast): improved toast docs (#181)

adaptui · Dec 4, 2020 · 4b34d8f · 4b34d8f · vercel · Dec 4, 2020
1 parent fccc3de
commit 4b34d8f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/docs-templates/toast.md b/docs-templates/toast.md
@@ -10,6 +10,31 @@ the
 
 <!-- IMPORT_EXAMPLE src/toast/stories/__js/ToastBasic.component.jsx -->
 
+We can utilize the `toastWrapper` prop to add animations and other wrappers
+around the toast.
+
+Example:
+
+```jsx
+<ToastProvider
+  animationTimeout={500}
+  toastWrapper={({ id, isVisible, children }) => (
+    <CSSTransition className="fadeIn" in={isVisible} timeout={500}>
+      {children}
+    </CSSTransition>
+  )}
+  toastTypes={{
+    primary: ({ content }) => <span>{content}</span>,
+  }}
+>
+  <ToastTriggers />
+</ToastProvider>
+```
+
+We also have to add the `animationTimeout` inorder to specify a delay before
+removing the toast from the state, this would ensure the CSS or any other
+animations has the chance to finish without being interrupted.
+
 <!-- CODESANDBOX
 link_title: Toast Basic - Open On Sandbox
 js: src/toast/stories/__js/ToastBasic.component.jsx

diff --git a/docs/toast.md b/docs/toast.md
@@ -76,6 +76,31 @@ const ToastTriggers = () => {
 };
 ```
 
+We can utilize the `toastWrapper` prop to add animations and other wrappers
+around the toast.
+
+Example:
+
+```jsx
+<ToastProvider
+  animationTimeout={500}
+  toastWrapper={({ id, isVisible, children }) => (
+    <CSSTransition className="fadeIn" in={isVisible} timeout={500}>
+      {children}
+    </CSSTransition>
+  )}
+  toastTypes={{
+    primary: ({ content }) => <span>{content}</span>,
+  }}
+>
+  <ToastTriggers />
+</ToastProvider>
+```
+
+We also have to add the `animationTimeout` inorder to specify a delay before
+removing the toast from the state, this would ensure the CSS or any other
+animations has the chance to finish without being interrupted.
+
 [Toast Basic - Open On Sandbox](https://codesandbox.io/s/2z7hj)
 
 [Toast Styled - Open On Sandbox](https://codesandbox.io/s/k9rki)