Version 2.0

package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-hot-toast",
-  "version": "1.0.2",
+  "version": "2.0.0-beta.0",
   "author": "Timo Lins",
   "license": "MIT",
+  "sideEffects": false,
   "repository": "timolins/react-hot-toast",
   "keywords": [
     "react",
@@ -60,10 +61,11 @@
     "@size-limit/preset-small-lib": "^4.9.1",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "csstype": "^3.0.7",
     "size-limit": "^4.9.1",
     "tsdx": "^0.14.1"
   },
   "dependencies": {
-    "goober": "^2.0.15"
+    "goober": "^2.0.35"
   }
 }

site/components/code.tsx

@@ -103,9 +103,10 @@ const theme: PrismTheme = {
 
 export const Code: React.FC<{
   snippet: string;
+  language?: Language;
   className?: string;
 }> = (props) => {
-  const language = (props.className?.replace(/language-/, '') as any) || 'jsx';
+  const language = props.language || 'jsx';
 
   return (
     <Highlight

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>
 

site/components/sections/toast-example.tsx

@@ -169,6 +169,102 @@ const examples: Array<{
       });
     },
   },
+  {
+    title: 'Custom Position',
+    emoji: '⬆️',
+    snippet: `toast.success('Always at the bottom.', {
+  position: "bottom-center"
+})`,
+    action: () => {
+      toast.success('Always at the bottom.', {
+        position: 'bottom-center',
+        duration: 10000,
+      });
+    },
+  },
+  {
+    title: 'TailwindCSS',
+    emoji: '️💨',
+    snippet: `toast.custom((t) => (
+  <div
+    className={\`\${
+      t.visible ? 'animate-enter' : 'animate-leave'
+    } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5\`}
+  >
+    <div className="flex-1 w-0 p-4">
+      <div className="flex items-start">
+        <div className="flex-shrink-0 pt-0.5">
+          <img
+            className="h-10 w-10 rounded-full"
+            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
+            alt=""
+          />
+        </div>
+        <div className="ml-3 flex-1">
+          <p className="text-sm font-medium text-gray-900">
+            Emilia Gates
+          </p>
+          <p className="mt-1 text-sm text-gray-500">
+            Sure! 8:30pm works great!
+          </p>
+        </div>
+      </div>
+    </div>
+    <div className="flex border-l border-gray-200">
+      <button
+        onClick={() => toast.dismiss(t.id)}
+        className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+))`,
+    action: () => {
+      // toast.custom(<TestApp />);
+
+      toast.custom(
+        (t) => (
+          <div
+            className={`${
+              t.visible ? 'animate-enter' : 'animate-leave'
+            } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
+          >
+            <div className="flex-1 w-0 p-4">
+              <div className="flex items-start">
+                <div className="flex-shrink-0 pt-0.5">
+                  <img
+                    className="h-10 w-10 rounded-full"
+                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
+                    alt=""
+                  />
+                </div>
+                <div className="ml-3 flex-1">
+                  <p className="text-sm font-medium text-gray-900">
+                    Emilia Gates
+                  </p>
+                  <p className="mt-1 text-sm text-gray-500">
+                    Sure! 8:30pm works great!
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="flex border-l border-gray-200">
+              <button
+                onClick={() => toast.dismiss(t.id)}
+                className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        ),
+        {
+          duration: 10000,
+        }
+      );
+    },
+  },
 ];
 
 export const ToastExample = () => {
@@ -196,8 +292,8 @@ export const ToastExample = () => {
           ))}
         </div>
       </div>
-      <div className="md:h-72 w-full overflow-hidden">
-        <Code snippet={snippet} />
+      <div className="md:h-72 w-full overflow-auto rounded-lg">
+        <Code snippet={snippet} className="!h-auto min-h-full" />
       </div>
     </section>
   );

site/next.config.js

@@ -1,14 +1,19 @@
 const withTM = require('next-transpile-modules')(['react-hot-toast']);
+const remarkSlugs = require('rehype-slug');
+
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/,
+  extension: /.mdx?$/,
+  options: {
+    rehypePlugins: [remarkSlugs],
+  },
 });
 const withPlugins = require('next-compose-plugins');
 
 const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
       config.module.rules.push({
-        test: /\.svg$/,
+        test: /.svg$/,
         use: ['@svgr/webpack'],
       });