react-toast-native

Zero-dependency toast notifications for React. ~80 lines of source. No stylesheet. Fully auditable.

2 exports. No config needed. Fits in your head.

---

When to use this

Use react-toast-native when:

• You're building a library or component and can't take on transitive dependencies
• You want toast notifications small enough to read the entire source in 2 minutes
• You need to dismiss a toast programmatically by ID (loading → success pattern)
• You want zero CSS imports — fully inline-styled, no stylesheet conflicts

When react-hot-toast or react-toastify are the better choice: if you need promise-based toasts, toast.loading() patterns, rich custom components inside toasts, or you're building a large consumer app where bundle size is not a concern — use those. They're excellent and battle-tested.

---

Why not react-hot-toast?

react-hot-toast is great. If you're building a standard web app, use it.

react-toast-native exists for a different constraint: zero transitive dependencies and fully auditable source. When you're publishing a library yourself, or your project has strict dependency policies, pulling in react-hot-toast means pulling in its peer requirements and shipping code you didn't write. react-toast-native is ~80 lines — you can read every line before shipping it.

---

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 per type
• Slide-in animation
• Programmatic dismiss by ID
• Zero dependencies — pure React + inline styles

---

Install

npm install react-toast-native

---

Usage

1. Wrap your app

import { ToastProvider } from 'react-toast-native'

export default function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  )
}

2. Use anywhere

import { useToast } from 'react-toast-native'

function MyComponent() {
  const { toast } = useToast()

  return (
    <button onClick={() => toast({ message: 'Saved!', type: 'success' })}>
      Save
    </button>
  )
}

---

Toast options

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

<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

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 and the full Rewrite Labs app suite.

---

Author

M. Adhitya — Builder, Rewrite Labs · Newsletter

License

MIT © 2025 M. Adhitya