fvuarJS v0.0.5Create your alert messages with fvuarJS!
Fvuar.new({
text: "This is alert without taking advantage of fvuarJS.",
})
yarn add fvuarjsnpm install fvuarjs@latest
<script src="https://cdn.jsdelivr.net/npm/fvuarjs@0.0.5/fvuar.min.js"></script>
import { Fvuar } from 'fvuarjs';
const App = () => {
Fvuar.configure({
MAXTIME: 10
})
const showAlert = () => {
Fvuar.new({
theme: "success",
position: "top-right",
text: "This is a message of success!",
time: 10, // time
css: { backgroundColor: 'lightgreen', color: 'darkgreen' }, // If you don't like our theme, you can add your own css rules, most css rules are available.
clickToClose: true
});
};
return (
<div>
<button onClick={showAlert}>Show Alert</button>
</div>
);
};
export default App;
<!DOCTYPE html>
<html lang="en">
<head>
<!-- include css file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fvuarjs@0.0.5/styles/fvuar.min.css" />
</head>
<body>
<button type="button" id="copy">Copy clipboard</button>
<!-- include js file -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fvuarjs@0.0.5/fvuar.min.js"></script>
<script>
const copyBtn = document.getElementById('copy');
copyBtn.addEventListener('click', () => {
Fvuar.new({
text: 'Copied!', // The text to display on the alert.
theme: 'success', // Alert theme, this could also be one of these: error, orange, info, default, warning
position: 'top-center', // The alert location will be displayed at the top and far right of the page.
displayTime: 3 // Alert's existence time.
});
});
</script>
</body>
</html>
copy()<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<button type="button" id="copy">Copy clipboard</button>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fvuarjs@0.0.4/fvuar.min.js"></script>
<script>
const fv = new Fvuar();
const copyBtn = document.getElementById('copy');
copyBtn.addEventListener('click', () => {
fv.copy(copyBtn, true, {
text: 'Copied!', // The text to display on the alert.
theme: 'success', // Alert theme, this could also be one of these: error, orange, info, default, warning
position: 'top-center', // The alert location will be displayed at the top and far right of the page.
displayTime: 3 // Alert's existence time.
});
});
</script>
</body>
</html>
| Methods | Parameters | Details |
|---|---|---|
configure() | MAXCOUNT, MAXTIME, DEFAULTTIME, DEFAULTTHEME, DEFAULTPOSITION, CPALERT, ALERTOFFSET, CLOSEMETHOD, HOVERTOTOP, CLICKTOCLOSE, MULTIPLY | - MAXCOUNT: Determine the maximum number of alerts to be shown on the page. --default value: 4 - MAXTIME: Set the maximum time that alerts will remain on the screen. --default value: 4 - DEFAULTTIME: Determine the time that alerts will remain on the screen, --default value: 4 - DEFAULTTHEME: It determines the default theme of the alerts on the screen, --default value: "default" - DEFAULTPOSITION: It determines the default location of alerts on the screen, --default value: "top-right" - CPALERT: It takes two values: true or false, if true, the copy function also calls alert. If false, it does not call. --default value: false - ALERTOFFSET: You set the distance between alerts (in px) --default value: 70 - CLOSEMETHOD: How to turn off alerts? you specify. The value you give will be processed as an event in addEventListener. --default value: "click" - HOVERTOTOP: When alerts overlap, the bottom one may not be visible. To fix this situation, set this value to true. This setting highlights the alert you hover over. --default value: false - CLICKTOCLOSE: If you want alerts to close when clicked before they expire, set this property to true. --default value: true - MULTIPLY: If you want to prevent the old alert from disappearing every time you request a new alert. If you do not want this setting? Set it to true. Is this setting the same on the screen? Allows more than one alert to appear at a time. --default value: false - |
new() | theme, position, text, displayTime, css, clickToClose | - theme: You can determine the theme of your alert by choosing one of the following types: success, default, error, orange, info, warning. --default value : "default" - text: The articles you want to appear in the alert will be located here. --default value : "Your Alert is here!" - position: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right --default value : "top-right" - displayTime: You can specify the survival time of your alert (the value in seconds you enter, after which the alert will disappear). --default value: 4 - css: You can change the alert CSS rules you don't like according to your needs. It supports all javascript style reference features. --default value : none. - clickToClose: If you want alerts to close when clicked before they expire, set this property to true. --default value: true |
copy() | target, alert, alertOptions | - target: If you give the target itself or its id, the copy() function copies the text in that targeted element for you. --default value : none - alert: If you want to show alert, set true here. See the next parameter to change alert settings. --default value: false - alertOptions: To access here, you must provide true in the previous parameter. It is the parameter where you can set alerts. It takes an object and supports all new() function parameters. --default value: new() function parameters |
FAQs
Fast Visual User Alerts Resource
The npm package fvuarjs receives a total of 0 weekly downloads. As such, fvuarjs popularity was classified as not popular.
We found that fvuarjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.