New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-hook-notification

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-hook-notification - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

2

dist/main/types/notificationHook.d.ts
import { NotificationProps } from '../../presentation/types/Notification';
export declare type UseNotificationParams = Omit<NotificationProps, 'title' | 'text' | 'type' | 'id' | 'onRemove'>;
export declare type UseNotificationParams = Omit<NotificationProps, 'title' | 'text' | 'type' | 'id' | 'onRemove' | 'amount'>;
export declare type NotificationParams = Omit<NotificationProps, 'onRemove' | 'type' | 'id'>;

@@ -4,0 +4,0 @@ export declare type UseNotificationHook = (hookParams?: UseNotificationParams) => {

2

dist/presentation/components/Container/index.js

@@ -9,4 +9,4 @@ import React, { memo } from 'react';

return show ? (React.createElement(ContainerElement, { position: position },
React.createElement(AnimatePresence, null, notifications.map(notification => (React.createElement(Notification, Object.assign({ key: notification.id }, notification, { onRemove: onRemove }))))))) : null;
React.createElement(AnimatePresence, null, notifications.map(notification => (React.createElement(Notification, Object.assign({ key: notification.id }, notification, { onRemove: onRemove, amount: notifications.length }))))))) : null;
};
export const Container = memo(Component);

2

dist/presentation/components/Notification/index.d.ts
import React from 'react';
import { NotificationProps } from '../../types/Notification';
export declare const Notification: React.MemoExoticComponent<({ type, id, onRemove, title, text, position, theme, transition, delay, showProgressBar, showButtonClose, closeOnClick, showIcon, autoClose, pauseOnHover, }: NotificationProps) => JSX.Element>;
export declare const Notification: React.MemoExoticComponent<({ type, id, onRemove, title, text, amount, position, theme, transition, delay, showProgressBar, showButtonClose, closeOnClick, showIcon, autoClose, pauseOnHover, }: NotificationProps) => JSX.Element>;

4

dist/presentation/components/Notification/index.js

@@ -10,3 +10,3 @@ import React, { memo } from 'react';

import { Container, IconContainer, TextContainer, Title, Text, ButtonClose, } from './styles';
const Component = ({ type, id, onRemove, title, text, position = NotificationDefaultProps.position, theme = NotificationDefaultProps.theme, transition = NotificationDefaultProps.transition, delay = NotificationDefaultProps.delay, showProgressBar = NotificationDefaultProps.showProgressBar, showButtonClose = NotificationDefaultProps.showButtonClose, closeOnClick = NotificationDefaultProps.closeOnClick, showIcon = NotificationDefaultProps.showIcon, autoClose = NotificationDefaultProps.autoClose, pauseOnHover = NotificationDefaultProps.pauseOnHover, }) => {
const Component = ({ type, id, onRemove, title, text, amount, position = NotificationDefaultProps.position, theme = NotificationDefaultProps.theme, transition = NotificationDefaultProps.transition, delay = NotificationDefaultProps.delay, showProgressBar = NotificationDefaultProps.showProgressBar, showButtonClose = NotificationDefaultProps.showButtonClose, closeOnClick = NotificationDefaultProps.closeOnClick, showIcon = NotificationDefaultProps.showIcon, autoClose = NotificationDefaultProps.autoClose, pauseOnHover = NotificationDefaultProps.pauseOnHover, }) => {
const { buttonColor, themeSelected, withIcon, withProgressBar, setElementRef, isPaused, } = useController({

@@ -20,3 +20,3 @@ autoClose,

});
return (React.createElement(Container, Object.assign({ ref: setElementRef, theme: themeSelected, key: id, role: type, onClick: () => closeOnClick && onRemove(id) }, animations[transition][position]),
return (React.createElement(Container, Object.assign({ ref: setElementRef, theme: themeSelected, key: id, role: type, onClick: () => closeOnClick && onRemove(id) }, animations(amount)[transition][position]),
withIcon && (React.createElement(IconContainer, { "aria-label": type },

@@ -23,0 +23,0 @@ React.createElement(Icon, { type: type, size: 20, color: colorsIcon[theme][type] }))),

12

dist/presentation/components/Notifications/useController.js

@@ -15,5 +15,11 @@ import { useCallback, useLayoutEffect, useState } from 'react';

const notificationsTopCenter = notifications.filter(notification => notification.position === 'top-center');
const notificationsBottomRight = notifications.filter(notification => notification.position === 'bottom-right');
const notificationsBottomLeft = notifications.filter(notification => notification.position === 'bottom-left');
const notificationsBottomCenter = notifications.filter(notification => notification.position === 'bottom-center');
const notificationsBottomRight = notifications
.filter(notification => notification.position === 'bottom-right')
.reverse();
const notificationsBottomLeft = notifications
.filter(notification => notification.position === 'bottom-left')
.reverse();
const notificationsBottomCenter = notifications
.filter(notification => notification.position === 'bottom-center')
.reverse();
return {

@@ -20,0 +26,0 @@ notificationsTopRight,

679

dist/presentation/constants/animations.d.ts

@@ -1,678 +0,1 @@

export declare const animations: {
bounce: {
'top-right': {
initial: {
right: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
animate: {
right: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
exit: {
right: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
transition: {
type: string;
bounce: number;
};
};
'top-center': {
initial: {
top: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
animate: {
top: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
exit: {
top: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
transition: {
type: string;
bounce: number;
};
};
'top-left': {
initial: {
left: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
animate: {
left: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
exit: {
left: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
transition: {
type: string;
bounce: number;
};
};
'bottom-right': {
initial: {
right: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
animate: {
right: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
exit: {
right: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
transition: {
type: string;
bounce: number;
};
};
'bottom-center': {
initial: {
bottom: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
animate: {
bottom: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
exit: {
bottom: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
transition: {
type: string;
bounce: number;
};
};
'bottom-left': {
initial: {
left: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
animate: {
left: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
exit: {
left: number;
transition: {
type: string;
bounce: number;
duration: number;
};
};
transition: {
type: string;
bounce: number;
};
};
};
slide: {
'top-right': {
initial: {
right: number;
};
animate: {
right: number;
};
exit: {
right: number;
};
transition: {
type: string;
bounce: number;
};
};
'top-center': {
initial: {
top: number;
};
animate: {
top: number;
};
exit: {
top: number;
};
transition: {
type: string;
bounce: number;
};
};
'top-left': {
initial: {
left: number;
};
animate: {
left: number;
};
exit: {
left: number;
};
transition: {
type: string;
bounce: number;
};
};
'bottom-right': {
initial: {
right: number;
};
animate: {
right: number;
};
exit: {
right: number;
};
transition: {
type: string;
bounce: number;
};
};
'bottom-center': {
initial: {
bottom: number;
};
animate: {
bottom: number;
};
exit: {
bottom: number;
};
transition: {
type: string;
bounce: number;
};
};
'bottom-left': {
initial: {
left: number;
};
animate: {
left: number;
};
exit: {
left: number;
};
transition: {
type: string;
bounce: number;
};
};
};
fade: {
'top-right': {
initial: {
opacity: number;
};
animate: {
opacity: number;
};
exit: {
opacity: number;
};
transition: {
type: string;
bounce: number;
duration: number;
};
};
'top-center': {
initial: {
opacity: number;
};
animate: {
opacity: number;
};
exit: {
opacity: number;
};
transition: {
type: string;
bounce: number;
duration: number;
};
};
'top-left': {
initial: {
opacity: number;
};
animate: {
opacity: number;
};
exit: {
opacity: number;
};
transition: {
type: string;
bounce: number;
duration: number;
};
};
'bottom-right': {
initial: {
opacity: number;
};
animate: {
opacity: number;
};
exit: {
opacity: number;
};
transition: {
type: string;
bounce: number;
duration: number;
};
};
'bottom-center': {
initial: {
opacity: number;
};
animate: {
opacity: number;
};
exit: {
opacity: number;
};
transition: {
type: string;
bounce: number;
duration: number;
};
};
'bottom-left': {
initial: {
opacity: number;
};
animate: {
opacity: number;
};
exit: {
opacity: number;
};
transition: {
type: string;
bounce: number;
duration: number;
};
};
};
flip: {
'top-right': {
initial: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
animate: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
exit: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
};
'top-center': {
initial: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
animate: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
exit: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
};
'top-left': {
initial: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
animate: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
exit: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
};
'bottom-right': {
initial: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
animate: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
exit: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
};
'bottom-center': {
initial: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
animate: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
exit: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
};
'bottom-left': {
initial: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
animate: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
exit: {
rotateX: number;
opacity: number;
skewX: number;
transition: {
bounce: number;
type: string;
duration: number;
};
};
};
};
zoom: {
'top-right': {
initial: {
scale: number;
opacity: number;
};
animate: {
scale: number;
opacity: number;
};
exit: {
scale: number;
opacity: number;
};
transition: {
type: string;
bounce: number;
};
};
'top-center': {
initial: {
scale: number;
opacity: number;
};
animate: {
scale: number;
opacity: number;
};
exit: {
scale: number;
opacity: number;
};
transition: {
type: string;
bounce: number;
};
};
'top-left': {
initial: {
scale: number;
opacity: number;
};
animate: {
scale: number;
opacity: number;
};
exit: {
scale: number;
opacity: number;
};
transition: {
type: string;
bounce: number;
};
};
'bottom-right': {
initial: {
scale: number;
opacity: number;
};
animate: {
scale: number;
opacity: number;
};
exit: {
scale: number;
opacity: number;
};
transition: {
type: string;
bounce: number;
};
};
'bottom-center': {
initial: {
scale: number;
opacity: number;
};
animate: {
scale: number;
opacity: number;
};
exit: {
scale: number;
opacity: number;
};
transition: {
type: string;
bounce: number;
};
};
'bottom-left': {
initial: {
scale: number;
opacity: number;
};
animate: {
scale: number;
opacity: number;
};
exit: {
scale: number;
opacity: number;
};
transition: {
type: string;
bounce: number;
};
};
};
};
export declare const animations: (index: number) => Record<string, any>;

50

dist/presentation/constants/animations.js

@@ -24,14 +24,14 @@ const fade = {

};
const slideBottom = {
const slideBottom = (index) => ({
initial: { bottom: -110 },
animate: { bottom: 0 },
exit: { bottom: -110 },
exit: { bottom: -110 * index },
transition: { type: 'spring', bounce: 0 },
};
const slideTop = {
initial: { top: -110 },
});
const slideTop = (index) => ({
initial: { top: -110 * index },
animate: { top: 0 },
exit: { top: -110 },
exit: { top: -110 * index },
transition: { type: 'spring', bounce: 0 },
};
});
const bounceTransationIn = { type: 'spring', bounce: 0.5, duration: 0.5 };

@@ -51,14 +51,14 @@ const bounceTransationOut = { type: 'spring', bounce: 0, duration: 0.5 };

};
const bounceBottom = {
initial: { bottom: -110, transition: bounceTransationOut },
const bounceBottom = (index) => ({
initial: { bottom: -110 * index, transition: bounceTransationOut },
animate: { bottom: 0, transition: bounceTransationIn },
exit: { bottom: -110, transition: bounceTransationOut },
exit: { bottom: -110 * index, transition: bounceTransationOut },
transition: { type: 'spring', bounce: 0 },
};
const bounceTop = {
initial: { top: -110, transition: bounceTransationOut },
});
const bounceTop = (index) => ({
initial: { top: -110 * index, transition: bounceTransationOut },
animate: { top: 0, transition: bounceTransationIn },
exit: { top: -110, transition: bounceTransationOut },
exit: { top: -110 * index, transition: bounceTransationOut },
transition: { type: 'spring', bounce: 0 },
};
});
const flip = {

@@ -90,17 +90,17 @@ initial: {

};
export const animations = {
export const animations = (index) => ({
bounce: {
'top-right': Object.assign({}, bounceRight),
'top-center': Object.assign({}, bounceTop),
'top-left': Object.assign({}, bounceLeft),
'bottom-right': Object.assign({}, bounceRight),
'bottom-center': Object.assign({}, bounceBottom),
'bottom-left': Object.assign({}, bounceLeft),
'top-right': bounceRight,
'top-center': bounceTop(index),
'top-left': bounceLeft,
'bottom-right': bounceRight,
'bottom-center': bounceBottom(index),
'bottom-left': bounceLeft,
},
slide: {
'top-right': slideRight,
'top-center': slideTop,
'top-center': slideTop(index),
'top-left': slideLeft,
'bottom-right': slideRight,
'bottom-center': slideBottom,
'bottom-center': slideBottom(index),
'bottom-left': slideLeft,

@@ -132,2 +132,2 @@ },

},
};
});

1

dist/presentation/types/Notification.d.ts

@@ -66,3 +66,4 @@ export declare type NotificationType = 'success' | 'error' | 'info' | 'warning' | 'default';

id: string;
amount: number;
onRemove(id: string): void;
}

2

package.json
{
"version": "2.0.0",
"version": "2.0.1",
"license": "MIT",

@@ -4,0 +4,0 @@ "main": "dist/index.js",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc