Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@ausuliv/frontend-components-notifications
Advanced tools
Notifications portal to show toast notifications for RedHat Cloud Services project.
This package has portal component that shows toast notifications based on PF4 alert component.
With NPM
npm i -S @redhat-cloud-services/frontend-components-notifications
With yarn
yarn add @redhat-cloud-services/frontend-components-notifications
This package is dependent on @ausuliv/frontend-components-utilities it will automatically install it trough direct dependencies.
In order not to decrease your bundle size you you should either import components trough direct imports or use babel plugin to change relative imports to direct imports. You can mix both direct imports and babel plugin, it's just convenient to use the babel plugin so you don't have to change all of your imports.
It's recommended to use absolute import paths for improved build times. Import will be automatically resolved to ESM or CJS version of the build based on the environment.
import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
V3 of the packages has introduced improved build output for absolute import paths, It's no longer required to point towards ESM/CJS asset. This is now resolved at build time by the asset.
Remove ESM/CJS references
// v2
import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/esm/NotificationsPortal';
// v3
import NotificationPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
Notification reducer, actions and action types have changed import path
The correct import path is now at: @redhat-cloud-services/frontend-components-notifications/redux
For example:
// v2
import { addNotification, ADD_NOTIFICATION } from '@redhat-cloud-services/frontend-components-notifications/cjs/actions';
// v3
import { notificationsReducer, addNotification, ADD_NOTIFICATION } from '@redhat-cloud-services/frontend-components-notifications/redux';
import notificationsMiddleware from '@redhat-cloud-services/frontend-components-notifications/notificationsMiddleware';
Adjust babel transform import config
If you are using babel transform imports plugin, you need to change the import path.
// v2
{
transform: (importName) => `@redhat-cloud-services/frontend-components-notifications/esm/${importName}`
}
// v3
{
transform: (importName) => `@redhat-cloud-services/frontend-components-notifications/${importName}`
}
There are 2 plugins that can be used to change relative imports to direct imports
Since our components require a bit more setting up, we are recommending using babel-plugin-transform-imports
.
Change your babel config to be javascript config babel.config.js
so you can use JS functions to properly transform your imports
notificationsMapper = {
addNotification: 'redux',
removeNotification: 'redux',
};
module.exports = {
presets: [
// your presets go here
],
plugins: [
// your plugins
[
'transform-imports',
{
'@redhat-cloud-services/frontend-components-notifications': {
transform: (importName) =>
`@redhat-cloud-services/frontend-components-notifications/${notificationsMapper[importName] || importName}`,
preventFullImport: true,
}
},
'frontend-notifications'
]
// other plugins, for instance PF transform imports and such as well
]
};
index
- the entire notifications bundle, should be used as fallback if something does not exists in other modulesnotificationsMiddleware
- middleware function to hook into your reduxactions
- list of notifications actionsactionTypes
- list of redux action typesNotificationPortal
- portal to render your notifications tonotifications
- redux reducers are exported in this fileFAQs
Notifications portal to show toast notifications for RedHat Cloud Services project.
The npm package @ausuliv/frontend-components-notifications receives a total of 32 weekly downloads. As such, @ausuliv/frontend-components-notifications popularity was classified as not popular.
We found that @ausuliv/frontend-components-notifications demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.