Preserve line breaks in toast body

Closes #144
timolins · Jan 4, 2022 · f981e45 · f981e45 · vercel · Jan 4, 2022
1 parent b8b3762
commit f981e45
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/site/components/sections/toast-example.tsx b/site/components/sections/toast-example.tsx
@@ -63,14 +63,14 @@ const examples: Array<{
     title: 'Multi Line',
     emoji: '↕️',
     snippet: `toast(
-  "This toast is super big. I don't think anyone could eat it in one bite. It's larger than you expected. You eat it but it does not seem to get smaller.",
+  "This toast is super big. I don't think anyone could eat it in one bite.\\n\\nIt's larger than you expected. You eat it but it does not seem to get smaller.",
   {
     duration: 6000,
   }
 );`,
     action: () => {
       toast(
-        "This toast is super big. I don't think anyone could eat it in one bite. It's larger than you expected. You eat it but it does not seem to get smaller.",
+        "This toast is super big. I don't think anyone could eat it in one bite.\n\n It's larger than you expected. You eat it but it does not seem to get smaller.",
         {
           duration: 6000,
         }

diff --git a/src/components/toast-bar.tsx b/src/components/toast-bar.tsx
@@ -38,6 +38,7 @@ const Message = styled('div')`
   margin: 4px 10px;
   color: inherit;
   flex: 1 1 auto;
+  white-space: pre-line;
 `;
 
 interface ToastBarProps {