Rr Notifications
Edit page
HomeNotificationsProviderReadme

rr-notifications

License: MIT  version  Build Status  semantic-release  Codecov 

rr-notifications is a flexible and customizable react notification system. Create your own notification component with the content you want, style it however you want and with technology of your choice and it will work.

Example

import React from 'react';
import { useNotification } from 'rr-notifications';
const Demo = () => {
  const { addNotification } = useNotification();
  return (
    <div>
      <button onClick={() => addNotification({ text: 'notification' })}>
        Add notification
      </button>
    </div>
  );
};
import { NotificationsProvider } from 'rr-notifications';
import Demo from 'path/to/demo';
const App = () => (
  <NotificationsProvider
    position={['80px', '80px', 'auto', 'auto']}
    animationDuration={400}
    animationEasing="ease"
    renderNotification={({ removeNotification, payload }) => (
      <div
        style={{
          backgroundColor: '#333',
          padding: '16px',
          marginBottom: '8px',
        }}
      >
        <p style={{ color: '#fff' }}>{payload.text}</p>
        <button type="button" onClick={removeNotification}>
          Click to close
        </button>
      </div>
    )}
  >
    <Demo />
  </NotificationsProvider>
);