Merge pull request #17 from gunnartorfis/custom

feat: custom jsx toasts
gunnartorfis · Sep 5, 2024 · bea2ae9 · bea2ae9
2 parents a9359c3 + 4fc5f56
commit bea2ae9
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 4 deletions.
diff --git a/docs/docs/toast.md b/docs/docs/toast.md
@@ -91,3 +91,16 @@ updateToast(toastId, {
   duration: 5000,
 });
 ```
+
+### Custom JSX
+
+You can pass custom JSX elements to the toast function to render more complex content:
+
+```jsx
+toast.custom(
+  <View>
+    <Text>Custom toast content</Text>
+    <Button title="Close" onPress={() => toast.dismiss()} />
+  </View>
+);
+```
diff --git a/example/src/ToastDemo.tsx b/example/src/ToastDemo.tsx
@@ -1,4 +1,4 @@
-import { Button, Text, View } from 'react-native';
+import { Button, Pressable, Text, View } from 'react-native';
 import * as React from 'react';
 import {
   toast,
@@ -84,6 +84,57 @@ export const ToastDemo: React.FC = () => {
           );
         }}
       />
+      <Button
+        title="Custom JSX"
+        onPress={() => {
+          toast.custom(
+            <View
+              style={{
+                width: '80%',
+                backgroundColor: '#26252A',
+                paddingLeft: 24,
+                paddingRight: 8,
+                paddingVertical: 8,
+                borderRadius: 999,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                borderCurve: 'continuous',
+              }}
+            >
+              <Text
+                style={{
+                  color: '#fff',
+                  fontWeight: '600',
+                }}
+              >
+                Custom JSX
+              </Text>
+              <Pressable
+                style={{
+                  backgroundColor: '#40424B',
+                  borderWidth: 1,
+                  borderColor: '#55555C',
+                  borderRadius: 999,
+                  padding: 8,
+                }}
+              >
+                <Text
+                  style={{
+                    color: '#fff',
+                    fontWeight: '600',
+                  }}
+                >
+                  Press me
+                </Text>
+              </Pressable>
+            </View>,
+            {
+              duration: 30000,
+            }
+          );
+        }}
+      />
     </SafeAreaView>
   );
 };
diff --git a/src/toast-fns.ts b/src/toast-fns.ts
@@ -35,14 +35,19 @@ toast.info = (title: string, options = {}) => {
 };
 
 toast.promise = (promise, options) => {
-  const toastId = getToastContext().addToast(options.loading, {
+  return getToastContext().addToast(options.loading, {
     ...options,
     variant: ToastVariant.INFO,
     promiseOptions: {
       promise,
       ...options,
     },
   });
+};
 
-  return toastId;
+toast.custom = (element, options) => {
+  return getToastContext().addToast('', {
+    element,
+    ...options,
+  });
 };
diff --git a/src/toast.tsx b/src/toast.tsx
@@ -11,6 +11,7 @@ import { useColors } from './use-colors';
 export const Toast: React.FC<ToastProps> = ({
   id,
   title,
+  element,
   description,
   duration: durationProps,
   variant,
@@ -91,6 +92,10 @@ export const Toast: React.FC<ToastProps> = ({
     };
   }, [duration, id, onHide, promiseOptions, updateToast]);
 
+  if (element) {
+    return element;
+  }
+
   return (
     <ToastSwipeHandler
       onRemove={() => {

diff --git a/src/toaster.tsx b/src/toaster.tsx
@@ -48,7 +48,7 @@ export const ToasterUI: React.FC<ToastProviderProps> = ({
     (title, options?: ToastFunctionOptions) => {
       const id = uuidv4();
       setToasts((currentToasts) => {
-        const newToasts = [
+        const newToasts: ToastProps[] = [
           ...currentToasts,
           {
             ...options,

diff --git a/src/types.ts b/src/types.ts
@@ -3,6 +3,7 @@ import type { TextStyle, ViewStyle } from 'react-native';
 export type ToastProps = {
   id: string;
   title: string;
+  element?: React.ReactElement;
   description?: string;
   duration?: number;
   variant?: ToastVariant;
@@ -92,6 +93,7 @@ export type ToastFunctionOptions = {
   description?: string;
   duration?: number;
   promiseOptions?: PromiseOptions;
+  element?: React.ReactElement;
 };
 
 export type ToastFunctionBase = {
@@ -110,10 +112,15 @@ export type ToastFunctionPromise = <T>(
   promise: Promise<T>,
   options: Omit<PromiseOptions, 'promise'>
 ) => string;
+export type ToastFunctionCustom = (
+  element: React.ReactElement,
+  options?: Pick<ToastFunctionOptions, 'duration'>
+) => string;
 
 export type ToastFunction = ToastFunctionBase & {
   success: ToastFunctionWithVariant;
   error: ToastFunctionWithVariant;
   info: ToastFunctionWithVariant;
   promise: ToastFunctionPromise;
+  custom: ToastFunctionCustom;
 };