ch-react-alert v0.0.8

React component for showing alerts and notifications

Basic Usage:

Once installed and imported then you can use it as simply as:

Include the css.

require('ch-react-alert/src/styles');

'//or the old fashoined way\n'+
'<link type="stylesheet" src="path/to/style.css"/>'

Render as a component

<div>

    {state.error && <Alert closable closeText='Dismiss' onClose={()=>setState({error:false})} closeTimeMS={1500}>There was an error</Alert>}
    <button onClick={()=>setState({error:true})}>Trigger Alert</button>
</div>

Notifications

Provides a container for page alerts. Notifications by default render at the bottom of the page.

const {Notifications} =require('ch-react-alert')
;<button onClick={()=>{
    Notifications.createNotification({
        message: 'Correct the following errors: Found overlaps in windows...',
        closeText: 'AUTOCLOSES.',
        closeTimeMS: 250000
    });
}}>Click for notification</button>

The create notification method returns a callback to programatically close the alert that is just created. Note: The handler is provided only when the alert is created without the closeTimeMS options.

const {Notifications} =require('ch-react-alert')

const onClick=()=>{

   const closeHandler = Notifications.createNotification({
         dismissError: function() {
                 alert('close called before timeout');
          },
         closeTimeoutMS:5000,
         type: Alert.types.success,
         message: (<div>Another alert that closes itself after a specific time!!!</div>)
    });
    setTimeout(closeHandler, 2000);
}

;<button onClick={onClick}>Click  for notification with dismiss callback</button>