Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-redux-toastr-sass-patched
Advanced tools
react-redux-toastr is a React toastr message implemented with Redux
react-redux-toastr
demoreact-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.
npm install --save react-redux-toastr
import the scss file into to your project.
@import 'react-redux-toastr/src/styles/index';
or import the css file.
import 'react-redux-toastr/lib/css/react-redux-toastr.min.css'
<link href="https://diegoddox.github.io/react-redux-toastr/7.1/react-redux-toastr.min.css" rel="stylesheet" type="text/css">
import {createStore, combineReducers} from 'redux'
import {reducer as toastrReducer} from 'react-redux-toastr'
const reducers = {
// ... other reducers ...
toastr: toastrReducer // <- Mounted at toastr.
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)
NOTE: The default mount point for react-redux-toastr
is toastr
.
import {Provider} from 'react-redux'
import ReduxToastr from 'react-redux-toastr'
<Provider store={store}>
<div>
... other things like router ...
// props are not required
<ReduxToastr
timeOut={4000}
newestOnTop={false}
preventDuplicates
position="top-left"
getState={(state) => state.toastr} // This is the default
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
and bottom-right
transitionIn: bounceIn
bounceInDown
and fadeIn
transitionOut: bounceOut
bounceOutUp
and fadeOut
The toastr
method use eventemitter3 to dispatch the actions
import React, {Component} from 'react'
import {toastr} from 'react-redux-toastr'
export class YourComponent extends Component {
render() {
return (
<div>
<button
onClick={() => toastr.success('The title', 'The message')}
type="button">Toastr Success</button>
</div>
)
}
}
Or you can bind the actions
to your component if you prefer.
import {bindActionCreators} from 'redux'
import {actions as toastrActions} from 'react-redux-toastr'
// In your React component
constructor(props) {
super(props);
// Bind the react-redux-toastr actions to the component
this.toastr = bindActionCreators(toastrActions, this.props.dispatch)
this.toastr.add({
id: 'mycustomid', // If not provided we will add one.
type: 'success',
title: 'your title',
position: 'top-left', // This will override the global props position.
attention: true, // This will add a shadow like the confirm method.
onAttentionClick: (id) => {}, //override default behavior of 'attention' background click.
message: 'message',
options: {}
});
this.toastr.remove('toastrId');
}
Toastr accepts the following methods: success
info
warning
light
error
confirm
message
, remove
and removeByType
success
info
warning
light
error
remove
and removeByType
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
.
import {toastr} from 'react-redux-toastr'
const toastrOptions = {
timeOut: 3000, // by setting to 0 it will prevent the auto close
icon: (<myCustomIconOrAvatar />), // You can add any component you want but note that the width and height are 70px ;)
onShowComplete: () => console.log('SHOW: animation is done'),
onHideComplete: () => console.log('HIDE: animation is done'),
onCloseButtonClick: () => console.log('Close button was clicked'),
onToastrClick: () => console.log('Toastr was clicked'),
showCloseButton: true, // false by default
closeOnToastrClick: true, // false by default, this will close the toastr when user clicks on it
component: ( // this option will give you a func 'remove' as props
<MyCustomComponent myProp="myValue">
<span>Hello, World!</span>
</MyCustomComponent>
)
}
toastr.success('Title', 'Message', toastrOptions)
toastr.info('The message', toastrOptions)
toastr.warning('The title', 'The message')
toastr.error('The message')
toastr.removeByType('error') // Remove all toastrs with the type error.
toastr.remove('123') // Removes toastr with id '123'
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'
import {toastr} from 'react-redux-toastr'
const toastrType = 'warning';
const toastrOptions = {
icon: toastrType,
status: toastrType
}
toastr.light('The title', 'The message', toastrOptions)
message
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
onShowComplete: () => console.log('SHOW: animation is done'),
onHideComplete: () => console.log('HIDE: animation is done'),
removeOnHover: false, // Default value is false
removeOnHoverTimeOut: 1000, // Default value is 1000
component: React.Component
};
toastr.message('Title', toastrMessageOptions)
confirm
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 = {
onOk: () => console.log('OK: clicked'),
onCancel: () => console.log('CANCEL: clicked')
};
toastr.confirm('Are you sure about that!', toastrConfirmOptions);
You can add a manually specified CSS ID selector to the confirmation wrapper element by:
id
prop in the toasterConfirmOptions
object:const toastrConfirmOptions = {
...
id: 'my-custom-id'
};
toastr.confirm('Are you sure about that!', toastrConfirmOptions);
You can change the ok
and cancel
texts by:
confirmOptions
to the ReduxToastr
component:<!-- please define both keys as this will override default okText & cancelText -->
const options = {
okText: 'confirm text',
cancelText: 'cancel text'
};
<ReduxToastr confirmOptions={options}/>
okText
and cancelText
in the toasterConfirmOptions
object:const toastrConfirmOptions = {
...
okText: 'confirm text',
cancelText: 'cancel text'
};
toastr.confirm('Are you sure about that!', toastrConfirmOptions);
You can make it so ok
is the only button by:
disableCancel
in the toasterConfirmOptions
object:const toastrConfirmOptions = {
...
disableCancel: true
};
toastr.confirm('You have timed out! Please log back in.', toastrConfirmOptions);
You can add custom buttons by:
Passing buttons
in the toasterConfirmOptions
object.
The buttons are inserted after the OK and the cancel buttons.
Each button config can have a text
, handler
and a className
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
or cancel
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:
const toastrConfirmOptions = {
...
okText: 'Apply',
buttons: [{
text: 'Do not apply',
className: 'do-not-apply-btn',
handler: () => console.log('do-not-apply clicked')
}, {
cancel: true // move the cancel button to the end
}]
};
toastr.confirm('Your changes are applicable to 5 more records.', toastrConfirmOptions);
You can render your custom message component instead of the simple string message by:
component
prop to the toasterConfirmOptions
object:const toastrConfirmOptions = {
...
component: () => (
<MyCustomComponent myProp="myValue">
<span>Hello, World!</span>
</MyCustomComponent>
)
};
toastr.confirm(null, toastrConfirmOptions); // pass null for message
You can allow user to close confirm dialog by clicking in empty space
closeOnShadowClick
in the toasterConfirmOptions
object:const toastrConfirmOptions = {
...
closeOnShadowClick: true
};
toastr.confirm('You have timed out! Please log back in.', toastrConfirmOptions);
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
MIT. Copyright (c) 2016 Diego Oliveira.
FAQs
react-redux-toastr is a React toastr message implemented with Redux
The npm package react-redux-toastr-sass-patched receives a total of 0 weekly downloads. As such, react-redux-toastr-sass-patched popularity was classified as not popular.
We found that react-redux-toastr-sass-patched demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.