https://github.com/proai/react-stacks
:inbox_tray: React.js stack components for alerts, notifications, toasts
https://github.com/proai/react-stacks
alerts notifications react stacks toasts
Last synced: 5 months ago
JSON representation
:inbox_tray: React.js stack components for alerts, notifications, toasts
- Host: GitHub
- URL: https://github.com/proai/react-stacks
- Owner: ProAI
- License: mit
- Created: 2019-03-22T13:39:05.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-01-23T22:07:08.000Z (about 1 year ago)
- Last Synced: 2025-01-23T22:11:12.174Z (about 1 year ago)
- Topics: alerts, notifications, react, stacks, toasts
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📥 React Stacks
Component based stack system for positioning alerts, notifications, toasts and more.
## Problem
UI frameworks often offer components like alerts or toasts, but mostly these frameworks are not responsible for positioning them.
## Solution
`react-stacks` lets you define stacks on custom positions. Then you can use the `useStack()` hook to push a React.js component to the stack, which might be an alert or a toast. If you push multiple components these components will be stacked.
## Installation
```shell
npm install react-stacks
# or
yarn add react-stacks
```
## Example
Define the stacks in your main application component:
```jsx
import React from 'react';
import { Provider } from 'react-stacks';
const stacks = {
main: ({ children }) => (
{children}
),
bottom: ({ children }) => (
{children.reverse()}
),
};
function App() {
return (
test
);
}
```
Use a defined stack in a child component:
```jsx
import React from 'react';
import { useStack } from 'react-stacks';
function Child() {
const stack = useStack('main');
return (
{
stack.push(
Error!);
}}
>
Test A
{
stack.push(Success!, { autoDismiss: 3000 });
}}
>
Test B
);
}
```
`autoDismiss` can be either set as a prop of `` component for all stacks or as an option of the push method for an individual item. If `autoDismiss` is set to `0`, there will be no auto dismiss.
## License
This package is released under the [MIT License](LICENSE).