react-redux-toastr
demo
react-redux-toastr!!!!!
!!!!!This is a fork version fromThe version support customCompnent
options.
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 include the css file from the demo site (NOTE: This can be change at 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/> </div></Provider>
The default configuration is:
timeOut: 5000 newestOnTop: true position: 'top-right' transitionIn: 'bounceIn' transitionOut: 'bounceOut' progressBar: 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
and removeByType
success
info
warning
light
error
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
, showCloseButton
, onCloseButtonClick
, progressBar
, transitionIn
, position
, attention
and transitionOut
.
const toastrOptions =timeOut: 3000 // by setting to 0 it will prevent the auto closeicon: <myCustomIconOrAvatar /> // You can add any component you want but note the the with and height are 70px ;)consoleconsoleconsoleshowCloseButton: false // true by defaultcomponent: // 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 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: This one is in case you wanna show a large amount of information, unlike the other methods above this will 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 component: ReactComponent;toastr
confirm
Toastr: The confirm method takes two arguments, the first is the message the second is a object where you can specify what will happen when the user clicks on ok
and cancel
button or by keypress
enter/esc
NOTE: You can only have one at a time, right now 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
text by:
- Passing the
confirm
props 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 the
okText
andcancelText
props to thetoasterConfirmOptions
object:
const toastrConfirmOptions = ... okText: 'confirm text' cancelText: 'cancel text'; toastr;
You can make it so ok
is the only button by:
- Passing the
disableCancel
prop to thetoasterConfirmOptions
object:
const toastrConfirmOptions = ... disableCancel: true;; toastr;
You can add custom buttons by:
-
Passing the
buttons
prop to thetoasterConfirmOptions
object. The buttons are inserted after the OK and the cancel button.Each button config can have a
text
,handler
and aclassName
property.If you want to move the original OK or cancel button to a different place, just insert a button config with a boolean flag
ok
orcancel
at the desired position (note that all other properties are ignored in this button config).
The following config leads to 3 buttons in this 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 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
TODO
create test.