docs: new Toaster docs

gunnartorfis · Sep 5, 2024 · 4d4c316 · 4d4c316
1 parent 0e2971a
commit 4d4c316
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 6 deletions.
diff --git a/docs/docs/Toaster.md b/docs/docs/Toaster.md
@@ -0,0 +1,57 @@
+---
+sidebar_position: 3
+---
+
+The Toaster is the context component which manages the addition, update, and removal of toast notifications and must be rendered within both the `SafeAreaProvider` and `GestureHandlerRootView`.
+
+## Usage
+
+To use the Toaster, place it at the root level of your app, after the NavigationContainer, to ensure it works across all screens. Here's an example setup:
+
+```tsx
+import { Toaster } from 'react-native-reanimated-toasts';
+import { NavigationContainer } from '@react-navigation/native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <GestureHandlerRootView>
+        <NavigationContainer>{/* App content */}</NavigationContainer>
+        <Toaster />
+      </GestureHandlerRootView>
+    </SafeAreaProvider>
+  );
+}
+```
+
+## Props
+
+| Prop                     | Type                  | Default                    | Description                                                 |
+| ------------------------ | --------------------- | -------------------------- | ----------------------------------------------------------- |
+| `duration`               | `number`              | `3000` (ms)                | Duration each toast is visible before auto-dismissal.       |
+| `position`               | `ToastPosition`       | `ToastPosition.TOP_CENTER` | The position of the toasts (`top-center`, `bottom-center`). |
+| `maxToasts`              | `number`              | `3`                        | Maximum number of toasts to show at once.                   |
+| `swipToDismissDirection` | `ToastSwipeDirection` | `ToastSwipeDirection.UP    | Swipe direction to dismiss (`left`, `up`).                  |
+
+### Style related props
+
+| Prop                      | Type                                | Default     | Description                                                                 |
+| ------------------------- | ----------------------------------- | ----------- | --------------------------------------------------------------------------- |
+| `rootStyle`               | `ViewStyle`                         | `undefined` | Style for the root container.                                               |
+| `rootClassName`           | `string`                            | `undefined` | `NativeWind` class names for root container styling.                        |
+| `toastContainerStyle`     | `ViewStyle`                         | `undefined` | Style for the toast container (wrapper for individual toasts).              |
+| `toastContainerClassName` | `string`                            | `undefined` | `NativeWind` class names for the toast container.                           |
+| `toastContentStyle`       | `ViewStyle`                         | `undefined` | Style for individual toast content.                                         |
+| `toastContentClassName`   | `string`                            | `undefined` | `NativeWind` class names for individual toast content.                      |
+| `actionClassName`         | `string`                            | `undefined` | `NativeWind` class names for the toast action button.                       |
+| `actionLabelClassName`    | `string`                            | `undefined` | `NativeWind` class names for the toast action label.                        |
+| `descriptionClassName`    | `string`                            | `undefined` | `NativeWind` class names for the toast description.                         |
+| `titleClassName`          | `string`                            | `undefined` | `NativeWind` class names for the toast title.                               |
+| `actionStyle`             | `ViewStyle`                         | `undefined` | Style for the toast action button.                                          |
+| `actionLabelStyle`        | `TextStyle`                         | `undefined` | Style for the toast action label.                                           |
+| `descriptionStyle`        | `TextStyle`                         | `undefined` | Style for the toast description.                                            |
+| `titleStyle`              | `TextStyle`                         | `undefined` | Style for the toast title.                                                  |
+| `getIconColorForVariant`  | `(variant: ToastVariant) => string` | `undefined` | Function to return the icon color based on toast variant (`success`, etc.). |
+| `closeIconColor`          | `string`                            | `undefined` | Color for the toast's close icon.                                           |
diff --git a/docs/docs/index.md b/docs/docs/index.md
@@ -69,8 +69,6 @@ function SomeComponent() {
 }
 ```
 
-Check out the [Showing a toast](usage) section to see more details on how to use the package.
-
 ## Examples
 
 An example can be found in the [`example`](https://github.com/gunnartorfis/react-native-reanimated-toasts/tree/main/example) workspace.
diff --git a/docs/docs/usage.md → docs/docs/toast.md b/docs/docs/usage.md → docs/docs/toast.md
@@ -1,4 +1,8 @@
-# Showing a toast
+---
+sidebar_position: 2
+---
+
+# toast()
 
 ## Basic toast
 
@@ -75,8 +79,6 @@ const toastId = toast.promise(fetchData(), {
 
 In this example, the toast.promise function will display a "Loading data..." message while the fetchData promise is in progress, and update the message to the success or error text based on the promise's outcome.
 
-## Other
-
 ### Updating existing toasts
 
 You can update an existing toast by using the updateToast function, which takes the toast's unique identifier and the new toast options:

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -5,8 +5,8 @@ import { ToastDemoScreen } from 'example/src/ToastDemoScreen';
 import * as React from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
-  ToastPosition,
   Toaster,
+  ToastPosition,
   ToastSwipeDirection,
 } from 'react-native-reanimated-toasts';
 import { SafeAreaProvider } from 'react-native-safe-area-context';