renoti v1.3.0

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

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

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.