Skip to content

ODudek/noti-react

Repository files navigation

Noti-react

npm version CI Storybook npm npm bundle size (minified) Security

πŸ”” Simple, customizable notification component for React with TypeScript support and modern hooks architecture!

demo

Install

  1. Use npm
npm install noti-react
  1. Use yarn
yarn add noti-react

Notification

property propType required default description
type string ('error', 'info', 'success', 'warn') - 'info' Deside which type of notification do you want to use!
label string yes - Text which you want to display
autoHide bool - true Auto hide notification
animationTime number - 500 Time of animation duration in miliseconds
position string ('top-left', 'top-right', 'bottom-left', 'bottom-right') - 'bottom-right' Position in which corner do you want to display notification
hideTime number - 5000 After this time notification will close if autoHide props is true
customColor string (rgb string like '#000000') - - Add your custom color
className string - - Customize style by adding custom class

Example

  1. Import notification components
import { Notification, NotificationContainer } from 'noti-react';
  1. Use it in your component
// Single notification
<Notification label="Example of notification" />

// Multiple notifications with proper stacking
<NotificationContainer position="bottom-right">
	<Notification label="First notification" type="success" />
	<Notification label="Second notification" type="info" />
	<Notification label="Third notification" type="error" />
</NotificationContainer>

✨ Features

  • πŸš€ Modern React Hooks - Built with functional components and React hooks
  • 🎨 4 Built-in Types - Success, Info, Error, and Warning notifications
  • πŸ“± 4 Position Options - Display in any corner of the screen
  • πŸ“š Notification Stacking - Container component for multiple notifications
  • ⏰ Auto-hide Support - Configurable auto-dismiss functionality
  • 🎭 Smooth Animations - Customizable animation timing and effects
  • 🎨 Custom Styling - Override colors and add custom CSS classes
  • πŸ“¦ TypeScript Ready - Full TypeScript definitions included
  • πŸ”§ Zero Dependencies - Lightweight with no external dependencies
  • β™Ώ Accessible - Screen reader friendly with proper ARIA attributes

πŸ“– Live Examples

Check out the live Storybook documentation to see all examples and interact with the components.

Development

Prerequisites

  • Node.js 18+ (see .nvmrc)
  • npm 8+

Setup

  1. Clone the repository:
git clone https://github.com/ODudek/noti-react.git
cd noti-react
  1. Install dependencies:
npm install
  1. Start Storybook for development:
npm run dev

Building

Build the library:

npm run transpile

Testing

Run tests:

npm test

Run linting and formatting:

npm run lint
npm run format:check

Fix linting and formatting issues automatically:

npm run lint:fix
npm run format

API Reference

Notification Component

The main notification component with comprehensive customization options.

import { Notification } from 'noti-react';

<Notification
  type="success"
  label="Operation completed successfully!"
  position="top-right"
  autoHide={true}
  hideTime={3000}
  animationTime={300}
  customColor="#4CAF50"
  className="my-custom-notification"
/>

NotificationContainer Component

Container component for managing multiple notifications with proper positioning and stacking.

property propType required default description
position string ('top-left', 'top-right', 'bottom-left', 'bottom-right') - 'bottom-right' Position where notifications will be displayed
children ReactNode yes - Notification components to display
import { Notification, NotificationContainer } from 'noti-react';

<NotificationContainer position="top-right">
  <Notification type="success" label="Success message" />
  <Notification type="info" label="Info message" />
</NotificationContainer>

Advanced Examples

Multiple Notifications with Container

import { Notification, NotificationContainer } from 'noti-react';

<NotificationContainer position="bottom-right">
	<Notification
		type="success"
		label="File uploaded successfully!"
		hideTime={3000}
	/>
	<Notification
		type="info"
		label="Processing your request..."
		autoHide={false}
	/>
	<Notification
		type="warn"
		label="Low storage space remaining"
		hideTime={8000}
	/>
</NotificationContainer>;

Custom Styled Notification

<Notification
	type="info"
	label="Custom notification with longer text and styling"
	customColor="#2196F3"
	className="custom-info-notification"
	animationTime={600}
	hideTime={7000}
/>

Error Notification (Non-dismissible)

<Notification
	type="error"
	label="Something went wrong! Please try again."
	position="top-left"
	autoHide={false}
/>

Different Positions with Container

// Top-left notifications
<NotificationContainer position="top-left">
	<Notification type="info" label="System update available" />
</NotificationContainer>

// Bottom-right notifications
<NotificationContainer position="bottom-right">
	<Notification type="success" label="Changes saved" />
	<Notification type="warn" label="Session expires in 5 minutes" />
</NotificationContainer>

Contributing

We welcome contributions! Please see CONTRIBUTING.md for details on how to contribute to this project.

Security

For security concerns, please see SECURITY.md.

Changelog

See CHANGELOG.md for a list of changes and version history.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you found this project helpful, please consider:

  • ⭐ Starring the repository
  • πŸ› Reporting bugs via GitHub Issues
  • πŸ’‘ Suggesting new features
  • 🀝 Contributing to the codebase

πŸ”§ Technical Stack

  • React: 18.x with hooks architecture
  • TypeScript: Full type definitions
  • Vite: Modern build tooling
  • Storybook: Component documentation and testing
  • Jest + Enzyme: Unit testing suite
  • ESLint + Prettier: Code quality and formatting
  • GitHub Actions: Automated CI/CD pipeline

🌐 Browser Support

  • Chrome: Latest versions
  • Firefox: Latest versions
  • Safari: Latest versions
  • Edge: Latest versions
  • React: 16.8+ (hooks support required)

Sponsor this project

 

Packages

No packages published

Contributors 2

  •  
  •