Toastsrap
Toaststrap is a javascript library for simple, lightweight toast popups. It uses bootstrap 5 styles.
Preview
I created this library for everyone who use Bootstrap5 and want to show some beautiful notifications for his users.
Features
Documentation
Using in browser
- Download dist folder from this repository.
- Be sure you are using the latest bootstrap 5.
Example
<!DOCTYPE html>
<html>
<head>
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" media="all "/>
<link href="toastsrap/toastsrap.css" rel="stylesheet" media="all "/>
</head>
<body>
<script src="toastsrap/toastsrap.js"></script>
<script>
var toast = Toastsrap.initialize({
title: 'Greeting',
text: 'Hello World',
type: window.toastsrap_type.INFO,
position: window.toastsrap_position.BOTTOM_START
});
toast.show();
</script>
</body>
</html>
Using with react
npm install toaststrap
Example
import Toast, {ToastType, ToastPosition} from 'toastsrap';
import 'toastsrap/dist/bootstrap5-toast.css'
const MyToastComponent = () => {
const handleOnClick = () => {
const toast = Toast.initialize({
title: 'Greeting!',
text: 'Hello World',
position: ToastPosition.TOP_END,
type: ToastType.PRIMARY
})
toast.show()
}
return (<button onClick={handleOnClick}>Click Me</button>)
}
Setup development environment
- Clone the project
git clone https://github.com/nawafscript/toastsrap.git
- Install packages
npm install
- Start development server
npm run dev
Bugs and feature requests
Found a bug or have a feature request? Please open a new issue