Skip to content
Notify the user for success/error or any other messages within the app
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src adding confirmation class and active class for use in css Oct 29, 2018
.gitignore updated docs, removed react-flux-dash and some other small stuff Oct 25, 2018
README.md uypdated fix bug about unsubscribe to the notifications and also upda… Oct 25, 2018
package-lock.json updated docs, removed react-flux-dash and some other small stuff Oct 25, 2018
package.json adding confirmation class and active class for use in css Oct 29, 2018
webpack.config.js

README.md

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.