https://github.com/lhapaipai/mini-notifier
https://github.com/lhapaipai/mini-notifier
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lhapaipai/mini-notifier
- Owner: lhapaipai
- Created: 2021-04-12T07:50:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-05T08:13:58.000Z (almost 3 years ago)
- Last Synced: 2024-04-24T22:22:25.826Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 542 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# miniNotifier
Show notification, confirmation, prompt
## Installation
```
npm install mini-notifier
```
## Utilisation
```html
{ notify, prompt, confirm, promptLogin, configure } = miniNotifier;
```
with a bundler like `vite` or `webpack`.
```js
import { notify, prompt, confirm, promptLogin, configure } from 'mini-notifier';
import 'mini-notifier/dist/style.css';
```
```js
notify('hello world');
notify(message, {
time: 5000,
style: 'success|error',
position: 'top-left'
});
confirm('Are you sure ?', {
okText: 'Yes',
cancelText: 'Sorry, no',
okHandler: () => console.log('ok'),
cancelHandler: () => console.log('cancel')
});
prompt('Enter your email', {
okText: 'Enter',
okHandler: (data) => console.log('your email:', data),
inputType: 'email',
placeholder: 'team@ifmo.su'
})
notify('hello world', {
container: document.querySelector('#box')
});
promptLogin('Login box', {
loginText: 'Connectez-vous',
emailText: 'Votre email',
passwordText: 'Votre mot de passe',
loginHandler: ({email, password}) => console.log('your email:', email, 'your password', password),
rememberMe: true,
rememberMeText: 'se souvenir'
})
configure({
container: document.body,
position: 'bottom-left',
themePrefix: 'penta'
});
```
## Theme
If you want to custom the MiniNotifier theme. You can define your own css vars.
```css
:root {
--primary-color500: #ffea66;
--red500: #dc3545;
--red200: #f8d7da;
--green500: #2b5229;
--green200: #e1fae1;
--border-radius: .25rem;
}
```
in order to integrate as much as possible into your application, no css has been applied to the buttons.
If you want ready-to-go theme you can add `pentatrion-theme` package from npm.
```
import "pentatrion-theme/css/button.scss";
import "pentatrion-theme/css/text-textarea-select.scss";
import "pentatrion-theme/css/variables.scss";
```