A tiny, customizable snackbar library for React 16.8–19. Fully customizable, TypeScript-ready, and weighs under 3 kB.
Designed to drop in and get out of your way.
Under 3 kB gzipped. No runtime dependencies — just React and your imagination.
Full control over position, duration, colors, close button, and content. Pass any JSX as the message.
Tested against every major React version from 16 through the latest React 19 release.
Ships with first-class TypeScript types. Autocomplete and compile-time safety included.
Tweak position, color, and duration then fire a snackbar right in this page.
Add @codejq/react-simple-snackbar to your project in seconds.
npm install @codejq/react-simple-snackbaryarn add @codejq/react-simple-snackbarimport SnackbarProvider from '@codejq/react-simple-snackbar' function App() { return ( <SnackbarProvider> <YourApp /> </SnackbarProvider> ) }
import { useSnackbar } from '@codejq/react-simple-snackbar' function MyComponent() { const [openSnackbar, closeSnackbar] = useSnackbar() return ( <button onClick={() => openSnackbar('Hello world!')}> Show snackbar </button> ) }
Everything you can pass to useSnackbar(options).
| Prop | Type | Default | Description |
|---|---|---|---|
| position | string | 'center' | Where the snackbar appears. One of 7 positions. |
| style | CSSProperties | {} | Inline styles applied to the snackbar box. |
| closeStyle | CSSProperties | {} | Inline styles applied to the close button. |
| openSnackbar(node, duration?) | function | — | Opens the snackbar with the given ReactNode and optional duration in ms. |
| closeSnackbar() | function | — | Programmatically dismisses the current snackbar. |
| duration | number | 6000 | Auto-close delay in milliseconds. |