@ninetynine/react-notices
v1.4.0
Published
Simple react notices
Downloads
68
Readme
Contents
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 activeindex
: 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 queuedindex
: 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