react-redux-toastr
demo
react-redux-toastr
is a React toastr message implemented with Redux, primary consists of three things: a reducer, toastr emitter and a React component.
The reducer listens to dispatched actions from the component to maintain the toastr
state in Redux.
Implementation Guide
1. Installation
npm install --save react-redux-toastr
2. Add the styles
-
import the scss file into to your project.
; -
or import the css file.
- or include the css file from the demo site (NOTE: This file can be changed anytime)
3. Add the reducer.
const reducers = // ... other reducers ... toastr: toastrReducer // <- Mounted at toastr.const reducer = const store =
NOTE: The default mount point for react-redux-toastr
is toastr
.
4. Add the component into an app root
<Provider store=store> <div> ... other things like router ... // props are not required <ReduxToastr timeOut=4000 newestOnTop=false preventDuplicates position="top-left" transitionIn="fadeIn" transitionOut="fadeOut" progressBar closeOnToastrClick/> </div></Provider>
The default configuration is:
timeOut: 5000 newestOnTop: true position: 'top-right' transitionIn: 'bounceIn' transitionOut: 'bounceOut' progressBar: false closeOnToastrClick: false
NOTE: transitionIn
and transitionOut
will affect the confirm animation as well
Here is the full list of available configurations:
-
position:
top-left
top-center
top-right
bottom-left
bottom-center
andbottom-right
-
transitionIn:
bounceIn
bounceInDown
andfadeIn
-
transitionOut:
bounceOut
bounceOutUp
andfadeOut
5. Use the emitter
The toastr
method use eventemitter3 to dispatch the actions
{ return <div> <button onClick= toastr type="button">Toastr Success</button> </div> }
Or you can bind the actions
to your component if you prefer.
// In your React component { superprops; // Bind the react-redux-toastr actions to the component thistoastr = thistoastr; thistoastr;}
Toastr methods
Toastr accepts the following methods: success
info
warning
light
error
confirm
message
, remove
and removeByType
success
info
warning
light
error
remove
and removeByType
Toastr: Each of these methods can take up to three arguments the title
a message
and options
.
In options
you can specify timeOut
icon
onShowComplete
onHideComplete
className
component
removeOnHover
,removeOnHoverTimeOut
,showCloseButton
, onCloseButtonClick
, onToastrClick
, progressBar
, transitionIn
, position
, attention
, onAttentionClick
, transitionOut
and closeOnToastrClick
.
const toastrOptions =timeOut: 3000 // by setting to 0 it will prevent the auto closeicon: <myCustomIconOrAvatar /> // You can add any component you want but note that the width and height are 70px ;)consoleconsoleconsoleconsoleshowCloseButton: false // true by defaultcloseOnToastrClick: true // false by default, this will close the toastr when user clicks on itcomponent: // this option will give you a func 'remove' as props<MyCustomComponent myProp="myValue"><span>Hello World!</span></MyCustomComponent>toastrtoastrtoastrtoastrtoastr // Remove all toastrs with the type error.toastr // Removes toastr with id '123'
Toastr methods light
The light
method is like the other toastr
except that the background-color
is white
and you can add a top
border on top of the toastr
by passing the status
option
icon
can be one of the following:
'success'
'info'
'warning'
'error'
const toastrType = 'warning';const toastrOptions =icon: toastrTypestatus: toastrTypetoastr
message
Toastr: Use this one if you wanna show a large amount of information. Unlike the other methods above, it would not close automatically unless you provide a timeout
in the message
options.
const toastrMessageOptions = timeOut: 3000 // Default value is 0 console console removeOnHover: false // Default value is false removeOnHoverTimeOut: 1000 // Default value is 1000 component: ReactComponent;toastr
confirm
Toastr: The confirm method takes two arguments. The first one is the message and the second one is an object where you can specify what will happen when the user clicks on ok
or on the cancel
buttons or on keypress
enter/esc
.
NOTE: You can only have one confirm toastr at the same time. If you have one confirm
and you fire another it will be ignored.
const toastrConfirmOptions = console console;toastr;
You can change the ok
and cancel
texts by:
- Passing
confirmOptions
to theReduxToastr
component:
<!-- please define both keys as this will override default okText & cancelText -->const options = okText: 'confirm text' cancelText: 'cancel text';<ReduxToastr confirmOptions=options/>
- Passing
okText
andcancelText
in thetoasterConfirmOptions
object:
const toastrConfirmOptions = ... okText: 'confirm text' cancelText: 'cancel text'; toastr;
You can make it so ok
is the only button by:
- Passing
disableCancel
in thetoasterConfirmOptions
object:
const toastrConfirmOptions = ... disableCancel: true; toastr;
You can add custom buttons by:
-
Passing
buttons
in thetoasterConfirmOptions
object.The buttons are inserted after the OK and the cancel buttons.
Each button config can have a
text
,handler
and aclassName
property.If you want to move the original OK or cancel buttons to a different postiion, just insert a an object with a single boolean flag:
ok
orcancel
to the desired position inside buttons. (note that all other properties are ignored in this case).
The following config leads to 3 buttons in the following order:
- "Apply" (original OK button)
- "Do not apply" (our custom button)
- "Cancel" (original cancel button)
const toastrConfirmOptions = ... okText: 'Apply' buttons: text: 'Do not apply' className: 'do-not-apply-btn' console cancel: true // move the cancel button to the end ; toastr;
You can render your custom message component instead of the simple string message by:
- Passing the
component
prop to thetoasterConfirmOptions
object:
const toastrConfirmOptions = ... <MyCustomComponent myProp="myValue"> <span>Hello World!</span> </MyCustomComponent> ; toastr; // pass null for message
Avatar: in case you wanna use the same avatar as in the example
Run a local demo
git clone https://github.com/diegoddox/react-redux-toastr.git
cd react-redux-toastr
npm install
npm start
open your browser at http://localhost:3000
License
MIT. Copyright (c) 2016 Diego Oliveira.