react-messages
React message widget
Install
npm install react-messages
Demo
Example
// @flow PureComponent state = next: false message: 'Just an initial message' newMessage: '' icon: 'heart' duration: 1 error: false { const icon = etargetvalue this } { const duration = Numberetargetvalue this } { const error = thisstate this } { const newMessage = etargetvalue this } { const newMessage = thisstate this } { const next message newMessage icon duration error = thisstate const durationInMilliseconds = duration * 1000 return <div> <h1>'react-messages' example</h1> <hr /> <h2>Options:</h2> <label htmlFor='icon'> Choose the icon: <select onChange=thishandleSelect> <option default value="heart">Heart</option> <option value="warning">Warning</option> <option value="info">Info</option> <option value="thumbs-up">Thumbs up</option> <option value="thumbs-down">Thumbs down</option> </select> </label> <br /> <label htmlFor="duration"> Choose the duration: <input onChange=thishandleDuration value=duration type='range' min='1' max='10' step='1' /> <span>duration seconds</span> </label> <br /> <label htmlFor="error"> Choose if the message is an error: <input onChange=thishandleError type="radio" name="error" value=true checked=error === true/> Is an error <input onChange=thishandleError type="radio" name="error" value=false checked=error === false/> Is not an error </label> <p>Fill the input and Press the button to render a </p> <input onChange=thishandleChange value=newMessage /> <button onClick=thishandleClick>New Message</button> <ReactMessages message=message next=next error=error icon=icon duration=durationInMilliseconds /> </div> } const root = document ReactDOM