React notifications

Tiny notification library for React build for speed.

📋 Release notes · 📢 Issues and requests

🔨🔨🔨 WORK IN PROGRESS 🔨🔨🔨

Motivation

Why another notification library?

Needed dependency free, performant notification system that wouldn't choke the browser when run with large amount of notifications.

What problem does it solves?

Vast majority of packages out there is based on js timers (setTimeout or setInterval) often being created per displayed notification. Whilst it might not be a problem for small apps with fewer notifications, it has a significant impact on JS thread when running in high performance application with high volume of displayed notification.

Should you use it?

If you don't care about FPS, then DON'T.
There are really good and popular packages out there.

Features

⚡ Performance

• [x] Sustained high performance for large amount of notifications
• [x] Internal timer is based on requestAnimationFrame()
• [x] Timer with configurable (throttled) refresh rate based on desired FPS
• [x] No use of setTimeout or setInterval
• [x] GPU based CSS animation (in progress)

🎁 ...and more

• [x] Small footprint (~3.2KB)
• [x] Build with TypeScript (types included)
• [x] Single peer dependency: react
• [x] Notification container included
• [x] Comes with state management
  • [x] Supports React Context
  • [x] Can easily be used with Redux
• [x] Solid test coverage
• [x] Styled with SASS
• [x] No singletons

What's next?

• [ ] Dismiss effect (and dismissed notification property)
• [ ] Redux support
  • [ ] Generic action creators
  • [x] Action creators follow FSA
  • [x] Reusable reducer
• [ ] Usage examples
  • [x] Using with React context
  • [ ] Using with Redux
• [ ] Usage documentation published to Github Pages

Installation

With npm

npm i @derived/react-notification

With yarn

yarn add @derived/react-notification

Development

1. Clone your forked repository.
2. Run yarn to install dev dependencies and setup git hooks.
3. Start server with yarn dev.
4. Have fun!