Contents

• Installation
• Basic Example
• Usage
  • Interaction
  • Customization
    • Provider
    • Notice
    • Styling

Installation

notices can be installed using NPM or Yarn.

# Installing with NPM
npm i --save @ninetynine/react-notices

# Installing with Yarn
yarn add @ninetynine/react-notices

Basic Example

notices makes implementing global react notices easy by using React context.

import { Provider, Consumer } from '@ninetynine/react-notices'


<Provider>
  <Consumer>
    {({ notice }) => {
      <button
        onClick={() => (
          notice({
            content: 'Hello, world'
          })
        )}
      >
        Click Me!
      </button>
    }}
  </Consumer>
</Provider>

Usage

Interaction

When using the Consumer the following attributes are returned from the Provider:

• isActive
• isQueued
• notice
• clear
• $active
• $queue

isActive

This function can be used to check if your notice is active or not. Simply pass a key generated from notice. It returns an object containing:

• bool: If the given key is active
• index: The index of the notice within the active list

isQueued

This function can be used to check if your notice is queued or not. Simply pass a key generated from notice. It returns an object containing:

• bool: If the given key is queued
• index: The index of the notice within the queue

notice

This function can be used to queue the notice ready for displaying. Pass the configuartion as an object for the notice. The object passed is spread across the defaultProps for Notice and a generated key if one is not given.

It returns the key of the newly queued notice.

clear

This function clears the queue and active list.

$active

This array contains the current active notices. This should only be used for reference and not changed directly.

$queue

This array contains the current queued notices. This should only be used for reference and not changed directly.

Customization

Provider

The Provider can be given two props:

• maxAlerts
• eventLoop
• position
• gutter

maxAlerts

This defines how many notices will be shown at once, by default this is 1.

eventLoop

This defines how often the Provider checks for queue updates, by default this is 500.

position

This defines where the notices will be displayed within the viewport, by default this is bottom right. Use the following options to change the position of the notices:

• top
• bottom
• left
• right
• top left
• top right
• bottom left
• bottom right

Each position has it's own animations. These can still be overriden by using the animations prop on a notice.

gutter

This defines how far the default animation moves during the opacity transition, by default this is 20.

Notice

The Notice can be given a number of props:

• closeable
• timeout
• animations
• theme
• onClose
• position
• gutter

closeable

This defines if the notice can be closed by the user, by default this is true. The class applied dynamically looks like: state-closeable.

timeout

This defines how long it takes until the notice closes, by default this is 2000 (ms). If a timeout of 0 is given then the notice will not be automatically removed.

animations

notices makes use of framer-motion to make the notices nicely enter and leave the view. Use the following attributes to change the animations:

• init
• visible
• hidden

By default the animations are set up to enter by fading up from the bottom right, and to leave by fading out to the right.

theme

The default styles has a number of themes, this allows the notice to be styled differently based on importance or context. The following themes are available:

• light
• info
• warning
• danger
• success

The class applied dynamically looks like: display-<theme>.

onClose

When using the Provider and Context this should not be used, as it will be ignored. But this is used for applying external logic once the hidden animation has completed.

position

While position on the Provider is used to position the notice container, this is used to change the animations of the notice. See Provider#position for available options.

gutter

See Provider#gutter.

Styling

Within this package there are basic default styles that can be imported using SCSS. Feel free to use your own styles by following the same naming conventions.

# Using SCSS
@import '@ninetynine/react-notices/dist/notice';

Within the SCSS file there are default variables that can be overwritten.

gutter

The gutter-* variables are used to define spacing and padding:

• gutter: 20px
• gutter-double: 40px
• gutter-half: 10px

border-radius

The border-radius variable is used to define the border radius on a notice, by default this is 3px.

notice-*-normal

The notice-*-normal variables are used to define the basic colors for the default theme:

• notice-background-normal: #000
• notice-color-normal: #fff

notice-*-light

The notice-*-light variables are used to define the basic colors for the light theme:

• notice-background-light: #fff
• notice-color-light: #000

notice-*-info

The notice-*-info variables are used to define the basic colors for the info theme:

• notice-background-info: #228be6
• notice-color-info: #000

notice-*-warning

The notice-*-warning variables are used to define the basic colors for the warning theme:

• notice-background-warning: #fd7e14
• notice-color-warning: #000

notice-*-danger

The notice-*-danger variables are used to define the basic colors for the danger theme:

• notice-background-danger: #f03e3e
• notice-color-danger: #000