Simple React Usage

Early Access

This documentation is currently in early access, information and features may change.

When our button is clicked, the onClick event will trigger the showAlert function and we will have our wonderful alert. Here is a very simple usage example.

usage.jsx

import Fvuar from 'fvuarjs';

const App = () => {
    Fvuar.configure({
        MAXTIME: 10 // Change the maximum time alerts can stay on screen.
    })

    const showAlert = () => {
        Fvuar.new({
            theme: "success",
            position: "top-right",
            text: "This is a message of success!",
            displayTime: 10, // We told him to disappear after 10 seconds. But if we set it to 11, it will give an error because it will exceed MAXTIME.
            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;