react-alerts-lite
Synopsis
A minimal library for rendering alerts / toasts / popups / notifications in react apps.
Storybook
https://reactiness.github.io/react-alerts-lite/
Code Example
Importing AlertProvider
Import the AlertProvider and render before you need to use an Alert. You must only render the AlertProvider once.
import React, { Component } from "react";
import { AlertProvider } from "react-alerts-lite";
export class App extends Component {
render() {
return (
<div>
<AlertProvider/>
<Root/>
</div>
);
}
}Importing Alerts
Import Alerts where you need to display an alert.
import React from "react";
import { Alerts } from "react-alerts-lite";
export class Demo extends React.Component {
render() {
return (
<button onClick={() =>
Alerts.push({
type: "success",
position: "bottom-full",
transition: "fade"
})
}
>
Click me
</button>
)
}
}Importing CSS
import 'react-alerts-lite/dist/index.min.css';Installation
react-alerts-lite requires react and react-dom to run. It has a single dependency on react-transition-group.
$ npm install react-alerts-liteor
$ yarn add react-alerts-liteAPI Reference
AlertProvider
Themes:
<AlertProvider
theme="simple" | "rounded" | "shadowed" | "flat" | "bordered"
/>Custom transitions: Create your own
The transitions prop accepts an array of transitions with the :name and :transitions keys. Refer to react-transition-group documentation on creating transitions See bottom of page for simple template Note: maxHeight and duration are passed into transitions as props - use them where needed.
import ScaleSlideRight from "../path/to/my/react-transition-group-custom-transition";
import ScaleSlideRight from "../path/to/my/react-transition-group-custom-transition";
const customTransitions = [
{
name: "custom-transition_one",
transition: ScaleSlideRight
},
{
name: "custom-transition-two",
transition: ScaleSlideUp
}
];pass your transitions array into AlertProvider
<AlertProvider
transitions=[customTransitions]
/>reference your transition with the :name you provided.
<button onClick={() =>
Alerts.push({
transition: "custom-transition_one"
})
}
>
Click me
</button>DefaultProps:
you can pass default props into the AlertProvider to apply to all alerts. Props passed directly to an Alert take precedence so you can overwrite these where necessary.
<AlertProvider
defaultProps={
type: "error",
position: "bottom",
transition: "slide-up"
}
/>Now when you render an alert with no props defaultProps will take precedence over stock props.
<button onClick={
() => Alerts.push()
}
>
Click me
</button>Note: the alert created here would now have type "error", position: "bottom", and transition: "slide-up"
Alert
An alert accepts the following arguments
Alerts.push({
type: "basic" | "error" | "warning" | "info" | "error"
timeout: <int>
duration: <int>
position: "top-full" | "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right" | "bottom-full"
content: <your content to render>
closeButton: {true | false}
onClose: () => {alert("my alert has unmounted")}
maxHeight: <int>
transition: "none" | "slide-up" | "slide-down" | "slide-up-through" | "fade" | "slide-right" | "slide-left" | "rotate-left" | "rotate-right" | "scale" | "scale-slide-down" | "scale-slide-left" | "scale-slide-right" | "scale-slide-up"
})- type: Type of alert to add
- timeout: How long before your alert unmounts
- duration: How long the transition animation will take
- position: The screen position to render the alert
- content: This will be the content you want to render inside the alert
- closeButton: Whether to display the close button or not
- onClose: callback for when the alert unmounts
- maxHeight: Used in transitions to determine positioning of alerts in stack
- transition: The string key for the type of transition the alert will use
Custom Transitions Example
Example of a simple fade transition.
import Transition from "react-transition-group/Transition";
import React from "react";
export function Fade({ children, maxHeight, duration, in: inProp }) {
const defaultStyle = {
transition: `${duration}ms ease-in`,
transitionProperty: "opacity, max-height"
};
const transitionStyles = {
entering: {
opacity: 0,
maxHeight: "0px"
},
entered: {
opacity: 1,
maxHeight
},
exiting: {
opacity: 0,
maxHeight: "0px"
}
};
return (
<Transition
in={inProp}
timeout={{
enter: 0,
exit: duration
}}
>
{status => {
if (status === "exited") {
return null;
}
const currentStyles = transitionStyles[status];
return React.cloneElement(children, {
style: { ...defaultStyle, ...currentStyles }
});
}}
</Transition>
);
}
Contributors
I'll post issues and enhancements as i find them - feel free to contribute :)
License
MIT
Tech
- peer-dependencies: react, react-dom
- dependencies: react-transition-group