Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
65 lines (52 sloc) 1.56 KB

React Notifier

React component for notifications on the fron end.

Installation

$ npm i --save bc-react-notifier

How to use it

  1. Add the Notifier tag anywhere in your web app
import {Notifier} from 'bc-react-notifier';
ReactDOM.render(
    <Notifier />,
    document.querySelector('#root')
);
  1. Call the Notify function from anywhere in you code
import {Notify} from 'bc-react-notifier';

//Pass the error string or array, auto closes on 2 sec
Notify.error("Hey! There is an error");
//or successs string
Notify.success("Excelent! Everything went well");
//or info stirng
Notify.info("Everything is cool");

//you can also pass a confirmation callback to any of the notifications
Notify.error("Hey! Are you sure?", () => {
    //this functions runs on confirmation
});

Customize the notification with a custom component

  1. Create the component
    
    const ModalComponent = ({ onConfirm }) => 
        <div>
            <h1>Are you sure?</h1>
            <button onClick={()=>onConfirm(true)}>Yes</button>
            <button onClick={()=>onConfirm(false)}>No</button>
        </div>;
  1. Call the Notify function from anywhere else (passing the component)
    /**
     * @param1: Wrapper css class 
     * @param2: Component to render it
     * @param3: callback when answered
     * @param4: timeout in millisecons (null for no timout)
    **/
    let noti = Notify.add('info', ModalComponent, (answer)=>{
        
        console.log("The user answer is: ", answer);
        noti.remove();
        
    }, 9999999999999);
You can’t perform that action at this time.