mui-nutella

Mui-Nutella

An awesome and delicious notification system

With nutella you can have awesome notification without wasting your time. its truly a delicious experience

Demo

Demo and notification builder

Install it

[e-mail]:~$ npm i mui-nutella

Import it

import Nutella from "mui-nutella";

Wrap it

function Wrapper() {
  return (
    <div>
      <Nutella.View />
    </div>
  );
}

Push it

const config = {};
const actions = [<Button>My Button!</Button>];
const notification = {};
const position = "top-left";

function pushMe() {
  Nutella.push("my-notification-key", [position, notification, actions, config]);
}

Dismiss it

function goAway() {
  Nutella.dismiss("my-notification-key");
}

Available Configuration

const notification = {
  name: "Android Notification",
  icon: <Whatshot />,
  date: "Nov 6",
  accent: "rgb(63, 81, 181)",
  title: "Awesome Notification",
  body: "this is an awesome notification !",
  rounded: false,
  variant: "oreo",
  expandable: true,
  onClick: (expanded, setExpandMode) => {
    setExpandMode(!expanded);
  },
};

<Nutella.View /> also takes a variant props which by default is fixed and also can be absolute relative to the parent

Libraries

Nutella uses react-mui-android-notification