alamenai / notify Goto Github PK

View Code? Open in Web Editor NEW

9.0 1.0 0.0 20.57 MB

Notification component for your next react project.

Home Page: https://www.npmjs.com/package/react-push-notify

HTML 4.43% CSS 1.07% JavaScript 94.50%

react-notifications notifications notification-component push-notifications react-push-notification

notify's Introduction

Notify

Notification component made easy for your react project

Notify is React-based component for displaying push notifications in the browser.

Notify is meant to be well designed, compatible, lightwhite, customizable and easy to use.

Download • Demo • Contribute

Quick Intro

When I started looking for well designed, compatible, lightwhite, customizable and easy to use push notification for my React applications that fits my needs and delight the users, I did not find a one that requires only one line of code. So, I decided to design and develop Notify for displaying out-of-the-box push notifications.

Features

Installation

To get started with Notify, you can simply install it via npm.

npm install @ala_eddine/react-push-notify

Basic Usage

To add Notify in your application, you need to import it from its package and define the required properties.

import Notify from "@ala_eddine/react-push-notify";

const Notification = () => {

const data = {
  title: "Notify updates",
  subtitle: "Stay tuned with Notify",
  message: "I want to hear your feedback."
};

const action = {
  name: "Star",
  event: () => alert("Thank you for your star")
};

const props = { data, action };

return (<Notify {...props} />);

Advanced Usage

You can customize your type and styles.

import Notify from "@ala_eddine/react-push-notify";

const Notification = () => {

const data = {
  title: "Notify updates",
  subtitle: "Stay tuned with Notify",
  message: "I want to hear your feedback."
};

const style = {
  rounded: true,
  animation: "bottom2up",
  duration: 1
}

const action = {
  name: "Star",
  event: () => alert("Thank you for your star")
};

const type = "success";

const props = { type, data, style, action };

return (<Notify {...props} />);

What about the Dark Mode?

Don't worry, the Dark Mode is included too. You need to add just darkmode property.

return (<Notify {...props} darkmode/>)

Media Usage

Now, you can include a Media (image, video) to your Notification.

<Notify {...props} darkmode>
	<Media src={MEDIA_PATH} link={LINK} />
</Notify>

API reference

Props	Type	Required	Dynamic	Default	Keys	Alternatives
type	string	-	yes	info	-	success \| error \| warning
data	object	yes	yes	-	title: string subtitle: string message: string	-
style	object	-	yes	rounded: false animation: "left2right" duration: 2	rounded: boolean animation: string duration: string	-
action	object	yes	yes	-	name: string event: function	-
autohide	boolean		yes	false	-	true

Changelog

Changelog.

Licence

MIT.

notify's People

Contributors

Stargazers

Watchers

notify's Issues

How to test useEffect with setInterval in React ?

The next release will contain a feature of autohiding.

To do this, I've added a prop called autohide:

<Notification {...notification} darkmode autohide >
         <Media src={MEDIA_PATH} link='https://www.github.com' />
     </Notification>

To control autohide, I've created a state in the Notification component :


import React from "react"
import PropTypes from "prop-types"
import { Wrapper } from "./Styled"
import Header from "./Header"
import Body from "./Body"
import Action from "./Action"
import Media from "./Media"
import WithProvider from "./withProvider"

const AVAILABLE_TYPES = [
    "info",
    "warning",
    "success",
    "error"];

const Notification = ({ type, data, style, action, darkmode, autohide, children }) => {

    const [visible, setVisible] = React.useState(true);

    React.useEffect(() => {
        if (autohide) {
            setInterval(() => setVisible(false), 5000);
        }
        return () => {
            clearInterval();
        }
    }, [autohide]);

    const defaultStyle = {
        color: "rgb(0,151,255)",
        rounded: false,
        animation: "left2right",
        duration: 2
    }

    const { title, subtitle, message } = data;
    const { animation, rounded, duration, color } = style || defaultStyle;
    const { name, event } = action;


    if (!AVAILABLE_TYPES.includes(type)) {
        throw new Error(type + ' is not included in notification types');
    }

    if (duration && !(typeof duration === "number") && !Number(duration)) {
        throw new Error("duration should be a number");
    }

    return (visible ? <Wrapper
        type={type}
        animation={animation}
        rounded={rounded}
        color={color}
        darkmode={darkmode}
        duration={duration}>
        <Header title={title} subtitle={subtitle} />
        <Body message={message} />
        {children}
        <Action name={name} onClick={event} />
    </Wrapper> : null)
};

Notification.propTypes = {
    type: PropTypes.string.isRequired,
    data: PropTypes.object.isRequired,
    style: PropTypes.object,
    action: PropTypes.object.isRequired,
    darkmode: PropTypes.bool
};

Notification.defaultProps = {
    type: "info"
};

export default WithProvider(Notification)
export { Notification, Media }

Until now everything is well but when it comes to unit test, I could not test the effect of useEffect in other words how to know that the component will be hidden after 5 seconds :

I tried this code but it does not work :


it('should hide the Notification after 5 seconds', () => {
        jest.advanceTimersByTime(10000);
        expect(setInterval).toHaveBeenCalledTimes(1);
        expect(wrapper.isEmptyRender()).toBe(true);
    });