NovaAlert

Modern alert, dialog, and toast library — a drop-in alternative to SweetAlert2 with polished UI, motion presets, and React hooks plus a CDN-friendly global build.

Install

Pick one package manager:

npm install novalert
# or
pnpm add novalert
# or
yarn add novalert

Peer deps expected in the host app: react, react-dom (framer-motion and lucide-react are bundled in the build).

Usage (React)

Import the CSS once and render the provider/renderer near the app root:

// e.g. src/main.tsx
import 'novalert/css';
import { AlertProvider, AlertRenderer, useAlert } from 'novalert';

function App() {
	const alert = useAlert();

	return (
		<AlertProvider>
			<AlertRenderer />
			<button onClick={() => alert.success('Saved!')}>Show success</button>
		</AlertProvider>
	);
}

Quick API

• alert.fire(options) – full control (modal or toast)
• alert.success|error|warning|info|question(message, opts?)
• alert.toast(message, { position?, timer?, icon? })
• alert.confirm(message, { confirmText?, cancelText? })
• alert.confirmDanger(resource, { onConfirm?, description?, confirmText? })
• alert.formPrompt(fields, options?)
• alert.asyncAction(label, action, options?)
• alert.close() / alert.closeAll()

Usage (CDN / vanilla)

<link rel="stylesheet" href="https://unpkg.com/novalert/dist/novalert.css" />
<!-- React runtime for the global bundle -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/novalert/dist/index.global.js"></script>
<script>
	// Mount once near the page root
	const mount = document.createElement('div');
	document.body.appendChild(mount);
	const { NovaAlert: api, AlertProvider, AlertRenderer } = window.NovaAlert;

	ReactDOM.createRoot(mount).render(
		React.createElement(AlertProvider, null, React.createElement(AlertRenderer))
	);

	api.toast('Hello from CDN!', { position: 'top-end', icon: 'success' });
	api.confirm('Are you sure?').then((r) => {
		if (r.isConfirmed) api.success('Done!');
	});
</script>

Building the package locally

• npm run build:lib – produce dist/ with ESM, CJS, global bundle, and minified CSS
• npm run build:web – build the demo site (Vite)
• npm run dev – run the demo playground

Versioning & publishing

Update package.json version, then npm publish --access public (prepublish hook builds the library).