@aglyn/shared-ui-snackstack 1.0.0-beta.143 → 1.0.0-beta.144
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,54 @@
|
|
|
1
|
-
# shared-ui-snackstack
|
|
1
|
+
# @aglyn/shared-ui-snackstack
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Stacked snackbar notifications for Material UI: a provider that queues and displays snackbars, and a hook to enqueue and close them from anywhere below it. The API follows notistack's (`SnackbarProvider`, `useSnackbar`, `enqueueSnackbar`). The Aglyn console, Besigner and the plugins' console pages use it for their toasts.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> Beta. Published from the Aglyn monorepo under the `beta` dist-tag; APIs can change between beta releases.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
npm install @aglyn/shared-ui-snackstack@beta
|
|
10
|
+
|
|
11
|
+
Peer dependencies: `react`, `react-dom` and `@mui/material`, plus three Aglyn packages that are declared as peers rather than dependencies, so install them alongside:
|
|
12
|
+
|
|
13
|
+
npm install @aglyn/shared-ui-theme@beta @aglyn/shared-util-tools@beta @aglyn/shared-util-vendor@beta
|
|
14
|
+
|
|
15
|
+
## What's in it
|
|
16
|
+
|
|
17
|
+
- `SnackbarProvider` — wrap the part of the app that shows snackbars. Props (`SnackbarProviderProps`) include `maxSnack` (how many stack at once, default 3), `dense`, `hideIconVariant`, `iconVariant`, `domRoot` and `classes`, plus the shared per-snackbar defaults.
|
|
18
|
+
- `useSnackbar()` — returns `{ enqueueSnackbar, closeSnackbar }` (`ProviderContext`).
|
|
19
|
+
- `enqueueSnackbar(message, options?)` returns the snackbar's id. `options` (`OptionsObject`) include `variant` (`'default' | 'error' | 'success' | 'warning' | 'info'`), `persist` and `snackbarId`.
|
|
20
|
+
- `closeSnackbar(id?)` closes one snackbar, or all of them when called without an id.
|
|
21
|
+
- `withSnackbar(Component)` — the same two functions injected as props, for class components.
|
|
22
|
+
- `SnackbarContent` — the content wrapper to use when rendering a custom snackbar body.
|
|
23
|
+
- Types: `SnackbarId`, `SnackbarMessage`, `SnackbarAction`, `VariantType`, `CloseReason`, `SnackbarOrigin`, `OptionsObject`, `SnackbarProviderProps`, `ProviderContext`, `WithSnackbarProps`.
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { SnackbarProvider, useSnackbar } from '@aglyn/shared-ui-snackstack'
|
|
29
|
+
|
|
30
|
+
function SaveButton() {
|
|
31
|
+
const { enqueueSnackbar } = useSnackbar()
|
|
32
|
+
return (
|
|
33
|
+
<button onClick={() => enqueueSnackbar('Saved', { variant: 'success' })}>
|
|
34
|
+
Save
|
|
35
|
+
</button>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export function App() {
|
|
40
|
+
return (
|
|
41
|
+
<SnackbarProvider maxSnack={3}>
|
|
42
|
+
<SaveButton />
|
|
43
|
+
</SnackbarProvider>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## How it fits
|
|
49
|
+
|
|
50
|
+
A `shared` UI package. It builds on `@aglyn/shared-ui-theme`, `@aglyn/shared-util-tools` and `@aglyn/shared-util-vendor`; `@aglyn/besigner-ui` and the feature plugins depend on it. Shared packages are generic: they import only other shared packages and hold no plugin's domain.
|
|
51
|
+
|
|
52
|
+
## License
|
|
53
|
+
|
|
54
|
+
Apache-2.0. Source: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/snackstack
|