From 67c413dc236b2184cc7144b1aa34275083904650 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gon=C3=A7alo=20Vieira=20Figueiredo?= <me@goncalovf.com>
Date: Tue, 7 Sep 2021 15:33:17 +0100
Subject: [PATCH] Add plain example

---
 .../pages/components/snackbars/snackbars.md    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/snackbars/snackbars.md b/docs/src/pages/components/snackbars/snackbars.md
index 12b58c5d1332b2..3bd954d7f0c0e7 100644
--- a/docs/src/pages/components/snackbars/snackbars.md
+++ b/docs/src/pages/components/snackbars/snackbars.md
@@ -61,7 +61,7 @@ Snackbars should appear above FABs (on mobile).
 
 {{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}}
 
-### Change Transition
+### Change transition
 
 [Grow](/components/transitions/#grow) is the default transition but you can use a different one.
 
@@ -71,6 +71,22 @@ Snackbars should appear above FABs (on mobile).
 
 You can change the direction of the [Slide](/components/transitions/#slide) transition.
 
+Example of making the slide transition to the left:
+
+```jsx
+import Slide from '@material-ui/core/Slide';
+
+function TransitionLeft(props) {
+  return <Slide {...props} direction="left" />;
+}
+
+export default function MyComponent() {
+  return <Snackbar TransitionComponent={TransitionLeft} />;
+}
+```
+
+Other examples:
+
 {{"demo": "pages/components/snackbars/DirectionSnackbar.js"}}
 
 ## Complementary projects