RNS Redux

A reimagining of React-Notification-System in Typescript, with an API that supports React Hooks.

Github: https://github.com/justindujardin/rns-redux/

Website: https://justindujardin.github.io/rns-redux/

Project Health

Check Type	Status
Master Build
Code Coverage
Dependency Updater
Up-to-date Dependencies
Up-to-date DevDependencies
Contributors

Usage

Install the library:

npm install --save rns-redux

Add the NotifyProvider near the top of your app. By default this will include a component NotifyPortal as a child that will render the notifications. This can be disabled if the NotifyPortal is manually placed elsewhere.

<NotifyProvider>
  <YourApp/>
</NotifyProvider>

Under the covers React's useReducer API is the default store for notifications state, which is local to the provider component instance.

Show a notification:

export function MyHookComponent() {
  const { api } = useNotify()
  api.showNotification({
    level: 'info',
    message: 'hi'
  })
}

Credits

Typescript library starter by @alexjoverm

React Components based on React-Notification-System

Thanks to the wonderful people that contribute to this project (emoji key):

_{Justin DuJardin} ⚠️ 💻 🚇	_{Alex Jover} 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!

Index

Classes

Type aliases

Variables

Functions

Object literals

Type aliases

NotifyActionTypes

NotifyActionTypes: INotifyShow | INotifyRemove | INotifyEdit | INotifyClear

Tagged union types (note the convenience functions that set levels are not here because they share an action type with IShowNotification)

NotifyCallback

NotifyCallback: (notification: NotifyOpts) => void

Type declaration

- (notification: NotifyOpts): void
- Parameters
  - notification: NotifyOpts
  Returns void

NotifyDismissable

NotifyDismissable: "button" | "both" | "none" | "click" | boolean

NotifyLevel

NotifyLevel: "success" | "warning" | "error" | "info"

NotifyPosition

NotifyPosition: "tl" | "tr" | "tc" | "bl" | "br" | "bc"

Variables

Const NotifyClearType

NotifyClearType: "@clearNotifications" = "@clearNotifications"

String literal type constant for clear notifications action "type" member

Const NotifyContext

NotifyContext: Context<null | INotifyContext> = React.createContext<INotifyContext | null>(null)

Notify context that caries state and a dispatch function for updating state.

Const NotifyEditType

NotifyEditType: "@editNotification" = "@editNotification"

String literal type constant for edit notification action "type" member

Const NotifyRemoveType

NotifyRemoveType: "@removeNotification" = "@removeNotification"

String literal type constant for hide notification action "type" member

Const NotifyShowType

NotifyShowType: "@showNotification" = "@showNotification"

String literal type used for show notification action "type"

Const defaultShadowOpacity

defaultShadowOpacity: "0.9" = "0.9"

Const defaultWidth

defaultWidth: 320 = 320

Let uidCounter

uidCounter: number = 0

REALLY lame unique id generation for notifications that don't provide a value for "uid"

internal

Functions

NotifyClear

NotifyClear(): INotifyClear

- Defined in src/model/actions.ts:61
Generate redux-compatible Action object that clear all notifications when dispatched

Returns INotifyClear

NotifyEdit

NotifyEdit(changes: Partial<NotifyOpts>): INotifyEdit

- Defined in src/model/actions.ts:77
Generate redux-compatible Action object that clear all notifications when dispatched

Parameters
- changes: Partial<NotifyOpts>
Returns INotifyEdit

NotifyError

NotifyError(payload: Partial<NotifyOpts>): INotifyShow

- Defined in src/model/actions.ts:95
Generate redux-compatible Action object shows a notification with the "error" styles applied when dispatched

Parameters
- payload: Partial<NotifyOpts>
Returns INotifyShow

NotifyInfo

NotifyInfo(payload: Partial<NotifyOpts>): INotifyShow

- Defined in src/model/actions.ts:109
Generate redux-compatible Action object shows a notification with the "info" styles applied when dispatched

Parameters
- payload: Partial<NotifyOpts>
Returns INotifyShow

NotifyPortal

NotifyPortal(props: NotifyPortalProps): Element

- Defined in src/components/portal.tsx:21
Parameters
- props: NotifyPortalProps
Returns Element

NotifyProvider

NotifyProvider(props: NotifyProviderProps): Element

- Defined in src/provider.tsx:16
React Context provider that enables use of useNotify hook by child components.

Parameters
- props: NotifyProviderProps
Returns Element

NotifyReducer

NotifyReducer(state?: NotifyState, action?: NotifyActionTypes): NotifyState

- Defined in src/model/reducer.ts:24
Parameters
- Default value state: NotifyState = getInitialNotifyState()
- Optional action: NotifyActionTypes
Returns NotifyState

NotifyRemove

NotifyRemove(uid: number): INotifyRemove

- Defined in src/model/actions.ts:45
Generate redux-compatible Action object that hides any notification with the given id when dispatched

Parameters
- uid: number
Returns INotifyRemove

NotifyShow

NotifyShow(payload: Partial<NotifyOpts>, level?: NotifyLevel): INotifyShow

- Defined in src/model/actions.ts:18
Show a notification with the given options and level

Parameters
- payload: Partial<NotifyOpts>
- Optional level: NotifyLevel
Returns INotifyShow

NotifySuccess

NotifySuccess(payload: Partial<NotifyOpts>): INotifyShow

- Defined in src/model/actions.ts:88
Generate redux-compatible Action object shows a notification with the "success" styles applied when dispatched

Parameters
- payload: Partial<NotifyOpts>
Returns INotifyShow

NotifyWarning

NotifyWarning(payload: Partial<NotifyOpts>): INotifyShow

- Defined in src/model/actions.ts:102
Generate redux-compatible Action object shows a notification with the "warning" styles applied when dispatched

Parameters
- payload: Partial<NotifyOpts>
Returns INotifyShow

_allowHTML

_allowHTML(input: any): { __html: any }

- Defined in src/components/item.tsx:386
Parameters
- input: any
Returns { __html: any }
- __html: any

exhaustiveCheck

exhaustiveCheck(_action: never): void

- Defined in src/helpers.ts:34
This exploits Typescript's control flow analysis to do exhaustive pattern matching on switch statements that have tagged union types being switched on.

This is useful for prevent access errors and ensuring all cases are considered when adding new features.

Parameters
- _action: never
Returns void

getInitialNotifyState

getInitialNotifyState(): NotifyState

- Defined in src/model/reducer.ts:20
This is used for DRY and testing.

internal

Returns NotifyState

invariant

invariant(expression: any, message: string): void

- Defined in src/helpers.ts:43
Throw an error if an expression is false

Parameters
- expression: any
  
  The expression to check for truthiness
- message: string
  
  The message to show as an error if the expression is not truthy
Returns void

shallowCompare

shallowCompare(obj1: any, obj2: any): boolean

- Defined in src/helpers.ts:50
Parameters
- obj1: any
- obj2: any
Returns boolean

useNotify

useNotify(): IUseNotify

- Defined in src/hooks/useNotify.tsx:15
Return the IUseNotify API for use in components

Returns IUseNotify

whichTransitionEvent

whichTransitionEvent(): string

- Defined in src/components/item.tsx:369
Returns string

Object literals

Const CONSTANTS

CONSTANTS: object

levels

levels: object

error

error: string = "error"

info

info: string = "info"

success

success: string = "success"

warning

warning: string = "warning"

notification

notification: object

action

action: undefined = undefined

autoDismiss

autoDismiss: number = 5

dismissible

dismissible: "both" = "both"

message

message: string = ""

position

position: "tr" = "tr"

title

title: string = ""

positions

positions: object

bc

bc: "bc" = "bc"

bl

bl: "bl" = "bl"

br

br: "br" = "br"

tc

tc: "tc" = "tc"

tl

tl: "tl" = "tl"

tr

tr: "tr" = "tr"

testing

testing: object

itemTestId

itemTestId: string = "notify-item"

portalTestId

portalTestId: string = "notify-portal"

containerTestId

containerTestId(position: NotifyPosition): string

- Defined in src/constants.ts:46
Parameters
- position: NotifyPosition
Returns string

itemId

itemId(id: number): string

- Defined in src/constants.ts:49
Parameters
- id: number
Returns string

Const STYLES

STYLES: object

Wrapper

Wrapper: {}

Type declaration

Action

Action: object

DefaultStyle

DefaultStyle: object

background

background: string = "#ffffff"

border

border: number = 0

borderRadius

borderRadius: string = "2px"

fontWeight

fontWeight: string = "bold"

margin

margin: string = "10px 0 0 0"

padding

padding: string = "6px 20px"

error

error: object

backgroundColor

backgroundColor: string = defaultColors.error.hex

color

color: string = "#ffffff"

info

info: object

backgroundColor

backgroundColor: string = defaultColors.info.hex

color

color: string = "#ffffff"

success

success: object

backgroundColor

backgroundColor: string = defaultColors.success.hex

color

color: string = "#ffffff"

warning

warning: object

backgroundColor

backgroundColor: string = defaultColors.warning.hex

color

color: string = "#ffffff"

ActionWrapper

ActionWrapper: object

DefaultStyle

DefaultStyle: object

margin

margin: number = 0

padding

padding: number = 0

Containers

Containers: object

DefaultStyle

DefaultStyle: object

MozBoxSizing

MozBoxSizing: string = "border-box"

WebkitBoxSizing

WebkitBoxSizing: string = "border-box"

boxSizing

boxSizing: string = "border-box"

fontFamily

fontFamily: string = "inherit"

height

height: string = "auto"

padding

padding: string = "0 10px 10px 10px"

position

position: string = "fixed"

width

width: number = defaultWidth

zIndex

zIndex: number = 9998

bc

bc: object

bottom

bottom: string = "0px"

left

left: string = "50%"

margin

margin: string = "0 auto"

marginLeft

marginLeft: number = -(defaultWidth / 2)

top

top: string = "auto"

bl

bl: object

bottom

bottom: string = "0px"

left

left: string = "0px"

right

right: string = "auto"

top

top: string = "auto"

br

br: object

bottom

bottom: string = "0px"

left

left: string = "auto"

right

right: string = "0px"

top

top: string = "auto"

tc

tc: object

bottom

bottom: string = "auto"

left

left: string = "50%"

margin

margin: string = "0 auto"

marginLeft

marginLeft: number = -(defaultWidth / 2)

top

top: string = "0px"

tl

tl: object

bottom

bottom: string = "auto"

left

left: string = "0px"

right

right: string = "auto"

top

top: string = "0px"

tr

tr: object

bottom

bottom: string = "auto"

left

left: string = "auto"

right

right: string = "0px"

top

top: string = "0px"

Dismiss

Dismiss: object

DefaultStyle

DefaultStyle: object

backgroundColor

backgroundColor: string = "#dededf"

borderRadius

borderRadius: string = "50%"

color

color: string = "#ffffff"

cursor

cursor: string = "pointer"

fontFamily

fontFamily: string = "Arial"

fontWeight

fontWeight: string = "bold"

height

height: string = "14px"

lineHeight

lineHeight: string = "15px"

position

position: string = "absolute"

right

right: string = "5px"

textAlign

textAlign: string = "center"

top

top: string = "4px"

width

width: string = "14px"

error

error: object

backgroundColor

backgroundColor: string = "#e4bebe"

color

color: string = "#f4e9e9"

info

info: object

backgroundColor

backgroundColor: string = "#a4becb"

color

color: string = "#e8f0f4"

success

success: object

backgroundColor

backgroundColor: string = "#b0ca92"

color

color: string = "#f0f5ea"

warning

warning: object

backgroundColor

backgroundColor: string = "#e1cfac"

color

color: string = "#f9f6f0"

MessageWrapper

MessageWrapper: object

DefaultStyle

DefaultStyle: object

margin

margin: number = 0

padding

padding: number = 0

NotificationItem

NotificationItem: object

DefaultStyle

DefaultStyle: object

MozBoxSizing

MozBoxSizing: string = "border-box"

WebkitBoxSizing

WebkitBoxSizing: string = "border-box"

WebkitTransform

WebkitTransform: string = "translate3d(0, 0, 0)"

borderRadius

borderRadius: string = "2px"

boxSizing

boxSizing: string = "border-box"

cursor

cursor: string = "pointer"

display

display: string = "block"

margin

margin: string = "10px 0 0"

opacity

opacity: number = 0

padding

padding: string = "10px"

position

position: string = "relative"

transform

transform: string = "translate3d(0, 0, 0)"

transition

transition: string = "0.3s ease-in-out"

width

width: string = "100%"

willChange

willChange: string = "transform, opacity"

isHidden

isHidden: object

opacity

opacity: number = 0

isVisible

isVisible: object

opacity

opacity: number = 1

error

error: object

MozBoxShadow

MozBoxShadow: string = '0 0 1px rgba(' + defaultColors.error.rgb + ',' + defaultShadowOpacity + ')'

WebkitBoxShadow

WebkitBoxShadow: string = '0 0 1px rgba(' + defaultColors.error.rgb + ',' + defaultShadowOpacity + ')'

backgroundColor

backgroundColor: string = "#f4e9e9"

borderTop

borderTop: string = '2px solid ' + defaultColors.error.hex

boxShadow

boxShadow: string = '0 0 1px rgba(' + defaultColors.error.rgb + ',' + defaultShadowOpacity + ')'

color

color: string = "#412f2f"

info

info: object

MozBoxShadow

MozBoxShadow: string = '0 0 1px rgba(' + defaultColors.info.rgb + ',' + defaultShadowOpacity + ')'

WebkitBoxShadow

WebkitBoxShadow: string = '0 0 1px rgba(' + defaultColors.info.rgb + ',' + defaultShadowOpacity + ')'

backgroundColor

backgroundColor: string = "#e8f0f4"

borderTop

borderTop: string = '2px solid ' + defaultColors.info.hex

boxShadow

boxShadow: string = '0 0 1px rgba(' + defaultColors.info.rgb + ',' + defaultShadowOpacity + ')'

color

color: string = "#41555d"

success

success: object

MozBoxShadow

MozBoxShadow: string = '0 0 1px rgba(' + defaultColors.success.rgb + ',' + defaultShadowOpacity + ')'

WebkitBoxShadow

WebkitBoxShadow: string = '0 0 1px rgba(' + defaultColors.success.rgb + ',' + defaultShadowOpacity + ')'

backgroundColor

backgroundColor: string = "#f0f5ea"

borderTop

borderTop: string = '2px solid ' + defaultColors.success.hex

boxShadow

boxShadow: string = '0 0 1px rgba(' + defaultColors.success.rgb + ',' + defaultShadowOpacity + ')'

color

color: string = "#4b583a"

warning

warning: object

MozBoxShadow

MozBoxShadow: string = '0 0 1px rgba(' + defaultColors.warning.rgb + ',' + defaultShadowOpacity + ')'

WebkitBoxShadow

WebkitBoxShadow: string = '0 0 1px rgba(' + defaultColors.warning.rgb + ',' + defaultShadowOpacity + ')'

backgroundColor

backgroundColor: string = "#f9f6f0"

borderTop

borderTop: string = '2px solid ' + defaultColors.warning.hex

boxShadow

boxShadow: string = '0 0 1px rgba(' + defaultColors.warning.rgb + ',' + defaultShadowOpacity + ')'

color

color: string = "#5a5343"

Title

Title: object

DefaultStyle

DefaultStyle: object

fontWeight

fontWeight: string = "bold"

margin

margin: string = "0 0 5px 0"

padding

padding: number = 0

error

error: object

color

color: string = defaultColors.error.hex

info

info: object

color

color: string = defaultColors.info.hex

success

success: object

color

color: string = defaultColors.success.hex

warning

warning: object

color

color: string = defaultColors.warning.hex

Const defaultColors

defaultColors: object

error

error: object

hex

hex: string = "#ec3d3d"

rgb

rgb: string = "236, 61, 61"

info

info: object

hex

hex: string = "#369cc7"

rgb

rgb: string = "54, 156, 199"

success

success: object

hex

hex: string = "#5ea400"

rgb

rgb: string = "94, 164, 0"

warning

warning: object

hex

hex: string = "#ebad1a"

rgb

rgb: string = "235, 173, 23"

Generated using TypeDoc

RNS Redux

Project Health

Usage

Credits

Index

Classes

Interfaces

Type aliases

Variables

Functions

Object literals

Type aliases

NotifyActionTypes

NotifyCallback

Type declaration

Parameters

notification: NotifyOpts

Returns void

NotifyDismissable

NotifyLevel

NotifyPosition

Variables

Const NotifyClearType

Const NotifyContext

Const NotifyEditType

Const NotifyRemoveType

Const NotifyShowType

Const defaultShadowOpacity

Const defaultWidth

Let uidCounter

Functions

NotifyClear

Returns INotifyClear

NotifyEdit

Parameters

changes: Partial<NotifyOpts>

Returns INotifyEdit

NotifyError

Parameters

payload: Partial<NotifyOpts>

Returns INotifyShow

NotifyInfo

Parameters

payload: Partial<NotifyOpts>

Returns INotifyShow

NotifyPortal

Parameters

props: NotifyPortalProps

Returns Element

NotifyProvider

Parameters

props: NotifyProviderProps

Returns Element

NotifyReducer

Parameters

Default value state: NotifyState = getInitialNotifyState()

Optional action: NotifyActionTypes

Returns NotifyState

NotifyRemove

Parameters

uid: number

Returns INotifyRemove

NotifyShow

Parameters

payload: Partial<NotifyOpts>

Optional level: NotifyLevel

Returns INotifyShow

NotifySuccess

Parameters

payload: Partial<NotifyOpts>

Returns INotifyShow

NotifyWarning

Parameters

payload: Partial<NotifyOpts>

Returns INotifyShow

_allowHTML

Parameters

input: any

Returns { __html: any }

__html: any