Nobody Prefers Margarine

    react-push-notify

    0.2.0 • Public • Published

    React Push Notify

    I want to be your :heart: notification in your React application

    React Push Notify is React-based component for displaying push notifications in the browser. React Push Notify is meant to be well designed, compatible, lightwhite, customizable and easy to use.

    DownloadDemoChatContribute

    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 users, I did not find a one that requires only one line of code. So, I decided to design and develop React Push Notify for displaying out-of-the-box push notifications.

    Features


    • Creative design.

    • Lightwhite.

    • Customizable.

    • Easy to use.

    • Extensive.

    Request Feature →

    Installation


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

    npm install react-push-notify

    Discover on npm →

    Basic Usage


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

    import Notify from "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} />);
     

    Show me →

    Advanced Usage


    You can customize your type and styles.

    import Notify from "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/>)

    API reference


    Props Type Required Dynamic Default Keys Alternatives
    type string info success | error | warning
    data object title: string

    subtitle: string

    message: string

    style object rounded: false

    animation: "left2right"

    duration: 2

    rounded: boolean

    animation: string

    duration: string

    action object name: string

    event: function

    Next Release


    React Push Notify started simple and minimal, but it needs your feedback to add more features and fix current bugs.

    • Add customizable media ( image, video) feature.

    • Add customizable position feature.

    • Add customizable background color feature.

    Request feature →


    Thank you


    Install

    npm i react-push-notify

    DownloadsWeekly Downloads

    5

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    81.6 kB

    Total Files

    35

    Last publish

    Collaborators

    • ala_eddine