How to use react-notifications-component - 8 common examples

To help you get started, we’ve selected a few react-notifications-component examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github XinFinOrg / BlockDegree / server / admin-new / src / components / Functionalities / Events / AddPostTemplate.js View on Github external
function showNotification(type, title, message) {
  store.addNotification({
    title: title,
    message: message,
    type: type,
    insert: "top",
    container: "top-right",
    animationIn: ["animated", "fadeIn"],
    animationOut: ["animated", "fadeOut"],
    width: 200,
    dismiss: {
      duration: 3000,
      onScreen: true
    }
  });
}
github alexislepresle / gatsby-shopify-theme / src / templates / product-page.js View on Github external
const addNotification = () => {
        store.addNotification({
            title: "Just added to your cart 😊",
            message: `${product.title} / ${productVariant.title}`,
            type: "success",
            insert: "top",
            container: "bottom-right",
            animationIn: ["animated", "fadeIn"],
            animationOut: ["animated", "fadeOut"],
            dismissable: { click: true },
            dismiss: { duration: 4000 }
        }); 
    }
github balena-io-modules / rendition / src / components / Notifications / index.tsx View on Github external
addNotification: (options: React.ReactNode | NotificationOptions) => {
		const transformedOptions = getTransformedOptions(options);

		store.addNotification({
			container: 'top-right',
			animationIn: ['animated', 'fadeIn', 'faster'],
			animationOut: ['animated', 'fadeOut', 'faster'],
			slidingEnter: enterExitAnimation,
			slidingExit: enterExitAnimation,
			touchRevert: enterExitAnimation,
			touchSlidingExit: {
				swipe: enterExitAnimation,
				fade: enterExitAnimation,
			},
			dismiss: {
				duration: transformedOptions.duration,
				pauseOnHover: true,
				waitForAnimation: false,
				click: false,
				touch: false,
github XinFinOrg / BlockDegree / server / admin-new / src / components / Functionalities / Events / index.js View on Github external
function showNotification(type, title, message) {
  store.addNotification({
    title: title,
    message: message,
    type: type,
    insert: "top",
    container: "top-right",
    animationIn: ["animated", "fadeIn"],
    animationOut: ["animated", "fadeOut"],
    width: 200,
    dismiss: {
      duration: 3000,
      onScreen: true
    }
  });
}
github XinFinOrg / BlockDegree / server / admin-new / src / components / Functionalities / Events / GenerateEventVar.js View on Github external
function showNotification(type, title, message) {
  store.addNotification({
    title: title,
    message: message,
    type: type,
    insert: "top",
    container: "top-right",
    animationIn: ["animated", "fadeIn"],
    animationOut: ["animated", "fadeOut"],
    width: 200,
    dismiss: {
      duration: 3000,
      onScreen: true
    }
  });
}
github XinFinOrg / BlockDegree / server / admin-new / src / components / Functionalities / Events / GenerateEventTS.js View on Github external
function showNotification(type, title, message) {
  store.addNotification({
    title: title,
    message: message,
    type: type,
    insert: "top",
    container: "top-right",
    animationIn: ["animated", "fadeIn"],
    animationOut: ["animated", "fadeOut"],
    width: 200,
    dismiss: {
      duration: 3000,
      onScreen: true
    }
  });
}
github balena-io-modules / rendition / src / components / Notifications / index.tsx View on Github external
onDismiss={() => {
				if (onDismiss) {
					onDismiss();
				}
				store.removeNotification(id);
			}}
		>
github balena-io-modules / rendition / src / components / Notifications / index.tsx View on Github external
	removeNotification: (id: string | number) => store.removeNotification(id),
};

react-notifications-component

React component for creating notifications on the fly

MIT
Latest version published 2 years ago

Package Health Score

53 / 100
Full package analysis