π Simple, customizable notification component for React with TypeScript support and modern hooks architecture!
- Use npm
npm install noti-react
- Use yarn
yarn add noti-react
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 |
- Import notification components
import { Notification, NotificationContainer } from 'noti-react';
- 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>
- π 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
Check out the live Storybook documentation to see all examples and interact with the components.
- Node.js 18+ (see .nvmrc)
- npm 8+
- Clone the repository:
git clone https://github.com/ODudek/noti-react.git
cd noti-react
- Install dependencies:
npm install
- Start Storybook for development:
npm run dev
Build the library:
npm run transpile
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
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"
/>
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>
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>;
<Notification
type="info"
label="Custom notification with longer text and styling"
customColor="#2196F3"
className="custom-info-notification"
animationTime={600}
hideTime={7000}
/>
<Notification
type="error"
label="Something went wrong! Please try again."
position="top-left"
autoHide={false}
/>
// 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>
We welcome contributions! Please see CONTRIBUTING.md for details on how to contribute to this project.
For security concerns, please see SECURITY.md.
See CHANGELOG.md for a list of changes and version history.
This project is licensed under the MIT License - see the LICENSE file for details.
If you found this project helpful, please consider:
- β Starring the repository
- π Reporting bugs via GitHub Issues
- π‘ Suggesting new features
- π€ Contributing to the codebase
- 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
- Chrome: Latest versions
- Firefox: Latest versions
- Safari: Latest versions
- Edge: Latest versions
- React: 16.8+ (hooks support required)