mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-21 01:15:35 +00:00
94 lines
2.2 KiB
Text
94 lines
2.2 KiB
Text
---
|
||
sidebar_position: 3
|
||
slug: /informer
|
||
---
|
||
|
||
import Tabs from '@theme/Tabs';
|
||
import TabItem from '@theme/TabItem';
|
||
|
||
import UppyCdnExample from '/src/components/UppyCdnExample';
|
||
|
||
# Informer
|
||
|
||
The `@uppy/informer` plugin is a pop-up bar for showing notifications for the
|
||
[Dashboard](/docs/dashboard). When plugins have some exciting news (or errors)
|
||
to share, they can with Informer
|
||
|
||
## When should I use it?
|
||
|
||
When you use the [Dashboard](/docs/dashboard) it’s already included by default.
|
||
This plugin is published separately but made specifically for the Dashboard. You
|
||
can technically use it without it, but it’s not officially supported.
|
||
|
||
## Install
|
||
|
||
<Tabs>
|
||
<TabItem value="npm" label="NPM" default>
|
||
|
||
```shell
|
||
npm install @uppy/informer
|
||
```
|
||
|
||
</TabItem>
|
||
|
||
<TabItem value="yarn" label="Yarn">
|
||
|
||
```shell
|
||
yarn add @uppy/informer
|
||
```
|
||
|
||
</TabItem>
|
||
|
||
<TabItem value="cdn" label="CDN">
|
||
<UppyCdnExample>
|
||
{`
|
||
import { Uppy, Informer } from "{{UPPY_JS_URL}}"
|
||
const uppy = new Uppy()
|
||
uppy.use(Informer, { target: '#informer' })
|
||
`}
|
||
</UppyCdnExample>
|
||
</TabItem>
|
||
</Tabs>
|
||
|
||
## Use
|
||
|
||
```js
|
||
import Uppy from '@uppy/core';
|
||
import Informer from '@uppy/informer';
|
||
|
||
// The `@uppy/informer` plugin includes some basic styles.
|
||
// You can also choose not to use it and provide your own styles instead.
|
||
import '@uppy/core/dist/style.min.css';
|
||
import '@uppy/informer/dist/style.min.css';
|
||
|
||
new Uppy().use(Informer, { target: '#informer' });
|
||
```
|
||
|
||
Informer gets its data from `uppy.state.info`, which is updated by various
|
||
plugins via [`uppy.info`](/docs/uppy#infomessage-type-duration) method.
|
||
|
||
In the [compressor](/docs/compressor) plugin we use it like this for instance:
|
||
|
||
```js
|
||
const size = prettierBytes(totalCompressedSize);
|
||
this.uppy.info(this.i18n('compressedX', { size }), 'info');
|
||
```
|
||
|
||
When calling `uppy.info`, [Uppy](/docs/uppy) emits
|
||
[`info-visible`](/docs/uppy#info-visible) and will emit
|
||
[`info-hidden`](/docs/uppy#info-hidden) after the timeout.
|
||
|
||
## API
|
||
|
||
### Options
|
||
|
||
### `id`
|
||
|
||
A unique identifier for this plugin (`string`, default: `'Informer'`).
|
||
|
||
Use this if you need several `Informer` instances.
|
||
|
||
### `target`
|
||
|
||
DOM element, CSS selector, or plugin to mount the Informer into (`string` or
|
||
`Element`, default: `null`).
|