feat: offset support

docs/docs/Toaster.md

@@ -60,6 +60,7 @@ You can provide default styles for all toasts by passing `style` and `className`
 | theme                    |                                          `light`, `dark`                                           |      `light` |
 | visibleToasts            |                                  Maximum number of visible toasts                                  |          `3` |
 | position                 |                              Place where the toasts will be rendered                               | `top-center` |
+| offset                   |                                   Offset from the top or bottom                                    |          `0` |
 | closeButton              |                                 Adds a close button to all toasts                                  |      `false` |
 | invert                   |                             Dark toasts in light mode and vice versa.                              |      `false` |
 | toastOptions             | These will act as default options for all toasts. See [toast()](/toast) for all available options. |         `{}` |

docs/docs/sonner.md

@@ -43,7 +43,7 @@
 | dir                      | ❌                | ✅     |
 | richColors               | ❌                | ✅     |
 | expand                   | 🕸️                | ✅     |
-| offset                   | ❌                | ✅     |
+| offset                   | ✅                | ✅     |
 | hotkey                   | 🕸️                | ✅     |
 | loadingIcon              | ❌                | ✅     |
 | pauseWhenPageIsHidden    | ❌                | ✅     |

example/src/App.tsx

@@ -29,6 +29,7 @@ const App: React.FC = () => {
         </NavigationContainer>
         <Toaster
           position="top-center"
+          // offset={100}
           duration={3000}
           swipToDismissDirection="up"
           visibleToasts={4}

src/animations.ts

@@ -7,36 +7,42 @@ import type { ToastPosition } from './types';
 export const ANIMATION_DURATION = 300;
 
 export const useToastLayoutAnimations = () => {
-  const { position } = useToastContext();
+  const { position, offset } = useToastContext();
 
   return React.useMemo(
     () => ({
       entering: () => {
         'worklet';
-        return getToastEntering({ position });
+        return getToastEntering({ position, offset });
       },
       exiting: () => {
         'worklet';
-        return getToastExiting({ position });
+        return getToastExiting({ position, offset });
       },
     }),
-    [position]
+    [offset, position]
   );
 };
 
 type GetToastAnimationParams = {
   position: ToastPosition;
+  offset: number;
 };
 
-export const getToastEntering = ({ position }: GetToastAnimationParams) => {
+export const getToastEntering = ({
+  position,
+  offset,
+}: GetToastAnimationParams) => {
   'worklet';
 
   const animations = {
     opacity: withTiming(1, { easing: easeOutCirc }),
     transform: [
       { scale: withTiming(1, { easing: easeOutCirc }) },
       {
-        translateY: withTiming(0, { easing: easeOutCirc }),
+        translateY: withTiming(position === 'top-center' ? offset : -offset, {
+          easing: easeOutCirc,
+        }),
       },
     ],
   };
@@ -57,7 +63,10 @@ export const getToastEntering = ({ position }: GetToastAnimationParams) => {
   };
 };
 
-export const getToastExiting = ({ position }: GetToastAnimationParams) => {
+export const getToastExiting = ({
+  position,
+  offset,
+}: GetToastAnimationParams) => {
   'worklet';
 
   const animations = {
@@ -75,7 +84,7 @@ export const getToastExiting = ({ position }: GetToastAnimationParams) => {
     opacity: 1,
     transform: [
       {
-        translateY: 0,
+        translateY: position === 'top-center' ? offset : -offset,
       },
     ],
   };

src/constants.ts

@@ -3,6 +3,7 @@ import type { ToastPosition, ToastSwipeDirection, ToastVariant } from './types';
 export const toastDefaultValues: {
   duration: number;
   position: ToastPosition;
+  offset: number;
   swipeToDismissDirection: ToastSwipeDirection;
   variant: ToastVariant;
   visibleToasts: number;
@@ -13,6 +14,7 @@ export const toastDefaultValues: {
 } = {
   duration: 4000,
   position: 'top-center',
+  offset: 0,
   swipeToDismissDirection: 'up',
   variant: 'info',
   visibleToasts: 3,

src/toaster.tsx

@@ -32,6 +32,7 @@ export const Toaster: React.FC<ToasterProps> = (props) => {
 export const ToasterUI: React.FC<ToasterProps> = ({
   duration = toastDefaultValues.duration,
   position = toastDefaultValues.position,
+  offset = toastDefaultValues.offset,
   visibleToasts = toastDefaultValues.visibleToasts,
   swipToDismissDirection = toastDefaultValues.swipeToDismissDirection,
   closeButton,
@@ -136,6 +137,7 @@ export const ToasterUI: React.FC<ToasterProps> = ({
     () => ({
       duration: duration ?? toastDefaultValues.duration,
       position: position ?? toastDefaultValues.position,
+      offset: offset ?? toastDefaultValues.offset,
       swipToDismissDirection:
         swipToDismissDirection ?? toastDefaultValues.swipeToDismissDirection,
       closeButton: closeButton ?? toastDefaultValues.closeButton,
@@ -149,6 +151,7 @@ export const ToasterUI: React.FC<ToasterProps> = ({
     [
       duration,
       position,
+      offset,
       swipToDismissDirection,
       closeButton,
       unstyled,

src/types.ts

@@ -128,6 +128,7 @@ export type ToasterContextType = Required<
     | 'styles'
     | 'classNames'
     | 'icons'
+    | 'offset'
   >
 > & {
   addToast: AddToastContextHandler;