react-toast-native 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 M Adhitya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+# react-toast-native
+
+[![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+[![GitHub](https://img.shields.io/badge/GitHub-iamadhitya1-blue?logo=github)](https://github.com/iamadhitya1)
+![Zero Dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)
+![React](https://img.shields.io/badge/React-17%2B-61DAFB?logo=react)
+
+> Lightweight toast notifications for React. Zero dependencies. 4 types. Fully customizable.
+
+**2 exports. ~80 lines. No config needed.**
+
+---
+
+## Features
+
+- ✅ `success`, `error`, `info`, `warning` types
+- ✅ Custom icons per toast
+- ✅ Top or bottom positioning
+- ✅ Auto-dismiss with configurable duration
+- ✅ Click to dismiss
+- ✅ Max visible toasts limit
+- ✅ Custom color schemes
+- ✅ Slide-in animation
+- ✅ Zero dependencies — pure React + inline styles
+
+---
+
+## Install
+
+```bash
+npm install react-toast-native
+```
+
+---
+
+## Usage
+
+### 1. Wrap your app
+
+```jsx
+import { ToastProvider } from 'react-toast-native'
+
+export default function App() {
+  return (
+    <ToastProvider>
+      <YourApp />
+    </ToastProvider>
+  )
+}
+```
+
+### 2. Use anywhere
+
+```jsx
+import { useToast } from 'react-toast-native'
+
+function MyComponent() {
+  const { toast } = useToast()
+
+  return (
+    <button onClick={() => toast({ message: 'Saved!', type: 'success' })}>
+      Save
+    </button>
+  )
+}
+```
+
+---
+
+## Toast options
+
+```jsx
+toast({
+  message: 'Something went wrong',  // required
+  type: 'error',                     // 'success' | 'error' | 'info' | 'warning'
+  duration: 4000,                    // ms — 0 = persistent (default: 3000)
+  icon: '🔥',                        // override default icon
+})
+```
+
+---
+
+## ToastProvider props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `position` | `string` | `'top'` | `'top'` or `'bottom'` |
+| `maxToasts` | `number` | `3` | Max toasts visible at once |
+| `colors` | `object` | see below | Override colors per type |
+
+### Custom colors
+
+```jsx
+<ToastProvider
+  colors={{
+    success: { bg: 'rgba(0,20,10,0.95)', border: 'rgba(0,200,100,0.3)', text: '#00c864' },
+    error:   { bg: 'rgba(20,0,0,0.95)',  border: 'rgba(255,50,50,0.3)', text: '#ff3232' },
+  }}
+>
+```
+
+---
+
+## Dismiss programmatically
+
+```jsx
+const { toast, dismiss } = useToast()
+
+const id = toast({ message: 'Loading…', type: 'info', duration: 0 })
+// later:
+dismiss(id)
+```
+
+---
+
+## Used in Production
+
+Built from the real implementation powering **[Sage](https://joinsage.vercel.app)** and the full **[Rewrite Labs](https://rewritelabs.vercel.app)** app suite.
+
+---
+
+## License
+
+MIT © 2025 [M Adhitya](https://github.com/iamadhitya1)

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "react-toast-native",
+  "version": "1.0.0",
+  "description": "Lightweight toast notifications for React. Zero dependencies, 4 types, fully customizable.",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": { ".": "./src/index.js" },
+  "files": ["src", "README.md", "LICENSE"],
+  "keywords": ["react", "toast", "notification", "alert", "snackbar", "zero-dependency"],
+  "author": "M Adhitya",
+  "license": "MIT",
+  "peerDependencies": { "react": ">=17.0.0" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iamadhitya1/react-toast-native"
+  }
+}

package/src/ToastProvider.jsx

@@ -0,0 +1,135 @@
+import React, { useState, useCallback, createContext, useContext } from 'react'
+
+const ToastContext = createContext(null)
+
+const ICONS = {
+  success: '✓',
+  error: '✕',
+  info: 'ℹ',
+  warning: '⚠',
+}
+
+const COLORS = {
+  success: { bg: 'rgba(13,26,16,0.97)', border: 'rgba(82,183,136,0.3)', text: '#52B788' },
+  error:   { bg: 'rgba(26,13,13,0.97)', border: 'rgba(240,96,96,0.3)',  text: '#f06060' },
+  info:    { bg: 'rgba(13,20,32,0.97)', border: 'rgba(96,160,255,0.3)', text: '#60a0ff' },
+  warning: { bg: 'rgba(26,20,0,0.97)',  border: 'rgba(240,180,41,0.3)', text: '#F0B429' },
+}
+
+/**
+ * ToastProvider — wrap your app with this.
+ *
+ * @param {object}  props
+ * @param {node}    props.children
+ * @param {string}  props.position   - 'top' | 'bottom' (default: 'top')
+ * @param {number}  props.maxToasts  - max visible at once (default: 3)
+ * @param {object}  props.colors     - override color scheme per type
+ */
+export function ToastProvider({
+  children,
+  position = 'top',
+  maxToasts = 3,
+  colors = {},
+}) {
+  const [toasts, setToasts] = useState([])
+
+  const toast = useCallback(({
+    message,
+    type = 'success',
+    duration = 3000,
+    icon,
+  }) => {
+    const id = Date.now() + Math.random()
+    setToasts(prev => {
+      const next = [...prev, { id, message, type, icon }]
+      return next.slice(-maxToasts)
+    })
+    if (duration > 0) {
+      setTimeout(() => {
+        setToasts(prev => prev.filter(t => t.id !== id))
+      }, duration)
+    }
+    return id
+  }, [maxToasts])
+
+  const dismiss = useCallback((id) => {
+    setToasts(prev => prev.filter(t => t.id !== id))
+  }, [])
+
+  const mergedColors = { ...COLORS, ...colors }
+
+  const positionStyle = position === 'bottom'
+    ? { bottom: 16, top: 'auto' }
+    : { top: 16 }
+
+  return (
+    <ToastContext.Provider value={{ toast, dismiss }}>
+      {children}
+      <div style={{
+        position: 'fixed',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 9999,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+        width: '100%',
+        maxWidth: 360,
+        padding: '0 16px',
+        pointerEvents: 'none',
+        ...positionStyle,
+      }}>
+        {toasts.map(t => {
+          const c = mergedColors[t.type] || mergedColors.info
+          return (
+            <div
+              key={t.id}
+              onClick={() => dismiss(t.id)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 10,
+                padding: '12px 16px',
+                borderRadius: 16,
+                border: `1px solid ${c.border}`,
+                background: c.bg,
+                backdropFilter: 'blur(12px)',
+                color: c.text,
+                fontSize: 13,
+                fontWeight: 500,
+                boxShadow: '0 4px 24px rgba(0,0,0,0.4)',
+                pointerEvents: 'auto',
+                cursor: 'pointer',
+                animation: 'rtn-slide-in 0.2s ease',
+                fontFamily: 'inherit',
+              }}
+            >
+              <span style={{ fontSize: 14, flexShrink: 0 }}>
+                {t.icon || ICONS[t.type] || ICONS.info}
+              </span>
+              <span style={{ flex: 1, color: 'rgba(255,255,255,0.85)' }}>{t.message}</span>
+            </div>
+          )
+        })}
+      </div>
+      <style>{`
+        @keyframes rtn-slide-in {
+          from { opacity: 0; transform: translateY(-8px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </ToastContext.Provider>
+  )
+}
+
+/**
+ * useToast — returns { toast, dismiss } from the nearest ToastProvider.
+ *
+ * toast({ message, type, duration, icon })
+ * dismiss(id)
+ */
+export function useToast() {
+  const ctx = useContext(ToastContext)
+  if (!ctx) throw new Error('useToast must be used inside <ToastProvider>')
+  return ctx
+}

package/src/index.js

@@ -0,0 +1 @@
+export { ToastProvider, useToast } from './ToastProvider.jsx'