Godsenal/renoti

Simple noti for react

renoti

Simple noti for react

Demo

https://godsenal.github.io/renoti

Installation

renoti requires React 16.3 or later.

npm install --save renoti

Documentation

Basic

import React from 'react';
import { createNotifier, NotiPortal } from 'renoti';

const notifier = createNotifier();

class App extends React.Component {
  notify = () => {
    notifier.notify({
      message: 'hello!',
      timeout: 3000,
    });
  };
  render() {
    return (
      <div>
        <NotiPortal notifier={notifier} /> {/* Anywhere you want*/}
        <button onClick={this.notify}>Notify!</button>
      </div>
    );
  }
}

You can apply default options for noties. Timeout 0 will disable timeout close.

const notifier = createNotifier({
  timeout: 5000,
  closeOnClick: false,
  pauseOnHover: true,
  position: 'bottom-right',
});

Customize noti style with css in js.

notifier.notify({
  style: {
    backgroundColor: 'black',
  }
})

Or make custom renderer for noti. It will give you closeNoti function as callback.

notifier.notify({
  renderNoti: (closeNoti) => (
    <div>
      <button onClick={closeNoti}>X</button>
      hello!
    </div>
  )
})

You can add custom animation by className. If you set pop as animation option, it will look for pop_start and pop_end for start animation and end animation.

@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-1000px);
    opacity: 0;
  }
}
.slide_left_start {
  animation: slide-in-left 0.3s;
}
.slide_left_end {
  animation: slide-out-left 0.3s;
}

notifier.notify({
  animation: 'slide_left',
  type: 'success',
});

Api

NotiOptions

option	type	default
message	string	'hello!
timeout	number	3000
animation	'pop','rotate','flip','slide' or custom css class	'pop'
position	'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-right', 'bottom-center'	'top-left'
type	'default', 'success', 'error', 'warning'	'default'
closeOnClick	boolean	true
pauseOnHover	boolean	false
showCloseBtn	boolean	false
style	CSS style object	undefined
onClose	function	undefined
renderNoti	function	undefined

createNotifier(NotiOptions?)

You can make notifier with default noti options. This options will be applied to every noti as default.

const notifier = createNotifier({ message: 'default message', position: 'bottom-right' });

NotiPortal

props

props	description
notifier	notifier instance created by createNotifier
disablePortal?	set true to make noti doesn't fixed to body. It will have absolute position. default: false
width?	width of noti's container. default: 3000

notifier.notify(NotiOptions?)

create noti with NotiOptions. It will use createNotifier options as default.

notifier.close(notiId)

close noti with id.

notifier.closeAll()

close all noti.

notifier.changeTypeColor(type, color)

change type's ('default', 'success', 'error', 'warning') default color.