router.middleware.flashMessage

[![Version][npm-version-shield]][npm]
[![Dependency Status][david-dm-shield]][david-dm]
[![Peer Dependency Status][david-dm-peer-shield]][david-dm-peer]
[![Dev Dependency Status][david-dm-dev-shield]][david-dm-dev]
[![Downloads][npm-stats-shield]][npm-stats]

[david-dm]: https://david-dm.org/Profiscience/knockout-contrib?path=packages/router.middleware.flashMessage
[david-dm-shield]: https://david-dm.org/Profiscience/knockout-contrib/status.svg?path=packages/router.middleware.flashMessage
[david-dm-peer]: https://david-dm.org/Profiscience/knockout-contrib?path=packages/router.middleware.flashMessage&type=peer
[david-dm-peer-shield]: https://david-dm.org/Profiscience/knockout-contrib/peer-status.svg?path=packages/router.middleware.flashMessage
[david-dm-dev]: https://david-dm.org/Profiscience/knockout-contrib?path=packages/router.middleware.flashMessage&type=dev
[david-dm-dev-shield]: https://david-dm.org/Profiscience/knockout-contrib/dev-status.svg?path=packages/router.middleware.flashMessage
[npm]: https://www.npmjs.com/package/@profiscience/knockout-contrib-router-middleware-flash-message
[npm-version-shield]: https://img.shields.io/npm/v/@profiscience/knockout-contrib-router-middleware-flash-message.svg
[npm-stats]: http://npm-stat.com/charts.html?package=@profiscience/knockout-contrib-router-middleware-flash-message&author=&from=&to=
[npm-stats-shield]: https://img.shields.io/npm/dt/@profiscience/knockout-contrib-router-middleware-flash-message.svg?maxAge=2592000

> NOTE: This package is intended for consumption via the @profiscience/knockout-contrib metapackage

Display a flash message which will be removed after the next navigation.

Usage

$3

``typescript
import { flashMessageMiddleware } from '@profiscience/knockout-contrib'

Router.use(flashMessageMiddleware)
`

$3

Create a custom flash message component the exported flashMessage observable, or include the flash-message component ().

#### Default Flash Message Component

See components.flash-message

#### Custom Flash Message Component

`typescript
import * as ko from 'knockout'
import { Router, flashMessage } from '@profiscience/knockout-contrib'

/**
* flashMessage is an observable contatining the value passed below
*
* The following is an example of how you could add custom properties for your flash message
*/

// If using TypeScript, define the interface for your flash message
declare module '@profiscience/knockout-contrib-router-middleware-flash-message' {
// tslint:disable-next-line no-shadowed-variable
interface IFlashMessage {
text: string
type?: string
}
}

ko.components.register('flash-message', {
viewModel: {
instance: {
text: ko.pureComputed(() => {
const unwrappedFlashMessage = flashMessage()
if (typeof unwrappedFlashMessage === 'string') {
return unwrappedFlashMessage
} else {
return unwrappedFlashMessage.text
}
}),
css: ko.pureComputed(() => {
const unwrappedFlashMessage = flashMessage()
if (typeof unwrappedFlashMessage.type !== 'undefined') {
return unwrappedFlashMessage.type
} else {
return 'info'
}
}),
},
},
template: