Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
redux-notifications
Advanced tools
redux-notifications
:warning: The previous package
re-notif
has been deprecated on NPM and renamed toredux-notifications
. A list of changes can be found in the Changelog. Please update your applications accordingly.
React & Redux based notifications center.
Thanks to Redux, the notification objects are maintained within Redux Store's State and are fired by Actions.
npm install --save redux-notifications
redux-notifications
reducer
to Redux.import { createStore, combineReducers } from 'redux'
import { reducer as notifReducer } from 'redux-notifications';
combineReducers({
notifs: notifReducer,
// ... more reducers here ...
})
Notifs
component at the root of your appimport { Provider } from 'react-redux'
import { Notifs } from 'redux-notifications';
<Provider store={store}>
<div>
// ... other things like router ...
<Notifs />
</div>
</Provider>
redux-notifications
uses react-css-transition-group with the following classes:
To import the default stylesheet:
import 'redux-notifications/lib/styles.css';
Thanks to Redux, sending notification is simply done by firing an Action
:
import { reducer as notifReducer, actions as notifActions, Notifs } from 'redux-notifications';
const { notifSend } = notifActions;
class Demo extends React.Component {
send() {
this.props.dispatch(notifSend({
message: 'hello world',
kind: 'info',
dismissAfter: 2000
}));
}
render() {
<button onClick={this.send}>Send Notification</button>
}
}
actions.notifSend({config})
config.message : node
[required]The notification message, can be one of:
string
,integer
,element
orarray
containing these types.
config.kind : string
[optional] [default:'info']The notification kind, can be one of:
info
,success
,warning
,danger
.
config.id : string
[optional] [default:Date.now()]Set an ID for the notification. If not set, defaults to Date.now().
config.dismissAfter : integer
[optional] [default:null]Auto dismiss the notification after the given number of milliseconds.
actions.notifClear()
Clear all current notifications.
actions.notifDismiss(id)
Dismiss a notification by ID
<Notifs CustomComponent={ReactComponent}/>
CustomComponent : React component
A custom react component can be used instead of the default Notif component
className : string
[optional] [default:null]Pass a custom classname to the component.
componentClassName : string
[optional] [default:'notif']The base className for each Notif component. Can be used to override CSS styles.
transitionEnterTimeout : integer
[optional] [default:600]Define the react-transition-group enter timeout is milliseconds.
transitionLeaveTimeout : integer
[optional] [default:600]Define the react-transition-group leave timeout is milliseconds.
actionLabel : string
Label for action click
onActionClick : func
Function when action is clicked. Requires
actionLabel
prop
git clone https://github.com/indexiatech/re-notif.git
cd re-notif
npm install
npm run start
Listening on localhost:9000
FAQs
Redux & React based Notifications center
The npm package redux-notifications receives a total of 21,316 weekly downloads. As such, redux-notifications popularity was classified as popular.
We found that redux-notifications 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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.