Pusher

Push notification-like component.

Pusher accepts:

• React Elements (e.g. <div />, <Component />, not string, number, null, or boolean), as long as it can accept a ref.
• Render prop, passing ref, pop, pause, and resume as parameters. Use this if you need more controls on the timings.

Example

Basic Usage

Note that you should only call usePusherContext within Pusher component. You can put Pusher on top of your app.

Container Positions

By default, calling push positions your element on TopCenter. You can pass position option with a value from PusherPositions on second parameter of push.

Durations

You can specify duration option with any number (in miliseconds) or null to never close. Otherwise if duration is undefined, it will be calculated from function getDurationFromContent which is equal to 350 * number of words with the lower/upper is [3500, 10000].

Calling push returns a close function. You can use this to limit how many items are being shown at the same time.

Max Concurrency

You can set the value maxDisplay within Pusher component to limit the number of elements in the Pusher at a time. By default, maxDisplay is 2. If maxDisplay is null, there is no constraint.

More Examples

See Also

• Toast
• Alert
• Caveat with refs

API

Pusher