Update docs for 2.0

timolins · May 16, 2021 · b2f4611 · b2f4611
1 parent ad49ba0
commit b2f4611
Show file tree

Hide file tree

Showing 7 changed files with 413 additions and 72 deletions.
diff --git a/site/components/docs-layout.tsx b/site/components/docs-layout.tsx
@@ -9,7 +9,7 @@ const TableItem: React.FC<{
   href: string;
 }> = ({ children, href }) => (
   <Link href={href}>
-    <a className="rounded px-3 py-2 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700">
+    <a className="rounded px-3 py-1.5 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700">
       {children}
     </a>
   </Link>
@@ -53,22 +53,25 @@ export default function DocsLayout({ children, meta }) {
             GitHub
           </a>
         </header>
-        <nav className="font-medium rounded-lg">
-          <div className="flex flex-col mb-8">
+        <nav className="font-medium rounded-lg ">
+          <div className="flex flex-col mb-8 sticky top-0">
             <TableHeader>Overview</TableHeader>
 
             <TableItem href="/docs">Get Started</TableItem>
 
             <TableHeader>API</TableHeader>
 
             <TableItem href="/docs/toast">toast()</TableItem>
-            <TableItem href="/docs/toaster">Toaster</TableItem>
+            <TableItem href="/docs/toaster">{`Toaster`}</TableItem>
+            <TableItem href="/docs/toast-bar">{`ToastBar`}</TableItem>
             <TableItem href="/docs/use-toaster">useToaster()</TableItem>
             <TableItem href="/docs/use-toaster-store">
               useToasterStore()
             </TableItem>
             <TableHeader>Guides</TableHeader>
             <TableItem href="/docs/styling">Styling</TableItem>
+            <TableHeader>Releases</TableHeader>
+            <TableItem href="/docs/version-2">New in 2.0</TableItem>
           </div>
         </nav>
 

diff --git a/site/pages/docs/styling.mdx b/site/pages/docs/styling.mdx
@@ -55,20 +55,41 @@ toast('I have a border.', {
 });
 ```
 
-## Changing the offset
+## Change the offset
 
-If you want to change the offset of your noticiations, add a margin to your `toastOptions`.
+If you want to change the offset of your notifications, you can adapt the absolute position in `containerStyle`.
 
 ```jsx
 <Toaster
-  toastOptions={{
-    style: {
-      margin: '50px',
-    },
+  containerStyle={{
+    top: 20,
+    left: 20,
+    bottom: 20,
+    right: 20,
+  }}
+/>
+```
+
+## Change position of the toaster
+
+By default, the toaster is position fixed in the window. If you want to place it somewhere else, you can ovewrite the position with `containerStyle`.
+
+```jsx
+<Toaster
+  containerStyle={{
+    position: 'relative',
   }}
 />
 ```
 
+## Change offset between toasts
+
+If you want to change the offset between notifications change the gutter.
+
+```jsx
+<Toaster gutter={24} />
+```
+
 ## Change icon color
 
 All icon colors can be changed by supplying a `iconTheme` with a `primary` & `secondary` color.
@@ -85,3 +106,23 @@ All icon colors can be changed by supplying a `iconTheme` with a `primary` & `se
   }}
 />
 ```
+
+## Change enter and exit animations
+
+In this example, we provide a render function with the default `<ToastBar />`. We overwrite the animation style based on the current state.
+
+```jsx
+import { Toaster, ToastBar } from 'react-hot-toast';
+
+<Toaster>
+  {(t) => (
+    <ToastBar
+      toast={t}
+      style={{
+        ...t.style,
+        animation: t.visible ? 'custom-enter 1s ease' : 'custom-exit 1s ease',
+      }}
+    />
+  )}
+</Toaster>;
+```
diff --git a/site/pages/docs/toast-bar.mdx b/site/pages/docs/toast-bar.mdx
@@ -0,0 +1,50 @@
+import Layout from '../../components/docs-layout';
+import toast from 'react-hot-toast';
+
+export const meta = {
+  title: '<ToasterBar/> API',
+};
+
+export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
+
+# `<ToasterBar />` API
+
+This is the **default toast component** rendered by the [Toaster](/docs/toaster). You can use this component in a [Toaster](/docs/toaster) with a custom render function to overwrite its defaults.
+
+## Available options
+
+```jsx
+<ToastBar
+  toast={t}
+  style={{}} // Overwrite styles
+  position="top-center" // Used to adapt the animation
+/>
+```
+
+## Add custom content
+
+You can add a **render function to the ToastBar to modify its content**. An object containing The `icon` as well as the `message` are passed into the function.
+
+### Add a dismiss button
+
+In this example we add a basic dismiss button to all toasts, except if the loading one.
+
+```jsx
+import { Toaster, ToastBar } from 'react-hot-toast';
+
+<Toaster>
+  {(t) => (
+    <ToastBar toast={t}>
+      {({ icon, message }) => (
+        <>
+          {icon}
+          {message}
+          {t.type !== 'loading' && (
+            <button onClick={() => toast.dismiss(t.id)}>X</button>
+          )}
+        </>
+      )}
+    </ToastBar>
+  )}
+</Toaster>;
+```
diff --git a/site/pages/docs/toast.mdx b/site/pages/docs/toast.mdx
@@ -7,7 +7,38 @@ export const meta = {
 
 # `toast()` API
 
-Call it to create a toast from anywhere, even outside React. Make sure you add the `<Toaster/>` component to your app first.
+Call it to create a toast from anywhere, even outside React. Make sure you add the [`<Toaster/>`](/docs/toaster) component to your app first.
+
+## Available toast options
+
+You can provide `ToastOptions` as the second argument. They will overwrite all options received from [`<Toaster/>`](/docs/toaster).
+
+```js
+toast('Hello World', {
+  duration: 4000,
+
+  // Styling
+  style: {},
+  className: '',
+
+  // Custom Icon
+  icon: '👏',
+
+  // Change colors of success/error/loading icon
+  iconTheme: {
+    primary: '#000',
+    secondary: '#fff',
+  },
+
+  // Aria
+  ariaProps: {
+    role: 'status',
+    'aria-live': 'polite',
+  },
+});
+```
+
+## Creating a toast
 
 ### Blank
 
@@ -23,23 +54,31 @@ The most basic variant. It does not have an icon by default, but you can provide
 toast.success('Successfully created!');
 ```
 
-Creates a notification with an animated checkmark. It can be themed with `iconTheme`.
+Creates a notification with an animated checkmark. It can be themed with the `iconTheme` option.
 
 ### Error
 
 ```js
 toast.error('This is an error!');
 ```
 
-Creates a notification with an animated error icon. It can be themed with `iconTheme`.
+Creates a notification with an animated error icon. It can be themed with the `iconTheme` option.
+
+### Custom (JSX)
+
+```js
+toast.custom(<div>Hello World</div>);
+```
+
+Creates a custom notification with JSX without default styles.
 
 ### Loading
 
 ```js
 toast.loading('Waiting...');
 ```
 
-This will create a loading notification. Most likely you want to update it manually afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
+This will create a loading notification. Most likely, you want to update it manually afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
 
 ### Promise
 
@@ -83,42 +122,16 @@ toast.promise(
 );
 ```
 
-## Available options
-
-You can provide `ToastOptions` as second argument. They will overwrite all options received from `<Toaster/>`.
-
-```js
-toast('Hello World', {
-  duration: 4000,
-
-  // Styling
-  style: {},
-  className: '',
-
-  // Custom Icon
-  icon: '👏',
-
-  // Change colors of success/error/loading icon
-  iconTheme: {
-    primary: '#000',
-    secondary: '#fff',
-  },
-
-  // Aria
-  role: 'status',
-  ariaLive: 'polite',
-});
-```
-
 ## Default durations
 
-Every type has their own duration. You can overwrite them `duration` with the toast options. This can be done per toast options or globally by the [`<Toaster/>`](/docs/toaster).
+Every type has its own duration. You can overwrite them `duration` with the toast options. This can be done per toast options or globally by the [`<Toaster/>`](/docs/toaster).
 
 | type      | duration |
 | --------- | -------- |
 | `blank`   | 4000     |
 | `error`   | 4000     |
 | `success` | 2000     |
+| `custom`  | 4000     |
 | `loading` | Infinity |
 
 ### Dismiss toast programmatically
@@ -157,6 +170,8 @@ toast.remove()
 
 ### Update an existing toast
 
+Each toast call returns a unique id. Use in the toast options to update the existing toast.
+
 ```js
 const toastId = toast.loading('Loading...');
 
@@ -167,9 +182,19 @@ toast.success('This worked', {
 });
 ```
 
+### Prevent duplicate toasts
+
+To prevent duplicates of the same kind, you can provide a unique permanent id.
+
+```js
+toast.success('Copied to clipboard!', {
+  id: 'clipboard',
+});
+```
+
 ### Render JSX custom content
 
-You can provide a React components instead of text.
+You can provide a React component instead of text. If you don't want any default styles use `toast.custom()` instead.
 
 ```jsx
 toast(
@@ -182,7 +207,7 @@ toast(
 );
 ```
 
-You can also supply a function that receives the `Toast` as argument. This can be usefull to add a custom dismiss button.
+You can also supply a function that receives the `Toast` as an argument, giving you access to all properties. This allows you to access the toast id, which can be used to add a dismiss button.
 
 ```jsx
 toast(