Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexpermyakov/simple-react-notifications

Tiny React.js notification library (1kb gzip).
https://github.com/alexpermyakov/simple-react-notifications

Last synced: about 2 months ago
JSON representation

Tiny React.js notification library (1kb gzip).

Awesome Lists containing this project

README 

        
# Simple-React-Notifications



Tiny library (only 1kb gzip) that allows you to add notifications to your app.

We don't want to blow up our bundle size because of notifications, right?



## Demo



https://alexpermyakov.github.io/simple-react-notifications/



Despite the small size, it supports:



- [Rendering success and error default notifications](#rendering-success-and-error-default-notifications)

- [Rendering user defined component](#rendering-user-defined-component)

- [Positioning](#positioning)

- [Configuring all in one place](#configuring-all-in-one-place)

- [Animation](#animation)

- [Remove notification items programmatically](#remove-notification-items-programmatically)



## Installation



```

$ npm install simple-react-notifications

$ yarn add simple-react-notifications

```



## Usage



### Rendering success and error default notifications



Notifier has a few built-in components for displaying an error or a successfull operation:



```javascript

import React from "react";

import notifier from "simple-react-notifications";

import "simple-react-notifications/dist/index.css";



const App = () => (

  


     {

        notifier.success("Your items have been updated");

        // notifier.error("Something went wrong, try again.");

      }}

    >

      Lets render a default component

    

  


);

```



### Rendering user defined component



The real power comes with rendering our own component. In this case it's not even a notification, just a view with real data:



```javascript

const RouteInfo = ({ header, onClosePanel }) => (

  


    
{header}


    
Bicycle 2.4 km, 8 min.


    
Use caution - may involve errors or sections not suited for bicycling


    

      Use this route

    

  


);

```



It completely up to us the way we add styles. We can use styled-components or whatever we like. The notify() method will just render it:



```javascript

const App = () => (

  


    

        notifier({

          render: ({ id, onClose }) => (

            

          )

        })

      }

    >

      Notify with just a text message!

    

  


);

```



As you can see here, render() receives onClose callback, which we have to pass inside our component in order to close the notification when user click on the button.



### Positioning



By default, all items will be positioned in the top right corner. The following values are allowed: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.



```javascript

const App = () => (

  


     {

        // notifier({

        //   position: "top-left"

        // });



        notifier({

          single: true, // display only the latest item

          position: "top-center",

          render: ({ id, onClose }) => (

            

          )

        });

      }}

    >

      Show two of them in different places

    

  


);

```



### Configuring all in one place



Instead of specifing all params again and again for each item, we can put it in one place:



```javascript

notifier.configure({

  autoClose: 2000,

  position: "top-center",

  delay: 500,

  single: false,

  width: "480px"

});



const App = () => (

  


     {

        notifier.success("Your items have been updated");

      }}

    >

      Display an item with 500 ms delay. Now it is done in configure()

    

  


);

```



Params in notifier function will override their default values in configure().



### Animation



First, define the css-animation somewhere in your .css file:



```css

@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



@keyframes fadeOut {

  from {

    opacity: 1;

  }

  to {

    opacity: 0;

  }

}

```



Second, specify it during the notifier() call or in configure():



```javascript

notifier.configure({

  position: "top-center",

  animation: {

    in: "fadeIn", // try to comment it out

    out: "fadeOut",

    duration: 600 // overriding the default(300ms) value

  }

});



const App = () => (

  


     {

        notifier.success("Your items have been updated");

      }}

    >

      Show two of them in different places

    

  


);

```



You can specify only in or out params as well.



### Remove notification items programmatically



```javascript

import React from "react";

import notifier from "simple-react-notifications";



notifier.configure({

  render: ({ id, onClose }) => (

    

  )

});



class App extends React.Component {

  id = null;



  render() {

    return (

      


         (this.id = notifier())}>Notify

         notifier.dismiss(this.id)}>Dismiss

         notifier.dismiss()}>Dismiss all

      


    );

  }

}

```