\n }\n}\n```\n\n## ButterToast Tray\n\nThe ButterToast Tray is simply the elements to which toasts get appended. Rendering `` creates a tray and appends it to the `body`.\n\n| Prop Name | `trayPosition`\n|-----------|-\n| Required | No\n| Type | `String`\n| Default | `bottom-right`\n| Description| where should the toasts stack up (or down) from.\n| Possible Values | `top-left`, `top-center`, `top-right`, `bottom-right`, `bottom-center`, `bottom-left`\n| Notes| Added as class names to the tray.\n\n\n| Prop Name | `toastMargin`\n|-----------|-\n| Required | No\n| Type | `Number`\n| Default | 5\n| Description| how much distance (in px) should toasts take from each other\n\n\n| Prop Name | `renderInContext`\n|-----------|-\n| Required | No\n| Type | `Boolean`\n| Default | `bottom-right`\n| Description| By default the tray is rendered as a direct descendant of the body element. renderInContext allows the tray to be rendered as a direct descendant of the element in which you declare it, giving you the ability to easily position it relative to that element.\n\n\n| Prop Name | `name`\n|-----------|-\n| Required | No\n| Type | `String`\n| Default | `''`\n| Description| allows simple namespacing. A way to make toasts appear in a specific tray. Irrelevant if you only have one active tray. Also, it adds a css class of the same name, which makes styling easier.\n| Notes| Added as a class name to the tray.\n\n\n| Prop Name | `pauseOnHover`\n|-----------|-\n| Required | No\n| Type | `Boolean`\n| Default | `false`\n| Description| Changes the default behavior when hovering. By default, when hovering over a toast, even though it doesn't dismiss - it will keep counting down to its dismissal, meaning that if its timeout ended, it will dismiss on mouse-out. Setting `pauseOnHover` to true, will pause the countdown for as long as the toast is being hovered - meaning that the timeout cannot end while hovering.\n\n\n| Prop Name | `theme`\n|-----------|-\n| Required | No\n| Type | `String`\n| Default | `''`\n| Description| Adds a theme class name to the tray, so you can style it and its content the way you want.\n| Notes| When adding a theme, the class name added to the tray will be prefixed with `bt-theme-`, so, if your theme is: `lady-bug`, the class added to the tray will be: `bt-theme-lady-bug`.\n\n\n\n\n## Raising a toast:\nTo trigger a new toast notification, you need to call the static method `raise` that's on the ButterToast object.\n\n```js\nButterToast.raise({\n content: ,\n onClick: (e) => console.log(e),\n sticky: true,\n dismissOnClick: true,\n name: 'someCoolName',\n});\n```\n\n`ButterToast.raise` accepts an options object with the following options:\n\n\n| Prop Name | `content`\n|-----------|-\n| Required | Yes\n| Type | React component or a function returning a react component.\n| Description| The actual content of a specific toast.\n| Notes | If passed as a function, the following params are being passed to it: toastId (`number`) and dismiss (`function`) call this function to dismiss the toast. So basically:\n```js\ncontent: ({toastId, dismiss}) => (\n \n);\n```\n\n| Prop Name | `onClick`\n|-----------|-\n| Required | No\n| Type | `Function`\n| Description| Adds an onClick handler to the toast. Clicking anywhere on the toast (except any child with a `btn-dismiss` class) will perform the action and dismiss the toast.\n\n\n| Prop Name | `dismissOnClick`\n|-----------|-\n| Required | No\n| Type | `Boolean`\n| Default | `false`\n| Description| If true, attaches a click event listener on the whole toast. clicking the toast will dismiss it.\n\n\n| Prop Name | `sticky`\n|-----------|-\n| Required | No\n| Type | `Boolean`\n| Default | `false`\n| Description| If true, the toast will not go away, unless `dismiss` is triggered.\n\n\n| Prop Name | `name`\n|-----------|-\n| Required | No\n| Type | `String`\n| Default | `''`\n| Description| Allows showing a toast in a specific tray (or trays). Provides simple namespacing. If none is provide, the toast will appear in all trays.\n\n\n| Prop Name | `toastTimeout`\n|-----------|-\n| Required | No\n| Type | `Number`\n| Default | `3000`\n| Description| How many ms should the toast appear for if not manually dismissed\n\n\n\n\n# Universal / Server side rendered apps\nButterToast uses webpack's `style-loader` which injects CSS into JS module and depends on `window` object - thus server-side rendering would raise an error.\nTo bypass that you can consume the universal build, which outputs the style to CSS file instead JS:\n```\nimport ButterToast from 'butter-toast/dist/universal/index.js';\nimport 'butter-toast/dist/universal/style.css';\n```\n\n# Using the built in styles AKA CinnamonSugar\nBy default, ButterToast toasts appear style-less and make no assumption on the intended look and feel. To allow easy ButterToast integration, it also comes bundelet with `CinnamonSugar`, which you can sprinkle over your toast and make it look awesome.\n\nCinnamon sugar is a companion style-pack for Butter-Toast. While Butter Toast provides a smooth toast stacking interface, Cinnamon-sugar is intended to be used as a styling library, fully compatible with Butter-Toast.\n\n## Usage\nTo use Cinnamon-Sugar you need to import it alongside Butter-Toast, and add your custom config whenever you want to show a toast.\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { CinnamonSugar } from 'butter-toast';\n\nclass ShowOff extends Component {\n\n handleClick() {\n // in this example, I am using a `fresh` toast\n // since it has all the possible options\n const toast = CinnamonSugar.fresh({\n theme: 'lite',\n image: 'http://lorempixel.com/150/150/people',\n title: 'Amazing!', // you can also add jsx code here!\n message: 'Just showing off here...', // you can also add jsx code here!\n icon: 'bath' // literally any font awesome 4.7 icon\n // you may also add here regular butter-toast options, such as toastTimeout,\n // name, sticky, etc..\n });\n\n ButterToast.raise(toast)\n }\n\n render() {\n \n Click me to pop a toast\n \n \n }\n}\n\nexport default ShowOff;\n```\n\n## What did I just see?\nSo basically, the `ButterToast.raise` function accepts a toast-object with all the data required for emitting it. Cinnamon-Sugar is an object which contains functions that return ready to use toast objects.\n\nSince cinnamonSugar builds a valid toast-object, you may pass it any butter-toast configuration you would normally pass to the raise function, and it would be added to the toast object. Your cinnamonSugar call may look like this:\n\n```js\nconst toast = CinnamonSugar.slim({\n theme: 'dark',\n message: 'Just showing off here...',\n toastTimeout: 6000, // normal butter-toast option\n dismissOnClick: true // normal butter-toast option\n};\n```\n\nThere are four kinds of toasts, `crisp`, `crunch`, `fresh` and `slim`. Each has its own possible options, and its own themes:\n\n## Kinds\nThere are currently four different kinds of styles:\n\n### Crisp\nBright, clean looking toast notification, featuring an icon on the left (optional) and a close button on the right. Appears with a satisfying animation, and has hover effects both for the close button and for the whole tost itself.\n\n\n#### Options\n|Name|Description\n|-|-\n| message | Optional | Either a string or jsx/react component\n| title | Either a string or jsx/react component\n| icon | Any of font-awesome 4.7 icon names\n| noClose | Any of font-awesome 4.7 icon names\n| theme | Any of the supported themes\n\n #### supported themes\nThe following themes are supported by default. Choosing one will paint the icon accordingly.\n* success (green)\n* error (red)\n* info (blue)\n* danger (orange)\n* golden\n* dark\n* default // no need to specify. light grey\n\n\n### Crunch\nPlain, colored toast notifications. With an icon on the left, and an optional close button on the top right. The icon appears with a sliding animation.\n\n\n#### Options\n|Name|Description\n|-|-\n| message | Optional | Either a string or jsx/react component\n| title | Either a string or jsx/react component\n| icon | Any of font-awesome 4.7 icon names\n| noClose | Any of font-awesome 4.7 icon names\n| theme | Any of the supported themes\n\n #### supported themes\nThe following themes are supported by default. Others may be added using custom CSS.\n* grey\n* red\n* blue\n* purple\n* orange\n* green\n\n\n### Fresh\nToast notifications that allow adding an image, an icon and a close button. Good especially for social media or live notification for messages.\n\n\n\n#### Options\n|Name|Description\n|-|-\n| message | Optional | Either a string or jsx/react component\n| title | Either a string or jsx/react component\n| icon | Any of font-awesome 4.7 icon names\n| image | image url\n| noClose | Any of font-awesome 4.7 icon names\n| theme | Any of the supported themes\n\n#### supported themes\nThe following themes are supported by default. Others may be added using custom CSS.\n* lite\n* dark\n\n\n### Slim\n Thin, simple toast notifications. Goot for status updates, and action confirmations.\n\n\n\n\n#### Options\n|Name|Description\n|-|-\n| message | Either a string or jsx/react component\n| theme | Any of the supported themes\n\n #### supported themes\nThe following themes are supported by default. Others may be added using custom CSS.\n* lite\n* dark\n\n\n## Underwater\nButter-toast underwater logic specifications that users should be aware of:\n\n* **onMouseEnter**:\nDefaulf behaviour: When hovering mouse above toast the timeout timer is not stopped, though toast will not be dismissed as long as mouse hovers the toast.\nIf `pauseOnHover` prop is set to true, toast timeout _is_ paused.\n* **onMouseLeave**:\nDefault behaviour: After the mouse leaves toast area, the toast respect the timer and gets dismissed after its timeout. If the timeout was reached before mouse left toast area the toast is dismissed instantly.\nIf `pauseOnHover` prop is set to true, toast timeout timer _continues_ where it left off and times out normally.\n","readmeFilename":"README.md","gitHead":"cff2adb4e99300389b8340a1bc29a18ef6bb49fd","_id":"butter-toast@2.1.2-rc.1","_npmVersion":"5.7.1","_nodeVersion":"6.9.5","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-8R9S5L8t8+mqE/FYSHBGd0P7KeavVaybk9ommP6bCMzFkHLDbuTHBCe+hXiw4leYEYHEO2/s/yPN3ar8OmqkOA==","shasum":"2e8d028c7c1c11806a11e9506b1a9683b46953c5","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-2.1.2-rc.1.tgz","fileCount":15,"unpackedSize":1192007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa0z4TCRA9TVsSAnZWagAAMAAP/3HlptBYupjLoLSYm6/6\n73t8ikdP/SU40mZQoa+bx+blr3K4zZ3mJK3wHTJT5mKtNhYyfQrNjjXw84WD\nCYuBf8pvwcPc+zyAMJjMcmbbMkAs9jtFUVuUr+gxBW7FS37s2ifX/VsKzk4L\nhncrOdqJwWk7fD+haLxR0Us5R6km6iIkDsCW+STlERHksJh7hI5EHgObW8fE\n00kHCG37rJiTHXzvEn6S/9D74jVC5CUO7ICFmq2uJUGTqhi4F9p7qYMDX489\nmz0y1UFM8JtY8fOiqyKjxJzM91ACaM/LkGJlBlkRpsOLCc2+c+IRI0QHimyx\nqzCkDcpp94PR2gjipIZOHWN2Ble8P10bBvQ98bVEHVyX5th/9qhYix4Il1nz\n5OENcJX/KwJXbSr9UGRP1GFxOguubG+M68MhD1qQflUfrQ/RkHkgFi3PKUw8\n0vru4Gn7LznAsLoPS34f5IHo6wL5IRjAPAeP2k/0bfkPnLHduWUfw092J7c1\n3u2QZpWmXih1klYwH8UQZYJqFvkq9d4yXKVWdct6Mq2xws/lBziFaxijbRyy\nApqfcxzEzoTBVMUiMcUnprJnaip32wE8nX9xAlAaeLW42lR/7fSL1Vl4dinV\n/bMMRofJXI0KU5FPVojUoVmFqnCfVkK4dGRDLXE/Oe3ibWFuCUnG2RvDQmlq\nKmWJ\r\n=u2w+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKjlwOqXRwwMY5ijf0APXXpwf70jNmIJ1++UwuA36kDAIhAOuU1jxnt1pI6kNH22c2ny6UUHQpekw5Xqf0OD93nxmD"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_2.1.2-rc.1_1523793425975_0.3111031286868553"},"_hasShrinkwrap":false},"2.1.2":{"name":"butter-toast","version":"2.1.2","description":"Smooth react toast notifications","main":"./dist/butter-toast.js","scripts":{"prepublish":"npm run build","storybook":"start-storybook -p 9003","build-storybook":"build-storybook","build":"NODE_ENV=production webpack --config webpack.config.prod.js","build:universal":"NODE_ENV=production webpack --config webpack.config.universal.js","build:base":"NODE_ENV=production WEBPACK_ENV=base webpack --config webpack.config.universal.js","build:all":"npm run build && npm run build:universal && npm run build:base","build:watch":"NODE_ENV=production webpack --config webpack.config.prod.js --watch","build:watch:universal":"NODE_ENV=production webpack --config webpack.config.universal.js --watch","eslint":"eslint -c .eslintrc './src/**/*.js'; exit 0","test":"jest","test:watch":"jest --watch"},"jest":{"setupFiles":["./test/jestSetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"]},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"Evyatar Alush"},"license":"MIT","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","linear-debounce":"1.1.1"},"devDependencies":{"@storybook/react":"3.3.11","@storybook/addon-actions":"3.3.11","babel-cli":"^6.24.1","babel-jest":"^22.0.4","babel-loader":"^7.1.2","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cinnamon-sugar":"^1.0.0","css-loader":"^0.28.7","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.0","eslint":"4.17.0","eslint-plugin-react":"^7.5.1","extract-text-webpack-plugin":"^3.0.2","jest":"^22.0.4","node-sass":"^4.7.2","prop-types":"^15.6.0","react":"16.2.0","react-dom":"16.2.0","react-test-renderer":"^16.2.0","sass-loader":"^7.0.0","style-loader":"^0.20.0","uglifyjs-webpack-plugin":"^1.1.5","webpack":"^3.10.0"},"gitHead":"b951a15668be8f8083b534b62971c066b168f4b8","_id":"butter-toast@2.1.2","_npmVersion":"5.7.1","_nodeVersion":"6.9.5","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-Ge4bzWm7WZttoSgLUSigU5FteyK2HYQdmuYSnNLD9DGIIMbCPV+V98ekKhwHpv2c14abrKpMsCczxSMroRWhOA==","shasum":"4582daecfe1d99db19d6709c339f2f1fba1cba58","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-2.1.2.tgz","fileCount":15,"unpackedSize":1192002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa00IPCRA9TVsSAnZWagAAAbEP/2R+z7tv38End6PvJaJ1\nJ2JZ6v0nJ+4Ba4LjJersJ5kcZg1ojtVnOugoaGdhjy7RQNq2QTjZW3/hJC3E\nxxYSbuTw+UQcOGoAvWr6Tdydzk2OZxnccvSy8UJ3zXuXeqJuRUcqZrL4ePh3\nvJ12c7M4rOoth0mLjW9GdChaQg2ijh5koI83a6jOv61CEA5oVm+3Kze1Yu23\nctEtTxx23icjWn6+1Oer8agnjvcPQO3U0ZF9Uvtei3lYawvE7INHu0J1dOWv\nMtZlT18k6j0n22slG9/ulTwPvGIc4kaDGcxCFQr57M4goysTeaMRAaYsbTVp\nRNxcgAzvhcZ/6FHWfvA0WRBkbu64vuSMFuxSlqmlolciBK6B1q39W2dsBSI0\nltw4tYPiWYtOgVH/XdAdZC/hgPfn1wUiCRYkYUa55pNiyN1d0/6UTfminfiz\nVm7qAnDGKbfQ/TvsCIULL5ZGVerZpcgc0mv9rz9B68Wz2fzvrL9RltEcMEJG\nzjLhs0KiuGPlCjSR5BgK/KCtOvDjjGyYMN8j3uNCFmz5JZncvxnJE8YmYjvg\nIiX5VdSeyZKstAPK+02qliYnFbNzzCIS5xQ/YNv+rb2zq7rKZBgLSgIrwKit\nroUbLt4l3E/99juujT5qXh87T4wZjKrk0vn0z1G/9Xd28zSpznCBUzKNkj7K\nXyn7\r\n=u6pR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBUExwK4iNAhKgkqnGqBakLp+tnuYA6sxttn6u9bIpYgIhAKjIDRPtOcbL3zeWCAtGvnjzD01UX8Y9x6lrfayimNGd"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_2.1.2_1523794445475_0.6118898272037021"},"_hasShrinkwrap":false},"2.1.3":{"name":"butter-toast","version":"2.1.3","description":"Smooth react toast notifications","main":"./dist/butter-toast.js","scripts":{"prepublish":"npm run build","storybook":"start-storybook -p 9003","build-storybook":"build-storybook","build":"NODE_ENV=production webpack --config webpack.config.prod.js","build:universal":"NODE_ENV=production webpack --config webpack.config.universal.js","build:base":"NODE_ENV=production WEBPACK_ENV=base webpack --config webpack.config.universal.js","build:all":"npm run build && npm run build:universal && npm run build:base","build:watch":"NODE_ENV=production webpack --config webpack.config.prod.js --watch","build:watch:universal":"NODE_ENV=production webpack --config webpack.config.universal.js --watch","eslint":"eslint -c .eslintrc './src/**/*.js'; exit 0","test":"jest","test:watch":"jest --watch"},"jest":{"setupFiles":["./test/jestSetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"]},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"Evyatar Alush"},"license":"MIT","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","linear-debounce":"1.1.1"},"devDependencies":{"@storybook/react":"3.3.11","@storybook/addon-actions":"3.3.11","babel-cli":"^6.24.1","babel-jest":"^22.0.4","babel-loader":"^7.1.2","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cinnamon-sugar":"^1.0.0","css-loader":"^0.28.7","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.0","eslint":"4.17.0","eslint-plugin-react":"^7.5.1","extract-text-webpack-plugin":"^3.0.2","jest":"^22.0.4","node-sass":"^4.7.2","prop-types":"^15.6.0","react":"16.2.0","react-dom":"16.2.0","react-test-renderer":"^16.2.0","sass-loader":"^7.0.0","style-loader":"^0.20.0","uglifyjs-webpack-plugin":"^1.1.5","webpack":"^3.10.0"},"gitHead":"20b92968954ddb966610e6d734920c988f503409","_id":"butter-toast@2.1.3","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-OUMjS7f0vtNBUYnzR6eo0K5LTF1q7f6xNzbkszoPHHf7SQgNjUriFBN26cqOQPB+QLmQ2TTG0MJ8UuLSha/6nw==","shasum":"3c63218b49f0f401f44b3aef260172ffb81611cc","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-2.1.3.tgz","fileCount":15,"unpackedSize":1192190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhB3SCRA9TVsSAnZWagAA1FEP/3GpNdztPXJcgD/PBbD6\nE/UeqzaryDZBJZ6VFaBkAin1ugdt2TzlprDcnHRwXy+XlDmZzRlO7RZvBfak\nuXKZYAVfiCoNNkeInPubP7hNZnV3lSbzTt74nQG8Lea3RB85QstCNnaVnavw\nLyoQ+zBXS5ePQQJEhuFWKH04gksgJpVg0mBOS1iLwVB+IJY+2AEvzVY7iPYx\na7ikIFKDrVFXRP10y0t2kpT7Hs6udtnsUulJapPRgulroNovdhvshzlBmiyc\n0Jq+xf5KbBT334tMrY4NihqJQV0AkZL3GrxAt4Fs7iJ30DDHiOGRJhD3AOs3\nM2D56mcxXmvXeXLcMiTYYxLWuIZBdqwErcE0Reeq18Qx978PFhVAk9WFKJQz\nq/f5Aqe0i5uGvm9o1PDSWJqbwz5DOVLudhwrz23/Oaozj0Xmb5GPhoFcFeVj\nT2l6/MVpwYKOgtzNFo8UfbOtAFbpavBaE7dMQIh6U9QWZ6WkVV5C5bKF2dX1\nNhV2fquv9VF1ePfVJI7jEz/pOZ1H58OaS8MIRMIuF9czhW8r77akI8uNqXmU\noQROI9tDEbY/+wNuMJ6/fdKwfEZaGPd4d9LLAAgdLkhcHaoUYfISvHfWc1cS\n3s1olfoY4gv+XAhi0RF2AHw5oWWKp+0nI+my6EnVuMZyYTAlwiCobyxp5wGh\nFpzr\r\n=Fz1B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGeHqQ9hvb4bIQP3ZPN7xYIw+9zMdaEx1FGU66UmykeMAiEAzSaFipmIKUtpCDLeD1hTU4t+eXpzhXWWes3zrYid93M="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_2.1.3_1535385041771_0.5853976040317073"},"_hasShrinkwrap":false},"2.1.5":{"name":"butter-toast","version":"2.1.5","description":"Smooth react toast notifications","main":"./dist/butter-toast.js","scripts":{"prepublish":"npm run build","storybook":"start-storybook -p 9003","build-storybook":"build-storybook","build":"NODE_ENV=production webpack --config webpack.config.prod.js","build:universal":"NODE_ENV=production webpack --config webpack.config.universal.js","build:base":"NODE_ENV=production WEBPACK_ENV=base webpack --config webpack.config.universal.js","build:all":"npm run build && npm run build:universal && npm run build:base","build:watch":"NODE_ENV=production webpack --config webpack.config.prod.js --watch","build:watch:universal":"NODE_ENV=production webpack --config webpack.config.universal.js --watch","eslint":"eslint -c .eslintrc './src/**/*.js'; exit 0","test":"jest","test:watch":"jest --watch"},"jest":{"setupFiles":["./test/jestSetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"]},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"Evyatar Alush"},"license":"MIT","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","linear-debounce":"1.1.1"},"devDependencies":{"@storybook/react":"3.3.11","@storybook/addon-actions":"3.3.11","babel-cli":"^6.24.1","babel-jest":"^22.0.4","babel-loader":"^7.1.2","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cinnamon-sugar":"^1.0.0","css-loader":"^0.28.7","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.0","eslint":"4.17.0","eslint-plugin-react":"^7.5.1","extract-text-webpack-plugin":"^3.0.2","jest":"^22.0.4","node-sass":"^4.7.2","prop-types":"^15.6.0","react":"16.2.0","react-dom":"16.2.0","react-test-renderer":"^16.2.0","sass-loader":"^7.0.0","style-loader":"^0.20.0","uglifyjs-webpack-plugin":"^1.1.5","webpack":"^3.10.0"},"gitHead":"40b2f8a1a77a457c70c6e8fcd7fc6dfd7228e072","_id":"butter-toast@2.1.5","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-I2iD2TUOqvTlxl2omyXQb9ekwLBWZUE4mHn6Ui7PUPVgAGcFARP2gr7Nw6eqo/WJc89Q0dhHz77sAuR34tSBig==","shasum":"17aa28f272a615411ceefc639a3d24485fcc1215","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-2.1.5.tgz","fileCount":15,"unpackedSize":1193093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh6NOCRA9TVsSAnZWagAAk6kP/R9dIrgYVflbIhowSutL\nRJYoby0FIG9zaoHoYkmL6Qrf1JAG/xL33ZfRyNCLmV+aLgUeYD/mq/tJqkwF\np3FD/mCp5RUqVUT/8HMNPjQL4jV7kfJ4ActkNqt0mAMFgxUv8Qw3CCDvFrU5\nL32r/VNBhulnkP7xG/AlwzSWKOUlnMHIV4Jc7e72FLz2oT0WD8FuTQbpoGg/\n7uhyEgQDOZE4ee4x+RXxUWjBlYNg+peQ3kCoruEMcJCxV8WmG+XCriiwSiiP\n9+EU1jT/D9WRjrwvDVQaUxGMr+o+o1sGaORFfuvwqvvtSKgQbJYCeILYrzij\ndeURv8NdRogGpnQeNx97ojS1zP6ituD9cNhjMKW0rojSMqd56YnVSrWx+rza\njjByr66Vc6vNjiu8ybeUeNhxVh7N2bjpOfVUDrrfg3/rpFMT3VnOJ6kESGa6\nfqOddNXSIOriBYCs64aVagV260XRntGhZMN/DoKWuhisMuCHLHqtOey/1BVT\nlie2c5N+r7szDBQK/syQvrS/EeIPEdHDCAWNTeByeklwbxPbk1Twn63f739n\nAzhyYeyKAaYaDuh3EOaHOs1rVp8phzTgcIuUXwI9PUtC6w9ah+7fwxptZESW\nHuDvBDgQwO/22nPTJQdmVRJBXqwxteAPcC2guPsqHx25JGmDwhMyOAAcrTwz\nsxaY\r\n=C0vx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAOeb2wp21VQTfOiOS31ch6tMG8t/cizgrkEBRwfE6hrAiEA7RbD8k6GGuTQTi+v8XqDZ+3fkNZG6/B5J/waPc7vtyE="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_2.1.5_1535615821795_0.8753031552559762"},"_hasShrinkwrap":false},"3.0.0-rc.1":{"name":"butter-toast","version":"3.0.0-rc.1","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"polished":"^1.9.3","styled-components":"^3.3.3"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop.\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"c79557dc239f7f139c01d8e87d7620c140fb7ad9","_id":"butter-toast@3.0.0-rc.1","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-YkWdfjdFk1hZAPfR62SM3mVzbK4auUns3nzt8e/bO7z8n8Xc39bIUnyE/32lEZ8kAmTB+3t/9oxD05P6H+RUIw==","shasum":"cf10c5600037e85294dddc7e4be548d0d7351aa2","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.1.tgz","fileCount":44,"unpackedSize":5672793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh6eDCRA9TVsSAnZWagAAmJkQAKFf2Ouig34WwtkKIB2e\nEOFGMMRJ04Djwk1BAa8kmAzhCI3w6PXk+nFKJ/b5TRl1cMRBO25+iNU70tS1\nlNSwNrDn21FSUsa2WsLnDLsQmEAL3efc6kAVZzeP8m1muVH9F2LzraC8wpWO\nQgZ+jqHlb98O5G1+2g7CqEWGSXfo/Ar0kn0emykfgjO10xXT2MsO7KKGK+hR\nvBLbwucEMI2yblXLtGNJ1sA8vMmzsT+IzMAB/IrCcL3Z9JactHOTHR0MGxjZ\nefMXsNGVubNT68JND6yCQrCXS9BoVUquMzyrVbKL4ili8Oqdk+V4sXwGZdsA\nm6yvT8NjL4rq/xmlYGswr1d6xR0X0H8pkPJ6ItWJJE0aG8NeP9Aqy0xA88ip\nCrbhudWM9zm1jHMO6VxC6uzY/uWSPgp+xn1wutcPzipalmWsuIMhL7YsczXb\n4LT5Urzr/85jMroDoLaR8b4sNs+EXuAjqXf+qeAMlD8F4Sox5H4bKg02IowU\n2upkTo5r5zrBUsUL2s91YFrtmRjnDRsptSZxRHkE1AIPJHeq57XAgJ8i8qNk\n9LFHAc7srIdM1x4XMpTeuR+MdMmKIjqjvAKgHK2B6X67pfQlvO5rMXmQ0Atq\ncYgkzxycmYThFjo1CQoIgHRTFPxAoi7aWYFYAx3/7QOoSz92SXQ7vjJ8Ui4G\nOemM\r\n=l+7I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfnOKZz2+VGobEITPwwFIMSpDCe0Kzenta7HdnwwdsWAiBJst+txpYTYn6xOo9MTdaXdMer5dwIRb9QIrNU3TDrNQ=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.1_1535616898996_0.2981232707688133"},"_hasShrinkwrap":false},"3.0.0-rc.2":{"name":"butter-toast","version":"3.0.0-rc.2","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"polished":"^1.9.3","styled-components":"^3.3.3"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop.\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"c79557dc239f7f139c01d8e87d7620c140fb7ad9","_id":"butter-toast@3.0.0-rc.2","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-pl9tPEyCFAQOI6Yg9pknWbGfMkUp8U3Stm93CCOEQLb23/bh3+zPnqAfeVAC6pkB+47E8Rt01hyRXMDYNT62kA==","shasum":"3f08af3a34ed56a02b7cb0687183b7dcac1a89b0","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.2.tgz","fileCount":44,"unpackedSize":5677482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh63LCRA9TVsSAnZWagAAVloQAIPpAC1sPM8RGc9978Rp\nRj5VjLktOmO99cLTfXb8Pv1LdGchtGMLcywMC9VMAcYWvUQiCZg5cqOVy19N\ndSex8iQxBTzQalc3Rqw6MPTgPVQVSEyu9ehm0jd6xyIfBy6PKUAdk3Jplneq\nNDJrU1dGO63vdmtW9hLy4SpwwJtVm4Onma0YFwajjU7tJhw3sIFpQ8BdD7y9\nJ5AIb6KeQYecwp1XvcfWOpiTASWCnsd+Fw4nQTigS8LdcOcPbK8OMjt3OEMj\nNdmtlVis6mClv51uBADT3GhF4w9lIgs6hSjzjWGRmM+Ji4iOtO3InLAWWd12\ncUN8R8LEA2vQjpATjQye4b4xtpmAfVV4C3lFfE+sQqU1zUCxbs17gj0JddO1\ntkACRl625+IMldRiXNQtLJ0xni/9tilIO9IljS6nbvRwq9NEwCznEI7ajgze\nvVe+E61e6ZlT+0rvFURIS9MIV82hkeQdtu3sHGBgrfq84IrLPE0vaitWgv8w\n5NsGzLbo2t+Wd3KGWuWmE1A+QoZkE+HiGJCvXt3mJ8n/13NcVnv8lU7wutlL\n/xxMFQJ2M+tjICl4kUcum9grE9zY/iksxgHY6flqY+iuca0dI+NUa5hbuYSA\nObF3t+o+WxqjgaReuoXg9ZRZwEwfxwxfNeXJr7OqMxHzwOKfJIY4tH8hWarM\nG50l\r\n=P3bc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEkoh82WafomTMbEY8Xcme/d+TsWTXjxixQju48UgDPWAiEAkI8ciHsP3RuMXa1+Ejyr2HsJCcwO9zi7CnOBo7c0LM8="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.2_1535618506422_0.17024988948459852"},"_hasShrinkwrap":false},"3.0.0-rc.3":{"name":"butter-toast","version":"3.0.0-rc.3","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"polished":"^1.9.3","styled-components":"^3.3.3"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop.\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"66026075c3f7d9f38ff048d448aca2cabbae4dac","_id":"butter-toast@3.0.0-rc.3","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-+z+1gjQ0VezZYOkWeYEEfwuFpVn1aZzouRzoCJ8jnSt5fFV7nnHJIbkwET25PTWmgIO2dXpvUfQHWE05GK3VAA==","shasum":"0cbf9e77014b67579f64dd6ce2b015062a6b4b29","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.3.tgz","fileCount":44,"unpackedSize":5677841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh7EOCRA9TVsSAnZWagAA+kIP/jHqdFHAN0LFsdhLZF3g\nTMg9Fw+eyiQl5usRU69AXWqviNtYIEbE+3q8uTFUtrbSLhG9OlX79ecwsN3W\nk+2b04urpeTbeSGyE+5QJCv4lc/cGO6i0cxRFkaqJ5Il141JfqXZC+0ZceoV\n2kYPo0EBKi5ky4bMpuqWC1aj2xF4kCVyJ7gojzWfLRywIq+9B1MQmXXugZPL\nTcvpqc4nAG7ZHtXoCmmmm3JxvRu5eDSSfxMqamNPhvnHLYV6P/KINnKJNnc+\nSxZ1iXTLeKsNIiZD7MuBkQ3pIhMS9+bQZfrLL9u5Dq7T2LVgbNJvj43/itI2\nBrY/yjp2YFOx0KbpshCoVT8CaMYaxr8OitHyOdbHN7mfQU7x74RXy+XnmrMR\nKHg7cRW7iehyNiPmsoFQINBW0KmH6Z+ZRGN0W6s+JIz0R8SJJWnAnvkNjg7h\nwOy8Berk8OPGWRklvIDdVBVXOxitc/Kltg728SiRfhp8g2laaexL77KJk2Gh\nhkAN6NdBijVhq7wQneypD2RfbdmHW/uRcxQt/WhQiaVF7NQlL0pe2krna7XP\nUW9wEVv2gO/ivTgJIe/p5hJO7wGA7a62bnquY9Zn6TM/Er39fi+NzdvR85RU\nvOFYTDV/DCTctgrZubKKHAGg8k9pOrTdje5aqxtVk5zaBUPEFM19/EqI5kVs\nTVNw\r\n=4Mbv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsqFRuCGc2ES0O6/j2j/urMlhVZoCzfwaixzTGPqu+HAiADLXdCwz46Nv7rou4jCIS7TzQgZbyeVxCZoP5TDvsq3w=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.3_1535619341913_0.8832063721038379"},"_hasShrinkwrap":false},"3.0.0-rc.4":{"name":"butter-toast","version":"3.0.0-rc.4","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"polished":"^1.9.3","styled-components":"^3.3.3"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop.\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"66026075c3f7d9f38ff048d448aca2cabbae4dac","_id":"butter-toast@3.0.0-rc.4","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-ONWNqwE3hSdL4nF8Bm5wuRfQ7FJjmABdnw5Br53jjXliduaI4F5lyFpvBaoSNFfS8Tx/+KeCOdI7hhKrD3jHyg==","shasum":"e3bc788e256a9c3f4815499a9cf29711da4f0043","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.4.tgz","fileCount":44,"unpackedSize":5677841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh7H6CRA9TVsSAnZWagAAE4sQAIDllrsWeDsJkIE6BeDN\nslTQlxPOChDKQzX1tpWsvVb5p9sNE96D2uZvvxo5ylZxGPzd/51O61ccRNy3\nhKelcx3fNbIbM/VaXBZcafLgh2WkVCgEH2w1Tqb+SPG/lMpC0DS/NJ+jvOeW\nvawW/MZvX3ZF9Yzp5J8FYvWaihh9xPLldRMBxB8HzzrdeTMkluuCUorx8g0p\nfEv09ICpnTzEa4yvW2rakpakpXTYfLM8V+a5VUouc/Xj75c4cUQrzp95FbwY\nRDNMddc42wBBXJ2QZ6LaVEhOYikI2ipstNUu+ApkkphA/yaC25F5eN/XHSdl\nC+NKV0Sqh+vqzP1BjvOvaY1/d9EItPcmppcNO/CwQnFYl8foWj4Vw/cPRCuU\nXsHDeNRqRpsenzYNWcS2NsDWzXYw+BNeMD0pEh4x6v7FXOaTYf8728s+jiRv\nj3HZ8ZLagMsfGmP04kCNTg/V2AoRXYUb+DjSEBOs51O3IMbfqC4HEv1Ic26t\ndY+gQWoYwGRuXZ63X5W3Dr6WP6IOLE/oeZHfNMQRAaAT2WBb8o8L+GuHv2pP\nA0kvshsrBg4nPI7q4jqXe0Hf0nY36e4Q/IjNRFlkVRJu2VR6A6blmAGGAmrw\nDfzN29Ey5P+z5plMJr43BLDpbjjOSNoY7i9FUvKw2aAV+/zRPQYGxPcpmXs8\nLV92\r\n=+3KS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCi3NOVWZNXvMHVcmpufKmXyw8RmCBxWEVJd+MqRwHDGwIhANBydpwKyXL6mEV+dHZAd03tBR+kjN2jLFYLIhkImsHX"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.4_1535619577727_0.3585727134542698"},"_hasShrinkwrap":false},"3.0.0-rc.5":{"name":"butter-toast","version":"3.0.0-rc.5","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"polished":"^1.9.3","styled-components":"^3.3.3"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop.\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"66026075c3f7d9f38ff048d448aca2cabbae4dac","_id":"butter-toast@3.0.0-rc.5","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-GB02V+1S/n7eNLd74g7OZXyqNVTE1+Q/FwVN469iLtKdlZTBOYTqYFe5G0PyHbGwrzsg+C2tMTIJ38+zzHiX8A==","shasum":"9bcf31a6f2984a19fd01ad4403911249aa5df138","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.5.tgz","fileCount":44,"unpackedSize":5677990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh7MYCRA9TVsSAnZWagAAGtkP/jGKJOPVBVn7A5tJk5Ij\n87fekiOtOzoHszMfs0Wsp5uXRm3fuhPsDe7zmAeacWVcOlUJsUhNnLe4Bsie\nbLk8QI8cSP1S6VVb1S/XfH7yD+EM/aDzcOZ5FXOVdy9xBLf1x/FcSh3PaBgD\nN6gfes/nVWvJrztAayIbbr9Prk4xcJjPEI+01nDUZHx+Z0O+Dc+DUa1Fjqq9\nBP5JS3BDzo/dtvyUR4mt1gYYJrKwsV4o6J+ZUZk5UJw+bxneZ1KUm4jiwFf+\nhYibaH7yYdvBLogU7fCvxdEUh6jC5eA5fgzhcZQtxzhUfKW+3agcAfTR4DVd\nxwzh/U8vMKl4LYpw8sJFYNZ/Fq20jfLfiPT3XY0LOrKIhG0+MgIujVX9ja6+\nj88aMZ3IEKzpdLFEoiZFJjzZRULJRYuzE1ii1iSQLjukuloB5SWcyd+WBUwy\n5V4how6rV5wt4XNTJOqje9lxxAav3FCxZj+/kDmorvDrzbW8W6NmOkBVkdkh\nvN3WbJC9GPuEsctpcawKMX5pUGysBXSEAXvAqPRrYzVg08q9+RDwej5pDwql\neTWlKgfWq9KUjm5SNz8XGjLlYP2sacLw05aXJ4oqT0aV5Awcp9/nXOFFg1MV\n+2WsI3zZ+YWz+nUfVDsjyBroq1HAs8N5rUarQkpvxRCyXOiiOKqhGap8Juam\ndL4R\r\n=DX+Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhCxXdN7bweJOjHOycLAowtqP2075Gb7nbAVxZme6vBAiEAwUU3kpX15+kfcRkdNeTn90ogsQGYSf80FH1ZTJFLMiw="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.5_1535619863909_0.9833577801957591"},"_hasShrinkwrap":false},"3.0.0-rc.6":{"name":"butter-toast","version":"3.0.0-rc.6","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"polished":"^1.9.3","styled-components":"^3.3.3"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop.\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"66026075c3f7d9f38ff048d448aca2cabbae4dac","_id":"butter-toast@3.0.0-rc.6","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-N4FQ7JoOq3GlwZunqx8y645Hi7SK6sloR52DFXGdXGaVD8sppmYiNOfNo0JMNqifdvA1gX2BdfNFN4Yxn6sTWQ==","shasum":"397d95c10d17792db1afd723d5379ac903da2f2f","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.6.tgz","fileCount":44,"unpackedSize":5679383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh8z9CRA9TVsSAnZWagAAz78P/1wRQr3wMScbmcAc3sv5\ncOmSQcgX7bdM2uJQFWsWbwPj2suQtXZtBPNtZVJy2Mwrj+lB2LzxJjX757N3\nbhh6aGBmMa4TcQ0CqvTvXj/ZfUa1MUDnPRSzIqAaRnAIGMV/EbDgqWjuWBs2\nPVTl1gtz4EUkqnEXi8PqYwHRhBZdNusz8PWKDi+IwQhrnynNQxOgN8GuWTfO\nJQyQCOBcG0sCtut/USbQLHtXgVZ1wp6yhevhU0PfJXT3gtnzDpens3YR5O41\n2fGwFASGCvTI7bXbSq3SncDjqZzHEK/Z30Ghsb19GDRy1+0QwTis3PxMVaEw\nmZAUxxadhlhQXjYVfw2YhQGUUBwTAh5Asm9y9l29ZVehHGMWwrSWRZGw9waj\nIafshrA2366VlZIoIU3cuZ7kGMIrQ0K2LzlPCuneUolPyVlsqT/l+jAjPnTg\nQxr1TN89H+3ypndk0i47EYYZxMrb2RPzXRDLl2AMSuEPEACwh7BttiB71wXg\nzDT+4A/h7UAEU8q/4PtmvktUgfR9asNms64edxgw61WloOHiJFY/O6/Gd4eb\n9q+ZmmBQP96y4QkBUptjFznufVjqfbhwlBP7u2Sb0al+XpbXUVZ129qh7hOH\nWFyLHXrR9aqtujT52LJnMeC4OjPv3upeiNj+/nviwuXlrdg3Km9+p1q/1YeK\n7tYz\r\n=AvA7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4BXBkUUnHViO7Tl7+RInSFRRPfQIPaDLJDEQX9oF1QgIhAJ+B+ZKgLmabYRAKf8mtj6ySSYiezCukBTyTFyr08mnY"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.6_1535626492776_0.33919905319584065"},"_hasShrinkwrap":false},"3.0.0-rc.7":{"name":"butter-toast","version":"3.0.0-rc.7","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"polished":"^1.9.3","styled-components":"^3.3.3"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop.\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"35675ed1ca7c4ca93966bc23b8f5580ce884dc7e","_id":"butter-toast@3.0.0-rc.7","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-ob7HqvU3bnX6QMIdT9ATNaQqzqqoN9jU1eJpbl9jFPEvmIvb1b0b1gz6y2/K+TDZFMasA8vRtfSEowNEuh0S/Q==","shasum":"f7c6926a4f9e504b50594fe6ed73367e2b52e867","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.7.tgz","fileCount":44,"unpackedSize":5680115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh9nOCRA9TVsSAnZWagAAj7MP/29hO8sAcitRQ/1QPaiN\nN+7L8Ia55NJQhTmnpdlekxxCN0Ww81JiWRIpRZ4v1qUDJf7MMYGbJh94mZEx\ng2uZFgVafA8/ykSR3XoQRVBSqQ1jx0pCZuHnrm29xhlHfVsvVAVlKbJhWwag\nhu/bYVY5GIswnGrdiExRSG262c/V0IjWBlG2kE5U01d/1ISBT6OeZhKB5Ftc\nrJQy/p6ybab36LDlatSBy5m5sDVLGW5D23lqFrg7Zurhcck9WAJMikIrg3lc\nK4vr15xq2ubd6S2MVrgrlfdivqrz+5R8ojhe4kywGQUcu4yyJOA8ESKtK1HR\nC6HqhC1cP4wmmadmrNzTw0rNdt24lM2juzlhWVE3vYynnHSxm/oU4A8wN8Ik\nq6LaZPAFpzYcvJ2vgGgz8NSN1NdeboT3Le8uQ5JbBXC6is1WpxE+w5/qQB2q\nbluMIJb2bUPyhBHJkTV00ykl1iBFW6h8DIxFuSIqV05UGTJaa9q3eLgw3J81\npjYv9WHg3jkdqwHxuoMLAaUGtxP5LCvnnGsH6TUn30yXW7Hq7W9mCbECPJC3\nTQ8DfgRN/aguSLV+59J/0P8W1mQ9dCehe/QaQ3HuyAxg3IDQVHcZk6RQizV9\n4ychKSrxD6CzxZdBhiQ7ituTgjC8TJ3eHHIkU4oE/gfoHtyzkpP/MBiaFsPo\n3EQ9\r\n=J6WG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHE2LACW0GG53Lc8AfqHImaLJQFho1RFg1Nc7hohBcfGAiEA3bHdEdAXt5uoagpLpI8BOZ3dzA+wUhpo9HEZIgfhRdU="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.7_1535629773149_0.6749558929738615"},"_hasShrinkwrap":false},"3.0.0-rc.8":{"name":"butter-toast","version":"3.0.0-rc.8","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0","babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/plugin-transform-runtime":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Understanding renderInContext](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"74eef764326f64f7f14666b89becde6c70c30c9c","_id":"butter-toast@3.0.0-rc.8","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-l8UAIaKouxwgRXsvJhjvWaRG7FkYkVO6U0Dp5ei6xmQ8DUCFmG1EEGYKXIOvy5AgzmPue6HuCIat8nHyocsiBg==","shasum":"59641803c952a65d5d49b511ad454d1997d0d9b7","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.8.tgz","fileCount":44,"unpackedSize":6105865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiFXzCRA9TVsSAnZWagAArTkP/RvmxEkJgaik5ACrxLTB\nxIRkPuwAKCT/U6MgH3Z9kJggizgp8zsnEk0bTD6QBEmBsqCqdW5wmZIvbXVa\nBFmQy/MxUvo4HZRChRBxmKACJ/1uMJ5MbTWlnf3qcu3al90tPLLHMVc2/Ttr\nYdZNs2NZDqYT6eZ6kfDpvStmWfl7ywVMDW3OguJ+GIaA7LtfVYMtcybryuOM\n2ajNwdAWOvSkqkTuVzqLzRtNurLkWFEyGVCL9zWKDWwtXXBGl9cpC7zxckBR\nOZlzH9IeEec5SdmvAccjO2Vk1vbRFcjNpzNPK65kzA5T3DzOPGGPVVaIIhmM\nkAaPNUorg0WqZP55z2bidZ9JqF6sFolrBvN/yYNuXjt0VOYMFFZfJYj/mQdt\nK4l0g7llJd9C9ptvdt8/ewrdZ/KNOwwLNY2ConcqO/sQF0A0AIMcYMEwozfw\nitiZ3PpJ7i5GNiURS/dkt6lN4daiT8lJaY3HzXqLEn+NFimY0X645G3dw84B\nESJpjgcVLMzDtHUptOfLwEZ5qJhZ30R4+fjAVcmqMKWhDkvs0ScUu+dllyxC\nPENP8QUyYziF/2Eth9LW97x2C+7+Bb/hFJypzpB7GIL9xLyBDOI+VvOgZzCT\nhXXt4UFERJ+cbOiYgntKlfCqnEKzyYN1ERxy/CRNMcNu+FgbTQlkO7Kr7CYG\nvTQ7\r\n=SQiI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsjT08NKPx3leRofDAlIOYY8VBpyl957kLeGjiQSyi5AIhAKTMjH60a6AD+B6HqvjdJFMwH1BZxbaHFGwdw2P4fUi/"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.8_1535661554499_0.7665901049445756"},"_hasShrinkwrap":false},"3.0.0-rc.9":{"name":"butter-toast","version":"3.0.0-rc.9","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0","babel-plugin-transform-object-assign":"^6.22.0","babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/plugin-transform-runtime":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Understanding renderInContext](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"74eef764326f64f7f14666b89becde6c70c30c9c","_id":"butter-toast@3.0.0-rc.9","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-U+HVPnSYm6KTQJV4iNKkS/NA7D5dhOjs0g6vNPw+ZL7eqB4f18BGe6msM9oPOK/pGEwRKjihINDJsfYMxbR0ww==","shasum":"06330e8d19deb90c1252c77370891c903f73c185","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.9.tgz","fileCount":44,"unpackedSize":6105351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiFdQCRA9TVsSAnZWagAA7B8P/RIlkoKycf//ymuB9hW1\n4vsFBeqSOLogU3dUWTKewtQ55bJVaWFy/95v+Gfi/2N9fgmsrxk2+7LXNIQb\n4F3yvnVgszVQAjNdov4RgeTfnl3WsSRnlfKnYw56wgF5pxIXC03/A1qNeVds\n4LMsCl+4DzOyApGfVZ7k1E+N5mkULCEtNDnVxWrTafzCJ5eS8yCz21BN8F7n\ntrYP37+syEsdgmCY2E2bmiscv0DXWunkU5IMo6ZURdtOYFJdT3jicYfcXq7r\nLBDolOMdjQwDrzOLHUPafvMZtUesO/H2tYaQLrabJoj39AehYm/3hQJ1TTsN\nn7g6b7/0C5haJTR9tmTkxuTAAW3V/5zb22PTX6DCTwYZdrBDKR9P8KwjrBP1\nfiBWNVMLtspXjIzirLpeZU7gkzS0RUNjlKWONDKzccLPLcRGcADIrG7/ioXx\nC9CR2ATVWmzPt0z/e6tDwflRdCaGdryPUljBPlB0hq1ORIZObkHbD+lux3gF\n5XHzbJdjB7vyu89Ao8HDTMJbIv3Fk0aN420zvDCBOT76bPBrFVhzOPu58ZxH\nMPM//V5A4tt+wwvpuNqmdDpCTIf+pyI88K2OknJsY27+vNcU81+CATuPMLBQ\nzCmjldS4v6M5obI+aknX7k92JxiG2e4/6IPYFw3moE0h63Kkc+6W2StLUQq7\nUIEU\r\n=vohp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeIayDkPeSvhEi+W/9Ubp7NQvmujiHMi+s3Z+omBkwngIhAMG3DNcu5FtbQrfSpLmqrInT1oAc10duEZAAg/rvI5yh"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.9_1535661903386_0.5994421841821058"},"_hasShrinkwrap":false},"3.0.0-rc.10":{"name":"butter-toast","version":"3.0.0-rc.10","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Understanding renderInContext](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"74eef764326f64f7f14666b89becde6c70c30c9c","_id":"butter-toast@3.0.0-rc.10","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-6UwVMt53c/456MHJRRlQp92G9GFFRNBKY/V6BGXKgFcLIgYzRA+VH3eNe92l8w0Qa4Qd/p0jFfrevslNV1t2dw==","shasum":"01a6a0f732aaabeda7bfe789ffdc0f98d2cc9778","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.10.tgz","fileCount":44,"unpackedSize":6108393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiFt2CRA9TVsSAnZWagAA5ocQAImwZi4oALNbYQ5xQDoM\ngyNFOY2IGT2sIYB3CdOwXjsKLtZmh6iLtupSxecA7sFQsk5CVgicDOE25FjY\nw5U6qPTZ0ljPJb0v44x+SwvK3AGH1TzAyo0Kk1cZNRMBgUr/S3fO1eE4+hit\n19SFM98nVFAotUBgsFPOb368GgVMh6ZmKmYUH40nR0ny1b8UA4hGeJHjhT1D\nPeO0mJMpfuAI5Dwv7XyCoKfAn25lVgxlkcbweffat6RZ/sYVzWkV80PfijMm\nbzCo4AcUzNSm4bzvZrNxYjOSDiBLhuwWHzpGUc2ALLk76k42jXyrBFbJU9Bq\nJWoe0rC5r4Yzc81hh6oZRfufrZpZ9r9QqaefHMg2qLXwWmhSiqD5namDmmTf\nfy0OwmSOVEdGjNTVai19PfAm8J1wNmoDWqJJR3ZZqXoMynBqBGiAP1qbBQsb\nybD55gfSg9qIjuEQ7LRij1End9q03jdoVFJYE92MyOOSN/JPk6cwwkw6369F\nfcxk/rUY30CZ7lya0dVFnvj0Z4nTMsm+RwGn7Dn5kENp6KgXtcj19CMv8wgo\nriSQwfOjL1h6VULs+l9LVjaQHOzQxLDHB6YdGEYuYFc5vOL0BCoQmPkwkKiq\nvfwdfjcEmtnnP8VM7rv1TmBcmxhnFMx0xlFMOT3EJUsD2xmwIJ7KqyavpMGn\nHwE+\r\n=VRVi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJBZ8VQ3c5OKnqDAzqqAh3mnnbuQl39L/SNkHGNiRYigIhALFrrbmZ+wuahIhWoamjNcaRPId18Jbs2LN0IvDRRSM2"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.10_1535662966151_0.4221926510626013"},"_hasShrinkwrap":false},"3.0.0-rc.12":{"name":"butter-toast","version":"3.0.0-rc.12","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Understanding renderInContext](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/butter-toast-lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"83500f30d3170edceceb229a956dda5ac7967539","_id":"butter-toast@3.0.0-rc.12","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-KOSXAFWOGE8p/Tcg4wIqw4ic2e5YTKOOYcUcbHExbjot/1glciA8yKAo8eAZk2caJUzdEv92paVbTX2/ZXST9A==","shasum":"ebbbed4117e9ee8366d589da7960f12098e6c743","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.12.tgz","fileCount":40,"unpackedSize":5151022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiZYNCRA9TVsSAnZWagAAL+kP/0i0Y7YUhMqv4EZKWzF2\nCeJmYFO/YKW9clIvFUAXkHvCvbh11o4VAgliTCz8l1Zw33EfXgLGDxajErAF\nwkEMYu2jk+Oq7cNtd3BdWdRlTst6lVssYAVD3IdiOWCn3EWCR71qFGdGcUa9\nIHf+PtTINO7HxLFb8gy94+NgY6Q9O0mn+h+rCGq2y0xHcuGtoZ0h0GR1vhmL\n6Gu3LVWgbZoi9abPBrWDhLrSwhUWIfB+YdNol31Ibp8KB1jviU3F8BVI8q37\n3Zi0PoScOiJr7CwBWbS2phyLcTczGztPZWgqBhtYdWnwoX7oaVVsXSowVtQB\nQLU/3XO1qInm/83diAHhNb+5ASzpNqPMwkUlHkBJICM2CtLUwIRVRvVZ+rJm\nr9JizjcBDZKv87XfiVmeFU5mQjUKLTPHMVDl+kPhl70v/zX0GigYe12mHJHb\nmBpnzXUXglqNGLdAEpeuoDPCeCzwXSMN6dijUOjS3fg3HFV/aZnMIi/F8TNV\nrQCa1UrWdrCpYXswKGNC7nXMdciB0CDOA8YM2TG141Fxrl1u9ZAXx5NDaovx\nEGHdiu5be8FMBXc04A75F4ecVjnOkFVmN5GlIuwyTI76TmEPnckxZwqeyPHF\nrZ8La2xRH7f3yUbRXbGD+VKyHRGl0pZIRXPXod6+JDfg8PrtrmsK5kIwF+lP\nvdEl\r\n=55GI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2oRQel0c9GJZpyO3st+O5TCnVRPO/++9RLHAPl3qclAiEAoEA9qmWaZ7p2ACBwtUw/wHyOLCkEYWnuafD8MBBer9A="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.12_1535743500682_0.7164886810480671"},"_hasShrinkwrap":false},"3.0.0-rc.13":{"name":"butter-toast","version":"3.0.0-rc.13","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","css-loader":"^1.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","file-loader":"^1.1.11","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","node-sass":"^4.9.2","prop-types":"^15.6.2","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","sass-loader":"^7.0.3","style-loader":"^0.21.0","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"#  Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Understanding renderInContext](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a better api and more stability.\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"83500f30d3170edceceb229a956dda5ac7967539","_id":"butter-toast@3.0.0-rc.13","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-bY2bMm+E1F8ZOFIVQ3xsx/SB/Ny0G3DKBHISaM/SFiame8bxTDHzjg1HjiADVqy5RJcMtx8fcVRLbRIQYBj2CQ==","shasum":"248123b8e97da97513c6c962a10cca0cda024456","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.13.tgz","fileCount":40,"unpackedSize":5150970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiZckCRA9TVsSAnZWagAA1fIP/1jcRothNQx5Tw252FJs\n5uDHJLLkNZNe/Bul7OdIoaMLdXgsJUWmFHCYojIVZ6uUKlzf/RBW6i/spGGg\nRL5SFslba3EVfGKsGx5fhPSFGe9etPo3yohGz6vS5nPoihzO1jCEuBahNmr2\nop+21AuCEE3+yTjCUZ0Ke6l/EkDGbBNZyA/854G6J87t4x5sW6BFp+/A0CUA\nkmWTpU8Z3UzdkH/0x7/XWwN3JGvLYU1w423M3C+qKKIy+0y52GmSCSB0UqqW\nobGg0ZVKMPKa/T/hIZCwUyKrYlUdnOsAMgQxVRtLIEoEYi6hbEEfphOwcbGJ\nyvxqWgdFDNnIRdH4JZIkvpLyvGb4yv4IEsBZ9NO2raTBaxpLqjijNir3K8o4\nxPVHlgLznjNijx/UoJhkh3AOgnBBa5GcsE7eO17EPkMoG2vypJvDugSg410N\n2deCP60nHyA0aYH1SMxC0IA0p74xbq5z6z+4oCP8lSZgSvI2b9vLWnB1XJHa\nCt0M6pBL2Zl3GjMGAlkGRmtrcT6HCcnnvgA8Q1zBzV9DdhC5zac/n3YlqDVe\n3ono8LK+bgB1yDdMIHUIV/hakFe4xWR0txXOXAeZitojis3sjvHyNPImm2d2\ndlmm0BVv5H3H4w08IJ4MBJ+p9U9BsaAcVwT4bNwzpiStqX7AqztTfoWQa5o7\njETe\r\n=chJt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIFTGPeuAmA+NFTSfLUejRZ4sZDG/OHdVyy9LCAQwznAIgMhj5Zyyk1PrYmcQznaALHO99Mn0pIPtPvwEPppfcut4="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.13_1535743779810_0.02117397439494595"},"_hasShrinkwrap":false},"3.0.0-rc.14":{"name":"butter-toast","version":"3.0.0-rc.14","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen\n* **Dismiss**: The action of removing a toast from the screen\n\n# Content\n* [Feature list](https://github.com/ealush/butter-toast/tree/v2#feaatures)\n* [How to install](https://github.com/ealush/butter-toast/tree/v2#installation)\n * [Controlling the bundle size](https://github.com/ealush/butter-toast/tree/v2#controlling-the-bundle-size)\n* [How to use](https://github.com/ealush/butter-toast/tree/v2#usage)\n * [Creating a tray](https://github.com/ealush/butter-toast/tree/v2#creating-a-notification-tray)\n * [ButterToast Props](https://github.com/ealush/butter-toast/tree/v2#buttertoast-props)\n * [Understanding renderInContext](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext)\n * [Positioning the tray on the screen](https://github.com/ealush/butter-toast/tree/v2#positioning-the-tray)\n * [Emitting a toast](https://github.com/ealush/butter-toast/tree/v2#raising-emitting-a-toast)\n * [Raise params](https://github.com/ealush/butter-toast/tree/v2#raise-params)\n * [Toast props](https://github.com/ealush/butter-toast/tree/v2#toasts-content-props)\n * [Custom dismiss and onClick](https://github.com/ealush/butter-toast/tree/v2#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](https://github.com/ealush/butter-toast/tree/v2#accessing-raise)\n * [Dismissing a toast](https://github.com/ealush/butter-toast/tree/v2#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](https://github.com/ealush/butter-toast/tree/v2#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](https://github.com/ealush/butter-toast/tree/v2#crisp)\n * [Crunch](https://github.com/ealush/butter-toast/tree/v2#crunch)\n * [Slim](https://github.com/ealush/butter-toast/tree/v2#slim)\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability. \n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](https://github.com/ealush/butter-toast/tree/v2#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | '' | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | '' | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | '' | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"871af0babd23a3b37280e66f401cc07762eba21a","_id":"butter-toast@3.0.0-rc.14","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-wE0euJsSM1ClSpZh7rxwJ4BK3ycLpPZh53u6IFtsF8n5IhlTe90jgmofHOayrH+72xyubiYToy8nRmrpy1kkzw==","shasum":"1b7b71deb55c5c1f14626392df7f26689366f655","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.14.tgz","fileCount":42,"unpackedSize":5283937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbit7WCRA9TVsSAnZWagAAxFcP/iEcRNJJZoZZt1sKr3tn\n+mOF6fMPba27w6E5HJHfWlgjnj5oyGSOYS7RAgXjQxLvXcjAVsW3OGGh5EaI\nvhZ1XBY/fwqcsPxztlsuYTeYcLfWEnNZhezAi0hZQpDi8qoiaGRQ5DJD1ikZ\nN3CJXQqKymz/KKDh4xNrEL6kg01r/EGQclp8Kzz5gGeaN05pVeIvkpVYwc7d\nrG2I8WFJVi9P60cXngwPnFLIq4DRzS/VYjNkomPRVpOJBQ1dQtIlU3L1kjZF\n5Nl3GnxarBL4UH0iaIIxAU1GINVZ2I4arWeijlMSq+16VX2+yhUCJWqzA/ad\ntvWY2FiPzuNov6H+Dp7yuHAkDa5H14LN4v0jARhQoQuninFz80koySL4E/o0\n2SpSj/T2w55IBf1g1FmYsneK1qGUUCSe5P+yuum5dPqGgyAWiqnNj6KgfGSu\ni4HL3R86iM/ugIzQ6lZ9KpSCEkLzzjH0bwS61aA45ADb1Nm3RALPJ5XyqlLj\n0INgxqN/R4eEAVapLcvMqq/p6qr2hvehGLTTyezm949iwRm/yp3ZuNCpX39A\ntyGM+yuRSCg39r/PzUKFJeRgEYQilT4zXW7r7YvDfizsEcNLrRI1t/uCG3jP\nJiPC9lhchsFeCk2Qsf497Xn0/A09g7i5nJjOIiE/fwzncujqMkhd2/+E2a1x\ntrT9\r\n=iIcT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1LQThZZvJQz39jsjDN0CQVm/iUXBT+CRSOhnTxDQPcgIgNizKsuGBK8MXapPoB9xfbbj94VSdHX0FynLunFocxb4="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.14_1535827669548_0.14996980398007786"},"_hasShrinkwrap":false},"3.0.0-rc.15":{"name":"butter-toast","version":"3.0.0-rc.15","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Feaatures\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"0184dae1696f9dfa4329ec0919504ad2ed15991a","_id":"butter-toast@3.0.0-rc.15","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-2+wYJbZ1t96HV08gmZSJ/HLhZF7C3KDHIwcNbkmlwIoCaE7AIJAgfYR7LHsPrXeW0bub83Z+FtS7CTH7rIZDVg==","shasum":"e9268e0bd176e3b4813620a4a578c04f1bc97071","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0-rc.15.tgz","fileCount":43,"unpackedSize":5284690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiux6CRA9TVsSAnZWagAAHGwQAKJjrQS4s9o4Wjt+UrM3\nhi8f5ssVUMXM1qXYzovBrttk3IL/D+oX2eYYcTxP86QoCuuZxl92kSKiMuOt\nleZqOooGebI8mtGfQKsO22qVtHVnoOy8icGMek2X2+rziv84lSx6tq4BOkQk\nmQxsKg0SZCjRS7QfskY7et/Jg7/G9EibN4i2TBXx76oqJtFpjb6byNf3MvxJ\nhlnbr6G/Xb5NKeYhz2B42/s+95jlDkCupyld8tu29Yx0aFYn3VAAnlsS5VuD\ntTHP1SjPrDHhfrsrDFVSSU/A/60hOnQG7dS00honbS7YI/uQdg2BPX2nrehm\ng3L3OGlxWfexhgavVH62agGcJc0suiZ0kvf39lxYwhi29NtNXHCfDfXWOF8+\nRciVUr7hAH7f7wRgLYGxqqrtXkwT61oaliU9ytrAzlAWUbylG+VJZAF/NfTv\nkpLScYOeNqG2P6PMum8IiNCiQChtdil0weW7ytJxQ+Sd3cszDplAEocp7GTa\n82yv+D1UZZLR4MLaIEz/1+0jfIgDFW85Nz/dfusTg/3guac8j44+eCZCnkW9\navYCWJnTWddRUDU63PxsHkvtkiuYLM6WJrtSHw6w8qbTFx1zd8ahcPSjeFTB\n9ZuJijqSl+NUUb44np3/9Dae9XbBAFwebxH3XFfoSdvRtaiuHMcT2h1XimWd\ne/qj\r\n=Y5Ve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQHj9hjCzZ3RPUkV3cCUDfRgqQScu0+dyFL/NeMJLQngIgLjVsyOXYbOXpLzr8yyPvUHTTCz+D+LP6VzVdTOgfTyI="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0-rc.15_1535831161086_0.3924628112401938"},"_hasShrinkwrap":false},"3.0.0":{"name":"butter-toast","version":"3.0.0","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"gitHead":"40fda46e13d02e9aac75df57230bcfa8c1e27e1c","_id":"butter-toast@3.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-k+HLEjn/03P8fkjQ8xYWxQ6FESwRbuN+TEaQzWgRCjFo1prp7K5uNOinpOqwHT9qIcaZr0eVWuGBYM68OhF7wg==","shasum":"95cdf70c6a2ba8488eda72c4b50e38f065b79197","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.0.tgz","fileCount":43,"unpackedSize":5285175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbivs4CRA9TVsSAnZWagAAUGIP/i6jnLwhhdMmVtWCoZHi\nSPWkEGIJNuVf8pgHk7R8AEm2ROOwSDu1P9OpIosWEKH+i53D9WV6Lg3cyb3o\nN6AV4CRwdQgQRSseiUIZKE4h9hsk0L5YcrKSvUTMqxJQBS+mq2Gp7KmsG8Vr\nICO7KlnqlaEpOKylc5St1h4mZyHjU9ARy8AQch7YFEf8rEzsoI+RPbZR9vZw\nPkLQ6gF2XG+411XchH76KSyPiHGUzhO3LZJ2YWnv4h0/Qne+WKticKpu29+x\n9OWyHopRE6cRs+mh9FPxEsIXJAOeX/k6br3cl772+qt6v+7vxddnu3HyptPa\n3yoStwSuStsm8pObQsGEpOirM7YPYEsbkwTo89AJBTts+R3dk2jHIVPEoLaF\nHScjQdjhyBDQQ7DE2XRUgjEZULmLw8sz+9FK80MbCky6uPgmdJ/5xrCr9ccy\nYMkxfjCWTFMzbmA46GW6e4dksbfOOgbCniqyQ7OnIzbjfXylAMKyCwPenhas\n/Wsub5Uq76x32lNGyRVNj2sr+oMcEpv7bLDaNIeaP3Id5KNEwaZ1fcPTljQh\nG5+8TSmyxqHInQUW0y4Z+5gBVsOarHrr1QEIUUiMyXP1b38w6ruAEf0cGdOg\nWVhzTmVqRptFpc5qeNC67B6p/PnQQ/MRL8ZJBjcjxuEdk+iFjO8LD4INWCeO\nUiHt\r\n=wfNi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmhsztxOZYF0q9mLuoc6O1+6LBDDpJlUC5z9s9chfZuAiB/UGqsiCIDHxMOecb+irg7LP7UH2htoDycslZ7uYTGXA=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.0_1535834935979_0.2759306560081194"},"_hasShrinkwrap":false},"3.0.1":{"name":"butter-toast","version":"3.0.1","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"gitHead":"6c6de04cd3336609148ee6291e8978452ac47beb","_id":"butter-toast@3.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-UrN3hRTkfiND0CY6/HKj8fphzReSoT7OpKCeuDJU3ibWMGc8WSqOlaJcDY+t4FP1d8lcg6yHhRFEqRDTHbEtiw==","shasum":"832f9cac786f91ad16f29c7cb8ddfa28802a5f26","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.1.tgz","fileCount":42,"unpackedSize":5283828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbi40xCRA9TVsSAnZWagAAUDgP/0TR+ZGM5ccZnFKMzSCD\n/21YzCD0HXJ8uWaocONwlYGdFszRedtROUrJF/mYmd8mFdHPPvGFR5nPPQyM\n2gapqf7OIQqtlm7QKmUESW+8GhdmlsiMCCnJYTaY3QT3CangSuoY19MtSKEf\nfyDlRMVaL7BbDZbnCOAsYfv7aY0LxsdjEN9oBgMYIEsrgpnXu0/SGiymjvyL\nzeUpzQRGyEBS5ir9ALJOAjnjXkvqAm6NoSvSDCDM0Pcy9hizK6jQSLOVYxtM\nE67Ib6mCHVlHCyKH9aQFf5ZVV2h2r4HV20vdpeMygTjyAHTM++y9zdJ6C89/\nOiV9MduD6WDPeV/jZxuGiL9HOF6ItoW+/RZe3HqmAcag4Gl0VM7m7Gv+/8l4\nTJht+9K4EqEIYZXVRuCzWyjsU79mXaWpqa2FpdH3nJkFyh22c6mGqK3Dc4yi\nE4MPUQIwe6MCsUmdU9XCogEkCXQk4UNdHbrGoPYMoKA1tjJfMEHLexL52VQw\nWHQr7zrd01KQtgMrwmzxdk/jBKMe54/vwB+3q8J6zO23eFV1rTunSdKSZDhB\n6AWcNJy8mx9ij4VPgE3j1KCuqnuNLmwTicVWXLV90PJdiJwXsxIJXOGaINgQ\n3khc1YlS8HfmjZxbF43R7s17qJOO4DZ2nPwSKfKlOuVnf65k+rdBuK+VjDLq\n0jkh\r\n=0+UX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGg+y0P9uvs/V8/38MAMoGqg3/bIwJnSrktYznrK2ZoUAiAyKBqSpGb2ykbzCh+4wzw58LTmzJaKEjoitHsseob3Bg=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.1_1535872304618_0.05851633080168761"},"_hasShrinkwrap":false},"3.0.2":{"name":"butter-toast","version":"3.0.2","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"gitHead":"34080f412df951f23d04ff7d7687646e32a86285","_id":"butter-toast@3.0.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-wPer/FFrfu0h1pxIEuD8eRsfKtcEMCAVlOyWt0GZI52JXHRN5+YMowFvHABsoOcdgCUed34myJbInDbvU0ulNQ==","shasum":"374b5c6fc83474345656bbdc9e727a633b18245c","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.2.tgz","fileCount":43,"unpackedSize":6220825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjFsSCRA9TVsSAnZWagAAF5oQAKCS7dIQ8W7hh8qcSXRr\nGZdq39JKGLTz/fTbY2aJwJvd/+H8kQwfhnfIuPx/U3E/XzPLTuGyi0MX/zdp\nLdU4uU4ArN1Y0t9OQzcexSUCpdClAftSSWAjJB7v1IwF3JB5BjZGLXKs8Vc/\nMPnQFyD2cpqVVitV5h/2MLuwSGOcUZzPIJx3zhAxvfOodIOvawOu5NJBI5b1\nm0oR54nwXwl6j05TgIj3kHRnUeyyUDn0NT1tpgEdhKWC9to6ztKSjEnVpA6w\n6aGSmUiwARRF9KdPGzbaW9g4a3ryNcY9H8+7bkm2tT1G4O3heLGUMHivOddU\nIFNSTFHQjxkjevgjsOLkf3qQT+YCwVjQNjE0DkC2+Y22cbYE4CAoUHHg0OHn\nYkARC/Jk6/C1rshNIWOT4pCKlAgJ2QTo5ZEZwaoscxPcyCVAimHBQ1G+QMWF\nbz8xK1ssm6LpxrjZ2MhlYfU70bY/tWXRFLKTELIPjcNCRhJ66bc+ySHbHz0B\nH4N9K4K+K9EqV1T8ROrLPQd86hR5UMSD4Y9tpNY1XJj/UcIP8xngzHiQkWjo\nMAbkYSkeJK5iDB8Wb2jBC+kxBkceRJGthAo3PrW1HUMoSR1uadlfEzJ8jSRk\nAaXAUdvJlTp5zH1XHxp+OTU/mMbjvWZwrDIcpEKysoLM//ADBPl0DAA2CkfX\n2qMZ\r\n=6HGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHY+YvuCP4i6v2aFKG/zjYZFZVZ/GGDzw19rHoQJG31yAiEAzyPL21YopyUP/j4u0Gto15Wlrwx8g7VJSehWPUy4wPw="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.2_1535925009478_0.2868592637049272"},"_hasShrinkwrap":false},"3.0.3-rc.1":{"name":"butter-toast","version":"3.0.3-rc.1","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"34080f412df951f23d04ff7d7687646e32a86285","_id":"butter-toast@3.0.3-rc.1","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-Ze/gWdYil/YWl1eyfA7MRFNSjt2H83QUUJsua1Qb/LDAy6SLl7kZeYjM1Sv1EGjaEoTBRQVjHlxDQ6auqRZoXg==","shasum":"bc21a78ac93303124583e4ae7d7c4dc2ae851744","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.3-rc.1.tgz","fileCount":59,"unpackedSize":9344681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnyWiCRA9TVsSAnZWagAAnRIQAJkq+YW4L1hCjpKM7dXr\nmIwyk1PB+ZBGkkcHFkiYV6OWgPwlxyd8xhQbLZxllDhO8E/30d3h7lY4Doii\nhSdrwicVmIp6i1yam4fofQL6H+4umUdOiJM3YkhK7W4SeebKrPvogAPVmvrk\nCL7nQXnvV27sl67qp6eYpWQRUU32Emd565olM1GzuoAW9Iz+igfjgGjnwZQ6\ng957emsleEWlxw/pdf173c/Mpo/ia2mjQFsX7wkAj5LLnRwxjKfF1nKkzXBZ\nM4kvYDLaRCpufiMCoMh65WV08PL7iP0MKoql+OSNgmLO2z0GTaPm7PF31Ax4\nwxNvqoujLKX2WWVfYxmN6bRiD77rwXHhCpI1uUdVeUhV9qaWLCcrZc5VM1ir\nVd1N5qPHB0qAjDxUXx5EkyXSAisZGFv/zV27JmeWOOV4DDLGOnFn+PPvsruI\nXTLZ+zjRiM1QQP4nqt7sIS2QBqzJ12wuFD2RyC4+Z3RYlESrGqw9m5MOMjbz\nnVhaa4Mw4jh0fOcUM3/CoZiTW8888hKgUSpFWCxu6xZqJljIUzwNsxDByqFT\nyqyI8HDNRp7H785sAx0T9I780QXM9lAoU1UTlAoJtkMnwPx2+RVY5QDzflU7\n+Fvsg/DZRrUmfziI8r29h8+aRGkgAgwFzLelSBP/kg7uh42KynLUhSvRKRF6\nxIza\r\n=AVV5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2W4vzXKrMxMuoJBDv3aav+UZPKIDEm5Ggj7rVaTSdSQIgDxdvv7kg+4hpar+Ugjp5WsnzftpvCiqW+vwDZULN3U0="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.3-rc.1_1537156513249_0.24579657742257943"},"_hasShrinkwrap":false},"3.0.3-rc.2":{"name":"butter-toast","version":"3.0.3-rc.2","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"34080f412df951f23d04ff7d7687646e32a86285","_id":"butter-toast@3.0.3-rc.2","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-5B1TwgMsMv17vMhuZe+XeU3uO8i/mZrEmaXuM4+KKkol1pkNm8YtXK7RwKh8tffG+Z3iMqx8dQ3R44ErB/EX3A==","shasum":"9acacffd341976fbfdc86232df204bf627898555","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.3-rc.2.tgz","fileCount":59,"unpackedSize":9346596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnyldCRA9TVsSAnZWagAAnGwQAJQD/7C0MEG85fKzU21J\nJ99oL2+QDVmK9biT+oQGT3+s4u9cVH+CgoB+a1tJJD+drPIsokPlj8OZsIZT\nUol5a/zGeujwD0euVRIHUFdE1rnsaHKNMzn//C1XSSX514djgBtiTq/ZvSdE\nK6InSDVqAKyZ9IaMX6ngvix/FCv0mSoeDG1ffcB7bJ1KOtdmAzW/yRgKa7h0\nPU0/CHBrItRAbifD6xtkE82qgqNIyVcm3ebjxXnV2iHvVGdVS8y6qv+f5g2p\n9VsKTtqGwJvBJu0XUIMxkHTdDqJLdGy+gZPxhwCplks8kdol6ujVJmDMcPKf\ntYUkI+8kKOwrQeS2SPgh2SNeUktzlleMX9lVfc2o6dLMTKUZdZgkhCOJpp6K\nEaPAd7hb+QnjKU73P8fh0pD/hGfiNAKi0NjBUstGrsL0nIgZFiIAB8dZ91Z3\naT2g5Q2xcCgBFneVHleDtrkpAGPbv/703aHbDKXRiLGhULZe5a0rrhWG62xz\nsq4Fbx49JGZSMFtyFN1tB3i+Ty0UOYojHV2vAJcq5g3Y8t9C6zVLJQ9q65N/\n0I1XC50/tPVpjIBNC0Au9a2VnIrgo36XDLf/JA8FGMRH5YLEq1qlRCxacIc2\nU1TPPgckol9TQRf6Q21fSdiOKMtojXGcdHmklrfvd2YzbdHINjEKl96MPE4o\n63I8\r\n=fZJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCV9TEfEm+LjLOfUKPqtZcZLV3BbAdAKjVI/DqxuhuWSAIhALUKAd6xFJiWp1JeIPHCuXUbW4kxYvYwnRnJpoc4k1es"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.3-rc.2_1537157468649_0.06116331335516234"},"_hasShrinkwrap":false},"3.0.3-rc.3":{"name":"butter-toast","version":"3.0.3-rc.3","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"34080f412df951f23d04ff7d7687646e32a86285","_id":"butter-toast@3.0.3-rc.3","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-oNvOdb+Ey2IqFRYghBlBlmyPj5LsVdhsdFGN/CI8NVF5XzGcj/dK+io3Bjhv7AugiXX5roczFg7G2FBS0ckEkQ==","shasum":"a95709fcbc031df606a9adc3e8ad412b27aa6c64","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.3-rc.3.tgz","fileCount":59,"unpackedSize":9346315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnyzvCRA9TVsSAnZWagAAkMwP/20Sy0afR7YTGjGY2XKe\nl3kiYSLaaNgAaiU+wDKxs+FjsoeAWqSRoDFQS66d3EFs9ZKNjKUmSlQv29Ry\nLxhjpPn4qZxiFHH+YtxMO5KEKdOIc+T9k7Rck8cqeHCrXAI6b/IRiE3uSO/s\nXRKtevchzyPAvbX6jksPT155mA8/Jo1ZX4rVJA8bvkc4LA2HlYF44VDYePVe\n2mlDKTZtZXfo7Pg9FPgG5Aj4gza4PB6nmDZalY9eV0brKhG/Y4CuZ5X4gCRC\noGfFSfw8dCqZyRCH3fzrFkEPu9jorU7TkSmbR4y+/UxMnFoUpjmGAj+wP33L\ndgwLuy4kLOtfffsqxuL+xZ4ykk4XeLxTB767cnmjgltUuO3hu62AtWc37hzQ\nlgCaZbO+3fSkGTVBuchy+Ry9KbQ1Je3rR3dhTZ2eZi27fovo3K6AgzM88oJe\nZjvu7Mzi02duaqA+V5cGRnYJ/T8xhZXuEO6gDJ4ilNpFfCTI1f9hqGegMJWe\nG37HyDM1VcANuD363KWuNjUTqhxcEiA/fWWsdDrPW1HKIGD9pcsLARFMMSF/\nUsuMrWYTm9WEPQ/a0kCo+wIC/Jzec3DzcK5Xo3/yOne4M6r9pA9g9d65ojUm\nNmhKh/uSDtuRgOkYS1oH02cRwCDrkYdmd6NP1yS9YbOC3NVaOva27yyaNLlO\n9XeA\r\n=K48B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGGEbo6K3n5VTQ2aL+BPgEzLTUor9cZJbXhz9A4UAtO/AiBFgeuAW05gPamyDroJFXjxr7jKy9bhhmo0xL+N53gWBA=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.3-rc.3_1537158382658_0.41142843730147427"},"_hasShrinkwrap":false},"3.0.3-rc.4":{"name":"butter-toast","version":"3.0.3-rc.4","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"34080f412df951f23d04ff7d7687646e32a86285","_id":"butter-toast@3.0.3-rc.4","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-GwQh71qZfnGv1wZDVjq8mi9ukZIvwJgJL5lFgGQZI18K0IQALYjDxToz6W61ZfssP1m9KnYYdFYpaj1BgY0zPQ==","shasum":"0b91d5b6cfdf7918cfde0ea1d292a20af18a6c33","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.3-rc.4.tgz","fileCount":59,"unpackedSize":9346348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbny5eCRA9TVsSAnZWagAANsoQAIuIbbg7XpZy4Y+keAjr\nriwiBnGwV9LS6LoPVm1RQIEr7/flEkZVJ0X1GFZJz/iuucBvfURckCrF2El7\nuq4/BPcDZUvl+ylThkLE7w8bdLTm9dU0zbUn5QDiFmOFj/uMq1NSpRAXwehe\nYJdBwyGPGmHMHiejxJnbA1beIRBFJOxViE3UZz1Tn88zdDc0Fyhpd+bqUGdG\noOQBMEtGUj7ELGpd7/Klvw+UY5qTolGTWyZTCDIPrWbuvJ2RBEqFYiF47iMM\nEJlTxBuZHXnJ3ud5zBGUMqT1nbpfRMkVTy06HmqH0bLo07xqa51YFiVI5rcz\noHJhcDKQGY+3tyrJHKX67oEGL5Mkxnt0ZVNWRzjrKVH1xjkBQXS/kAJTPhOd\ndjg+WdwvyGUMRhW/2RkC6eTV5gKT8KuD1loUGJm5PUw9a+V00KQAkQK4Haw8\naWJ+KPe9GO5/D/2iT2cqdd7foTHPkt8bX9wA2zI03tigjr3llGlJt4Z8AeIj\n66fwLpMCxa5/cgZM5b2GWtH2m+ey6uMWhcLO56u9Z1aoEY1KEOcXlj1D5W2P\nYgJh5zPmSnMeS9jshDdKrbM0+fxiytxAb2aV7b0/M2eKveHkr5qfAO1V4v54\nbwYysRxBYaba+On4eEe1XtgpeedeNpfhuoUaB8vKQ4pKafZj26au2IdNFto7\nSdL5\r\n=cpQ3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGJ/qpOxoINXk0uJ5hIRKP99fA2yzI76Gp1OQjWwapdAiEA4UT8KGlAuU/1n0LC4YytqWTyChwtxaffE2Bs4Lczicw="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.3-rc.4_1537158749862_0.7559982895629136"},"_hasShrinkwrap":false},"3.0.3-rc.5":{"name":"butter-toast","version":"3.0.3-rc.5","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"34080f412df951f23d04ff7d7687646e32a86285","_id":"butter-toast@3.0.3-rc.5","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-X+gp0eNTdSq1tvunoNO5VnAh+Lnzy4Apxp9xjL2pqzB/n00LZMRLJFwHzHqIS16ZvqfyHx5kbKo5d4r+8PiJtw==","shasum":"99304d19807bc582c4ca319e753e96723f3790a0","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.3-rc.5.tgz","fileCount":59,"unpackedSize":9346303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnzChCRA9TVsSAnZWagAAruAP/16ZVlines+B5FCBrA9i\ncutH+slfH3hQPSN6ckLNFagXeZOniFDTg6KcKZGMgSvLds2MY7kXCEYR4t2N\nvi/g+a3E3oG3IYsGAzRvYekLlkcn8LnD+y2GRgjkqgmGqngIb4tGDZedy0Os\ngEZEVEmofjOTLKb4jjD8A3breNOfS2kpjOC/h43VH/fLKa1KNMSdD7bJs9B3\nHbB6wEF+r+8ujWpkKWnEKfh/u98akELgUnNr1ovfItrJQDzxOlSvpjFu4iCG\np4N8r/ZI1b+6yVXqH78QxQC/Qj28LJNOwVPBH6nOPF8njBYuwe7/cXNcSBSF\nZnSHRx14vjb89KI9hpVw5GrCkNFLbk8NpsdYVVWs8R4O2FAxQWzHms4z2wXB\n13HdXdB/IAAnP7fiGD3Hof8NZkMWgCUmbyYbkB8glHlAEPrsS+mesczeS1Yk\n3apuncPGem/d475Nnp/0VDaVOiQqCGKJIMCXcUSp0EX+iQF4BelFv7FubVMu\nxmJLMZZcI6aDUYCcPZrR+GtL9JUlhHrgUI5mWicU3r+ZmZR6Mf3i14C7L+F8\n5FQ0FN0moc11EdwePS6SXbYTZFpaKtE7h1odtRR7iDVl4NyGGWi07szXhPlv\nw0u+vKL/Y8F8UH3/0vmG6ARIxs0M+aLpbpQ2Oq/f5VSBDvvgy1i96nXLHUTC\ntkW+\r\n=QWgS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYp7tuiaEnK3rHxCjpYEh5WDzyRX7zN7b0J7G9Nj1meAiB/HufQiJ74htO1i/OKyfpAPyd0vfs0i111vmSe2gWQEg=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.3-rc.5_1537159329150_0.28635620213357216"},"_hasShrinkwrap":false},"3.0.3-rc.6":{"name":"butter-toast","version":"3.0.3-rc.6","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"34080f412df951f23d04ff7d7687646e32a86285","_id":"butter-toast@3.0.3-rc.6","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-CUMsOUk7c1U+op4ZYXuO/lYXsTHehTaz6cczsMJxjfMhEnItgCkhrisMtGey54hdSnd9jivf7u2LGHc77NQEIw==","shasum":"db4631480123506d826c6ce372d2d4a117853afc","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.3-rc.6.tgz","fileCount":59,"unpackedSize":9345991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnzGjCRA9TVsSAnZWagAANE4P/3LhAlatHMeTt7rD3kv+\nxnz4Lqtbh0bk2CuCoErrnQbYFN0slmrdtFaK1p/K5R5T59GeC9GvgYIC5bzt\nNFeWnBU9XQpGcSli5zCYQLnoToe6+JM3qjLlbnbbBB3CG8kGql4ypS5y7dxY\neMcD7CYMqvWWI0nrpX77l5n7PIVqOZh51Jcly/2w9jLlqMTPaREo8nG7nAYq\nPFzQJIWI4r6OE9gaQoGE0CQec0ekHD+KYlRsaityB4pipuS2/xiOsXQ6+Zcx\n8IBBEO1L7Fw70mAkJuYHZ+oeNATDg3EvWoh2+O+PaBbdWAS7noeIRHs1cM2N\nnVWoWs/eZFgPnux4ymsXPttrAdR9kIk6pFwIqFsTRiq7V702HOzeM4mUd0s6\nNdGKBGhd7gxRJ+1PXCLhYA0Al5RNRh0FQ02++MAnGaYXPcjVoHUJcVTaytap\nf7734T4WS5WULeGWLzDQj4rjK777oQc3IaX1vMGenjoHiUY0Rctub1JZpjcy\nUMkKg7vMY7HPDCn5MBLhjPvkyuhby7VBssindlPWXAq5MtATlQRmQdVEJwSM\nkQ1WfuaHPfyPN3kZds71NoYT1Gn7uaBNz8mUgOmNFn1e4F1aoPfHFPf0AEQM\n515Ssu1oXJ1QJ11NnvDzcZ0ewO1BvFtxkERIKZehGasPpDy5cMMZ1IS2DyEh\nm8ku\r\n=xPrq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaakFrBVHHfauwXxdAzEGbvR6YN+iNWxKWinn6Q2IsiAIgSgMYI5bwcQDnToVulfFLEqGTxUX4zP8JzCp4CURVOIs="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.3-rc.6_1537159586526_0.5597429786924304"},"_hasShrinkwrap":false},"3.0.3-rc.7":{"name":"butter-toast","version":"3.0.3-rc.7","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"34080f412df951f23d04ff7d7687646e32a86285","_id":"butter-toast@3.0.3-rc.7","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-fXmxIwKMa725hFoA7yp619Dvu6yge1eiOLsMTKe/oYjvdaEyAOMObzBsRu+5JFoOBSH0xT51W8/j1XfvDxFFWQ==","shasum":"62e33bc3bf6cadbf9365d682eebca2c6c35db8ea","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.3-rc.7.tgz","fileCount":59,"unpackedSize":9347675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnzRLCRA9TVsSAnZWagAAsZMP/ijY76TOUfnWxfHdwvjw\nIM3U4UPPZczLb5sM3p6/P7ZioeR5aiv5RNJmXtt9t3rKiAegkXeJ08w9Kfss\n77OQWXEyWubXxPLgqTVlXJs7c9cRgelITKtsAV3V0u72lx0WVTjeBAybb02l\nMd4NvJOyO8141IH7/yd0uuJSY9TUOlWJpa+2/rfJ++bGlZykHSDvaiQCYpDz\nbVG3b9p0mC3Hx4Vv4HT3LR7oubRc4n7LKed+UySMXso1asI/EAwKT10WoK91\nQJyMn26IorSrhmUw55JYRnuSuG+5c1wPQs4FaH7d2FjompTsbWzDMnL4RrSE\nNhjA9SJd2jQBGyHhd3M4XQfs6hlRUX3aOGIsST0uF8Bluprsv2IalWkLOcZL\nK4Xf02KwGnltPIxvBI2OlKv/6HIzFfE3LB+l6gihOOd9ZLqb5O+KAnhbA2gm\nQd+1+OJNzqCqs4QGZqq2VnnYpEAe9XLo6OVRN4GtWXIWBHfkNpfmAyVO/55R\nDJKRU4wz7SKjUXan0Wmg4HLoQFfNsyVgwDlIm9H/U08fewb0c0cFC1iOW6tl\nE8g/eP62R8wIxFsC4fjIPNrKeRWrIF169qgQcHAGZHT+viHa1XGzgCvelrBZ\nsRqmM308R93O5w2LKN93dEFHrcInbfD+6xBBEwZnYeAgWZYAM8shyzqQOebH\nY0eJ\r\n=Qpdr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp7aOFPIG/8e7YPUWdsIBvN1DzFK7PsL6PQKXkZ9QQAwIgbWjWrbJdMHinLSza9YR/kUyRfdy/2iOnuJCXZy5l+xg="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.3-rc.7_1537160266794_0.13950391026387177"},"_hasShrinkwrap":false},"3.0.3":{"name":"butter-toast","version":"3.0.3","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"babel-runtime":"^6.26.0","polished":"^1.9.3","styled-components":"^3.3.3"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.16","@storybook/addons":"^4.0.0-alpha.16","@storybook/react":"^4.0.0-alpha.16","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-jest":"^23.4.0","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.4.1","jest-enzyme":"^6.0.2","lodash":"^4.17.10","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","webpack":"^4.16.2","webpack-cli":"^3.1.0"},"gitHead":"9cf9452c869ad7232a55610505aa60b0bfa96efc","_id":"butter-toast@3.0.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-XzK/H/Sf9CztqFYuZ7NFT3NrAOxsDi1wLGeS+GogYl9L4epy8WRD3t0np2rXz3ErTkabV+AhRpG9gaByk8Z5SQ==","shasum":"77832ae30e3a1fa1e0a99c34a7a3834e893647a5","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.3.tgz","fileCount":43,"unpackedSize":6224127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnzcNCRA9TVsSAnZWagAAR4sP/0MvBoHOGYwDXS6nCTjJ\nX4zkwV32U1YTnjUAW5hKU0HPELGgboqcs6Lq6ugw/OyaJ2P9eK1vE7pLaKFg\n9uG1K4YgJOdqDFOgL+eMFz+PmNW2AlnZJ9C9JI7dfbinwFSWot4ma0SDQCVy\nLOPkciTXcIrCku41u0CSaiSdVmbR/1SqX5btlhdzFA0oGOmLJ8FMo98eqss3\n+C26rOz3uo6ZWyzqn1MZp3mPsP+oOp+iP6mlvtpqg1D2CTh/K3BzwyDH60Bt\n5elqhqxDwR2FaQGIOQpk6XdY4MT/T9hjp1weExrkfy9fxrOQRFzbDxW/KCsT\nhUkQAYJDBRitF4fWM6Q4BmB6/ofEpB417q6IxhBiL2mVY7a8JFluYHE5wXpq\n7arxujHwVoDO+TuuYxJiWVMP32Mx2x30xtGEJs96mQmN4bEBdmflGiitA8xQ\nN415uj7IJotJCSRtDYnnjBncX7j7LwzcW1DmwlVyhBc2wWwHbe/LNH/0DQPa\nW29l+xtLhm/PTnCfVjdiruqLewsfsHmrv4Uj45Yg7+4NJxxj+tiXX5PhdhCd\n0RQr72S4jXcFli2fKyZmehOKgIp13776zViGpRNh7vMrAp3rK9KAwxXXE9D3\nbbPkJ1WiNHZRqzrQbdlOoWd5X+vQdnRYavg/tXpwYcuggMRhJbN1xCf41UFu\nfD/l\r\n=17os\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFaV1h8/cUYnw6sl9BHnE9sErg1sJuw1p/AE8EbRdDNAiBSz26jZeXHOlJzphKngEexDv5MvOwfHVujC9oRWJVLHQ=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.3_1537160972966_0.3038332316684631"},"_hasShrinkwrap":false},"3.0.4-rc.1":{"name":"butter-toast","version":"3.0.4-rc.1","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0","polished":"^2.0.3","styled-components":"^3.4.9"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"1f48c0681f4dd14b97820aee053c271654e2c8df","_id":"butter-toast@3.0.4-rc.1","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-ALVUwrjpGaJ6OcVKWH7KTPNTkmDKcWzOUSX9suqKhb7QyGcye6IDzfQwSrv3LrNgntVJwEUGK08DTFnsjAne2A==","shasum":"38b2fa1125ec43bb74812ba49676b2d8e9ae5414","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.4-rc.1.tgz","fileCount":59,"unpackedSize":9175722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpMaJCRA9TVsSAnZWagAAFq4P/jaFkDRydC5ivATkQ4C/\nTefhmbFXo5+qxbCLrOOOvmzGW0DJFOHCkJrQ60h54DBwRA8Z/T9IEte6FxG/\n29ErZDzTK229+aKnBA/RN/v8X86v4Tvg/0RGoocFCx9f2vJ5M5/At5vkMy6G\n5aV1z6vWLA4vainp/O5bSaz4Kaf68mdDQBjKSK3SI6boC+GmPpjthTcYaHRW\ntsePp43um7J2v8WBjVMAwduRG0PMPtTH26QdYksyKBf6dZ/Z2VO51PzsQWf9\njChZvCscQl1d/fpvRFm7SkYUI0ehsrvFn/M2lwQWSr/IwUHULqWdMwIWr/sw\n7AZITieqFe4R3jUAPL+Crr0e95OiUC0eX3wcx4Yr70+i0DhGjbb64hC2Xt9J\npO0AYO4xLa8zFyKZR5trlmdFGQKSc16S2+loe/EaXxHW1h2Su/odKSJMvp9k\nzfI33Dehb1yvnCrRIdS1tLYH4vV9wyy4zj9ylGIKa8hY6I5f3tVU4jve0wkT\nYLaLW3YEUZKmmenI0AWOMk1S9begzdRW8Y9vNSVhret3iVC/o0b3jYJV150W\n/DTvU4OWmf3EtdDtWg59tdApaBTnwKNDe5iLn5VkPq0tqHV40heRXAZYr+FV\n67BnREP2VtvdyMbw+sMMtQdbybybELUTmQWfiNby0k02WWk5cCS/qnOZMO6/\nyaue\r\n=SHeH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7ic8IvB/i2eOzzA+HxF1Xms0tPWvULFYxXpveWMtD4QIhAPnq12cE/iH3KGcD+LeFJ3xBJHlPeb/qW1l3POJUzrdg"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.4-rc.1_1537525384881_0.9254114715061634"},"_hasShrinkwrap":false},"3.0.4":{"name":"butter-toast","version":"3.0.4","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0","polished":"^2.0.3","styled-components":"^3.4.9"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"gitHead":"0e497f8ab8564217e70b84e7ef5a25b9acec7916","_id":"butter-toast@3.0.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-bPWwLFTAI8WuDb28idnhiKgh8ZpXGaUo0Uzxsgt3COOZKWjEEJHGuMFiniH+8fdq1MMnxi27cYDbWLSarUKRbQ==","shasum":"d83a7e9ac03b47a0bf719fcd438deb067b6d7d2f","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.0.4.tgz","fileCount":43,"unpackedSize":6052077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpM7fCRA9TVsSAnZWagAAQ7IP/34/PgdQMcTSZCPVLE+4\nbcFh35gK70hYhETXAq7hHsqGvzv1Z5IOEia4OSGoHotmWEKbXsZ1nvvtmMkH\nZYH4GRgvhNwKgOSR0c+9A5PNp+MvXyPLcQKlroRpRLgHJMctQuwNTAM4Ne9Q\ngJ3eB0H7cvnDuK1vlsIPxk4RhYVqdtAi4lbE+VDYOj962Jb+u7cFS/U5FWA/\n4IAXWgl9Ra+6tBqWMM8eGn+lhYEYzkjll6B10EY4sJNXhpoGKcKalxXPLCMp\nB0nT1IKrfQqc0NKegv/UoXduXDGat0oO2lwfYJseZKEXRiOKvlrihwIY5ykz\ngd36LrtwKwcCNL/N5jyb11y7IS19SlESPXb0DJiDw6ZiepkpOQoFq+7mzP3A\nOVFvZmhsRgG5ePC66jnoRREo9Rivze5kbNq8zUojeCVAUc/g9hYUw3oOhafi\nn5uy6IS6xgs4JG/kooEoEAEiWVhkmk8Psv/KRsS61wHvh7t5osRq8A3XbjNR\ne4ztLceEEVbBWbJ4gF3IDIokX9nD9IZ1bsNcw1CQtZgN8fJMKPlZpM3WQTmH\n2dKTBmbFEqw8TuWmbUZC0boxFbJUrkZ7gin7+dQEn+FkNFxNVptsuvIC8hmn\nS+gGa/znydsRlQBwE0DhHqQbs3+WTXJlfdmSPAMqsXNnUdujyhL794/gAKgL\nrNP6\r\n=XpWX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyeTen6zHDZAcr7vzKyRS2/83XUv/pKxt9WWlujwftRAiAUcbLZwGHgs5YNAdbV6U1gFfyYBnztOmbr3/jNmV+vDg=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.0.4_1537527518668_0.9547688531190273"},"_hasShrinkwrap":false},"3.1.0-rc.1":{"name":"butter-toast","version":"3.1.0-rc.1","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0","polished":"^2.0.3","styled-components":"^3.4.9"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.1","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-LLkUbNwjBcFrJwZtFse2pddhRiSWo201PEf5e4dEcMkpjVmtV/f6RDT7PpoH/4Yy8kwDh0ygf7Emwt2UrwX+Sw==","shasum":"451991057654d328fe912cbf8dfebc40dc3ac85c","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.1.tgz","fileCount":61,"unpackedSize":9274724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqnFYCRA9TVsSAnZWagAAg+4P/0q9B059zIMReBvhgDLV\nNZeelHQGr79m0Jgusn2rc7OvKdMmnP56yGYcX1skVNsDikJBrKMk3kU7IplU\nLLBt5tnicLVgyhLYkEyaGEW+nF6FTPEAqeh6idkmJAbGQ1mgrPDcL4K4QiQx\nFsb/yjSKiw6JV6p9a5hn0EOx5w+xToWge0b825VAWHB9g/r2OvnMvgFulLhU\n1obZYFz5sdCDrApMffeGmmz3pV4zBxwPi6eREZa3SH3SuLdfFh/42PO/O+jG\nR5wIcwqJqk+a6tKGIfOCD2uB62b2LB6+qZOsqCE+lltn91Bb/72Gb03CyNag\nzAxPwV96DSKJig1QSIzwOgJW3VmqbqkNd8up90D6sSdr90PSMqxAeFvpPpR0\n4wIHIJ8jWQ7Wnmqz0EctMJb2vhAa1glCd8dUpknne5yI2EHjEwdoWRUzZGw8\n+0fWI2Oo26HCIFV41w8jBQL+zr/5qLbVRLdagxuuHmeIuQndYBAvhZkSQ/MK\nhz6uzY26rIcxJK3EgGeJZ2s5S+wFW4ofP2uQmtsUe8O7mWcZ0afA+Vxr0i/y\nO2yD4SaakicJGRG7s3mLx7D70E0jUlcxPKbH7hUBqSFjUuO0/auvFCQwZdJ9\nLDpfYi2ero2SxZ6AFiHzje1xF+uvLwh9vkHh7NkBtTqhNv1ZBjnVuLoLj3Ri\nHSxl\r\n=gPJH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHuxcK58eyNEdJCxTm/ItqRGu4kO6/R0pVYx+J8wXkBHAiEA2ufyQ6HnT5lQDYCQ9LzWiVXgIytX+rEgL5IGhgIYxF0="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.1_1537896791622_0.3548139848510714"},"_hasShrinkwrap":false},"3.1.0-rc.2":{"name":"butter-toast","version":"3.1.0-rc.2","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.2","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-pWs8yMZwTHSF81857buwbOlMNXLpf/QObbyoTN7Jetk5ac8BJ5Fux8/jIFdZbT0shg51pY82R6bLgC+0hu7VBA==","shasum":"c7dcf31cf0e8f50c4cbebd9a0d879623b162a415","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.2.tgz","fileCount":61,"unpackedSize":9274663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqnMZCRA9TVsSAnZWagAA7osP/A/karD9RW+OVm9Zr94m\niD4oDXrnEIOYk9ak4Es+VlvYLw4PRlu49zYyzc6qr+f9I/G4PRlJQUyv//B+\nwYOAwufx/10wwDRiVJdoo9hePOszrEOvQ6wBq0M90h4KzhdkCqwcsffVIRk7\nmTOm+sQ54MT56vUonQM1pIgnoyUU6TBsrOcS0khf4jfFH+zGVXjNIZlYaT8I\nJQ/O0dTkIda4Qpv12Oo5T5j/CfGqQmSYN9p9v257r4AfUpq5kC9nskVvLRXu\nAhP8NxSOSBLLZpXL1Kpp10erdTy7jr2r4+qCcvYirreu3HCx7twLw0DDCXZW\nAt+CB4YtlPPxKmfxm2ZylBYZT176V2sgU/zqhF50LQvpQIO6Tr8ON8G/olDb\nQ9nElw7G4PqW9qiJPn5KroYXubnyAWEPGi+2isG7bec89j7NqdSnYwTr7MKc\nqSVmvhQTJGHH2ePNW+nJHglSdK73z3J9MHojhaoTlWO9p0w4BzlLXjb40WKz\nJ/Kb3sRJHFQKBDEArdQeoo937rBI0O5i8OXTf00SEZ31eKmF8T4UdlzTDrZU\nuUiT92ptz2dnOY+LJ2l8UZxkGJ2ej9YvZR3yx62DS9MdR8mplNLrr6km96px\nbFdbNvFzb7ljX3kySHR/U7vVHf6GftVMW7VarkekbgS7nZBk/JNDah6r+nQe\nArXY\r\n=g0f4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEoEkYkjSYoJzXHevCDxkv/kBLxN+IRgL1NMf8e6bzmfAiBBL7HDtDQZvjQ0bW5SKmvaof2RiDRx6Tdaa++0ysyiwg=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.2_1537897239988_0.8287751151943532"},"_hasShrinkwrap":false},"3.1.0-rc.3":{"name":"butter-toast","version":"3.1.0-rc.3","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/fiverr/butter-toast.git"},"author":{"name":"Fiverr"},"license":"UNLICENSED","bugs":{"url":"https://github.com/fiverr/butter-toast/issues"},"homepage":"https://github.com/fiverr/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.3","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-YUmkWzSfqwREq8w8AGQejqU+IOpD0PIQS4eHuHIQ0ACwq+Xjv5b/gvtjUzV5Bo0Xyf4hFwPQvIWT8qaQVYWJ8Q==","shasum":"940d70cf663a007f99a8c98d22e8751c476e480c","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.3.tgz","fileCount":65,"unpackedSize":10041160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqzIJCRA9TVsSAnZWagAAyToP/A1f67UzIyGAVViEdhnS\n5TnCbEb3UVF1kWZFZasxN0droy4mCaXzW8aPOdjov2mxAPeaEGxRSk6SQUSX\nbpqic1xwWcMJ7M1erbGIkjAphjLzZ21+F83J5eM72wVSGFzjA0QMNsqAoDNL\nNolw8jhy8a6pq+7iD6orGCYqeW0b+6eFoVGdo5GsNMdR4YFH1E/90JdUn2J/\nzZAsq8zA85HMm/ONq91VxE9ZLPxXuWA2i7mWlnbLsdoTWxRLOEp4MkuVXB9P\neuwVvn1hkF1xHKVI75BlN09ge/d6Id6IYyuO7YmjObC093tX+z40UJ6niZ6s\nOdZNFr8QwY4gzHwXGFREDz3vd6F4h/34n8s+3x9Kp6QlALC6HHuGurch7CG1\ngpZhlo4nhS7szbvdHAyZj5qzvu7mqsFpG0am12ggIockkDSeiKEbd/Y4Nkep\npdQGf1+P9SehBJDCk0K1CQQXuTnVUmiWcRJoZ0QCUgR0DmQ9Dzk9DpmPp56W\ni1wdXFOlCdSkSR9eGkq+U4vgBG0N3FHLf590EcqMyC0Pu1wAcinFPcjAzAgD\ntOaU7uIzwSYnDGaUgGYx4kjIhBd5NKl1SwBDrhBX0ngTbGnffHGM/VrCz54R\n+gwUD8fBitvhTzHSHKWfaIMYHwkjBBQnCg95kS7aNN5u1DRg/tgDet8m8xZs\nx9DN\r\n=XNVS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB49D9ADOuG2q1dgls3pGqYV0b5Doad+MVIMBAay3tyAIhAIjyVg9enOe8v8108KEhYuWlniyIUlDpgCzpw5Z5zomM"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.3_1537946120639_0.27453391500410773"},"_hasShrinkwrap":false},"3.1.0-rc.4":{"name":"butter-toast","version":"3.1.0-rc.4","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.4","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-yFVLqhpNRjpJvTpNPV3oqlqs74iD49Ie6OknctGvF/3UIWMETovYaE7MeKKvFF9UjN1SvIJYJY+mHmDdS99EMg==","shasum":"7c12e7fb4c83df8df4ed3d7e47d282e20546a396","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.4.tgz","fileCount":67,"unpackedSize":10190514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqz4LCRA9TVsSAnZWagAAOCAP/ipJTjQeo4RSjhAzQInI\nlTJ9mMEiTV/gfS5rX1t8yxWWlOm+gZU2l/rDJZAaurUwuaYdGDzHNZqRUUo/\nAfKO7CfArXyrHoVhPWnFE/1axt7Vgmur74+gWJIFj0vY5V94tpNWwu2kKqFB\n/PsoPj1EZHIDfzHEoR0A/PWnxosrsC+IKZo/t2BVOQd1lKbv7ZSo4DVIXYOK\nx2yTjXSzp5ud9oqBGGsFq7jDEAxqQA9HuCeMtmn5g0WZInm2DP0MX25jHSRR\nbQBDKbvdZy9Dgv6Z4C3i1QAad+F8Hbr0ioc6UJgX2b25pp6XR48xm3tcPObn\nprlB5GBCofNnGkwQpZmms58MxBu8Rkefr2YfWWh0I0H3TFEkxV+GLyeGytnl\nKf/xLAcqkhvYU5ewQGwMShYYeu+R1TZPqjRzrDzwyR9fusm1P5CuYNEZLRzV\ncTTlEYQKObdefAnG7+F75TEGTxPvFEOYcG/custvkvShmu2wPwpNtO5U/Ybc\noGS6S0VMevXqW1TGIiR6acOz3CUIhIQqWqsW2lOWunhBMCfWfhvuTHYuiSzp\n2HfMZ6mHW9kWtEERDfmF6aK3pkimJUNsJf0evfkSubgqkTbtn6svia/NiLG7\n8YHwHND4swt9bKbGPqeMUvAMLmEYID2kG+QkVG01cqmFdLa/jjWqkwEjsfbS\nR3YR\r\n=IfAV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICi+YSRzpYb3m87BzntSqgbfIiEeY3aIO9yjm0dSqzRMAiAHwa1/5B5ybyTgqqBH2b4EM/x+YRou38a0UAmcGaJrKQ=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.4_1537949194866_0.6501341236286602"},"_hasShrinkwrap":false},"3.1.0-rc.5":{"name":"butter-toast","version":"3.1.0-rc.5","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.5","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-q0jgiMoKSPjK68w/H6lKRsFsBmLm0jZzW1BX9pCfTg8u63EteRxzIOYjYKdkD9UCISoUCoYgaV4c013fxeZhbQ==","shasum":"0c9d092cb7b66404c8b90c91466a248b07c47cac","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.5.tgz","fileCount":67,"unpackedSize":10190354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqz8nCRA9TVsSAnZWagAAx0EP/2fSMRtpA2N/H5Ngh2ym\nA3jHDYjVuhRGZysFDFqW1U/O0wBpKlb2II3msC65tJOhTJxWpmhCDFHiUidn\nEkLOB8w8ttQ9rX9KstBlWVixurEhuwOU+OAGZYAMXjfkooIf0BVDJYpgNXeP\nAMoRHFfAetUHd/0Dn/LumQuH4uGKfcv3o7E7YDktS3JWpPHPZZaACtWQHZu8\nv0prNhmZqeImE50VWTveMXtbifnO3KHf1wEwQ0btm7ed/aBJD3IoCCDL//bf\nLuzqbT1A90YdNXfFFs+Y9s6PqrspUMOpsc8jUO+FG3LBpT9FTYQSzx+jEW3w\nB+eEKXykhQFf4p/R1PqFb9LYPhoNZh7kqd3oOK95ZH2SZ9+zE/uYl1GJw2Nf\nAgYuLIiKzXpLxo5c/GVqk+IpmODvsUDBQQ3e8SmQ0kEr1JPtjBHxOA7tQLWI\nJfyDNjZsG1C0aE4/O6jfnPQAwOskKxE8FrfnZZ/oXJ3BEPSOAwCoCkjcwJpb\n6nemfOTdK1rv2RCG41UH2lxofFES0xa/JR+50sOob30K0wMzuTaSWqLR65GW\ndgUwO/8De6roWAZ5L0IA2QUBqIL8dY4UXGvZZadzd2SxeqdG+C5UNm4E0/Hu\nuMBZPGtMAxiDhc4jzgMTzAJKC/LH/UnrUzcQEnZ5RC41DnQVuo6ET3if/EYY\nyvhN\r\n=tXf6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCghX2EXuOgwezH1tQHPQVMCfGLpJOElRMxHGelwagTyAIhAL16GmHCoHSUJ7hgX4Bqp5sr4wxG2d0JtxaeiGMHwd19"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.5_1537949478301_0.14492348920442555"},"_hasShrinkwrap":false},"3.1.0-rc.6":{"name":"butter-toast","version":"3.1.0-rc.6","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.6","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-8ZUIOCFRDYs5tDDwr/qkwGQdVNkiQ5sd3tlNvaZV4JamFbPC4HmVwBXbovWHLx4tCR9jN3KCKT3eqLgNrI+d9g==","shasum":"5ca633c6596b7624dc5bb98945b42a2588ddeb90","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.6.tgz","fileCount":67,"unpackedSize":10190354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq0nlCRA9TVsSAnZWagAA8uYQAJWVZUKoKS55+f88gsFm\nRcFWEUZ+HpHEYb2lWoaz4fx36rnbOv3lojDojk7DKwZM2gHJ0Snzxne6Q4+2\nwv0/MfRRSqnn05D61DrvXwuTEN331M9eVtKDljdkQCYsc6CQEYYXMNQ8NxEt\ni0g8mfrwKqoxUzzlea/aXqZdnXBijN0Gt/NbMpyaOX5MNL6HZmZiHrLwkZdH\nG9KpZURsIN/AM/ixhv0mbqfxuar4tFESc7fKDTIaNTTLk4/FXv5AiPgJdq5+\ni9F+1hyUMXo40qedW3nxQmtXMZ/Jeu91sVKF7QwuKqTHTG2dgX3jhHHO7lr1\nNm26AYcEVY2804y2565OGg2j5pN0vcSZlMXExgztExzBVPmSIj1Rd7M6dsRD\nY3zXXgWBHDmE9paXveyreYdQzFMet4FIa85ofcWBzmogFyZq4Is0Cc0McEd+\nNjN2ncUJDxtKcpg/2DyYFRujWEzVzzWxikqWkg+zBwxAPUfP3anAgigTvz4O\npxnM0BDtsMdsZ1NQK+09FzkGn2dS3HaicbXV48OdcAm+PXQZsdSy2g0XXHRA\n6IVVeMlFOahHK1ULaMcF+PKnapyxuzSKkyu7mSPRVn+1+kU6p9C7Id2q18vx\nrZoU+xWLpadMxzdT6f+tk/Tyfqv8f8woY+yg4Md74NuIeu7LkgpKiQk2agqM\ngMLt\r\n=MTf6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiciAPOMM1VX3VbUY23vKBXt3laarGOuwrREc1fl+smQIhANpo4iM6ffMhBgSwjHPwhGd8hyevZ6zObAswqkmXRtVS"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.6_1537952228294_0.21769026593298624"},"_hasShrinkwrap":false},"3.1.0-rc.7":{"name":"butter-toast","version":"3.1.0-rc.7","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.7","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-ay4SZirMFGhf0lZwABOmXxcQnVHKfQLae73/lwimMbVWOk6IgNwBxu8VAZkLva7V4MfydCJ2E9P5NupkqfNbFg==","shasum":"bdf23b2a787f193b185d1708984d2cae47fb72a3","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.7.tgz","fileCount":67,"unpackedSize":10190354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq0ppCRA9TVsSAnZWagAASH0P/Rd8Kuw/LMreyMIMct5S\nDLHTrdczBpiy7iUeXpwMTL86YGuHlEI0PYYrpEO4VDtxpHge8WoHgFmjq7Hm\n1FBBe0bLb4Ea7lh/wW//3eSUFOUgIqDhoaHQzqWDaLSvFSLXwi2A7fZGFa24\nuRUhNjAPsQmjqzHi1iN598p2TI5QXrsQs39E5fK8PQFwSmdH+rZO1cMYuE6z\nvcJTjZ+FnIPqty8TmvUPuCvVeeicewN33wm+kgQCVIw8wjc9NYGjJYRcb1OF\ns5s6YiU2BqiCt9Ik3o03xucgSUWB8hv4SkxXVyFAOB1reeworWUhZQmPrIwY\nXySnXSLft3tJuij8dOn0/bXT0kPy3GDP+cdgtOK6zqzhWLVQecfAOH4OAxMn\nGkpwRHOhGLxhGwWAbZfET0Y46kXsSk+svLWQ35t6tRvDfSKcSODwXKO+NqMe\nkpq3Lve6vFvzdLpP3yUFeVo0Of+Qw+7aeSh/2quRyWGGA4S2kWcDl+DYkR+4\nJZPXhXAD5oOKbRrKOUJ24XcWI0tsH2Tgm4ZMidj4clawCJSj8EQmdZe0Fi5G\nLE2/iWqYi+4qPB9RConi70no2rlnKJcfW6ALUThxxISpk/1shNA7fVal2fmr\ndNJfDcqVuEnMQVGAt0Z14Oi3HD17L56o5haWwkWtcPOdYwhNJ7jZllIlo2di\n35WW\r\n=R+nw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARkSQDqWsD8ELM3A92iNPmILcWKctI4OSHS0715Qu3aAiEA4SiLtUBXRjdhSB6wm5EXcOaRcff2kTYhz0tcHKGQm4Q="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.7_1537952360977_0.7955490171952702"},"_hasShrinkwrap":false},"3.1.0-rc.8":{"name":"butter-toast","version":"3.1.0-rc.8","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.8","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-fMZ3xdyI2oT7ja8JsH1CWl+0T0Epo+vBDu+ieBDz/IBBYpeba/PEtWAjmtfJ2aLjS9h4rFryoLFFofuuiwGyCQ==","shasum":"f586c38c14041f12c86aab5e7dde2eff811eb841","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.8.tgz","fileCount":67,"unpackedSize":10190514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq007CRA9TVsSAnZWagAAD/UP/juextK1VLN0DecjFdLY\nhdYFX36d4aTJ8N/xb+97CQENT+49y4S20LX1PnKImUvyTeEtIrWQ/R34KbCy\nyTcSDdf89VHNOvjSVDbsWh/V1vo15VN7ustATyFbNfpz0sixH4uQSa3H5ZVE\ndlz5Ezj/S+5jXWHxewPUFqwNC+2i/eM5fIqv+Fz0VmOxSZOOllnD/tdwD6lt\nfHlQDc1NQxUz0d9Dpx1NIM21yrOwDGsPylx3khW20hUC4xkhy0vaMXuzZX08\niuzqPPe92BHLFZhiSxdWh0TV8e4RSg2uNwBwqvxwLJphlO3sADUZthSXDiJd\nLDK8E9axiVXIKWY10TDA8ICtQCEvY6Gj7Evp3Gyy8/+Fn9sTrd1jGodYVsmF\n8KMZvGIhZP76pfNLMT+wEHOrWQotDgpHYK2qW7StfUDbQSOWVzSab4sOdvyY\nkuzasklOcGyxGxheAHWeeewReeW8a2CoBngL0sv8afp3cPuej9Gycg95cJLH\nxo32DdQkmYdkgosZVpjnwF1vqmf2lNrkHEYXTTGejdq9GaHMkY83Te5/ybc8\nNThpuwFASO38vnOqiTapSdmWWbNnrfi9pzvH+9+D3qxS/KSJcN30vs1wnwPf\n2/GbMKepFf3DeztF/0Q9clZJLHz2etaG4UhA7xLF78ncKx23DFaeilfqzD80\n/oPn\r\n=tU9g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBstcLvWXKOA8GDRxBuS4/zKOO8NkIp+MAK9g7b3hnr6AiAq/3aUoBfThSQiqpEcWTrSdbw0KnpNOO7BhhcxJJeAdA=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.8_1537953082433_0.49323254738709443"},"_hasShrinkwrap":false},"3.1.0-rc.9":{"name":"butter-toast","version":"3.1.0-rc.9","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.9","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-LFgjaQ01TR8Bm3P4tpjLYqYbNBqPqvGtYW0uUoF2Z94GHzNUA3VQpV8XBOxgf+WJWG/L+tju9Aebq2b51hhd/w==","shasum":"ac5d49388a1479ffc5d2be08770f09aed595b18d","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.9.tgz","fileCount":67,"unpackedSize":10193896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2EQCRA9TVsSAnZWagAARi0P/0G2LfzN3oxnunbHU+OM\nVGZ2eDoAPwTSnfsWTo/ZktV09Elu1kcMv+qv02THLBtDrMREPR8zPBqr+5Cl\nj/iqqc6yWtWhApDOLIm81Pyu6JyOfJ1JM0H6+TBjZYAr7EFIZODr/uJEemAC\nblF2Ndy0Zries2vuxLkdOYpl26a1rVAKM/W41ux57V6FxXxLaMJmB+XivzxY\n0rHJvbx6vWTkeL2+99sXfCWYuEfM8A+s670/sdTHrmpjUiqqcfKCGjygGPEh\nqdmvKprbVllNJn5Gx1uhJ5DQ8tLAepzLJvmfDi1rz78LcZx3D61e7JdWiLqY\nJ+nbRpIbtBYf4VrzDOMxJu/KzhxujElWV3p5lRIuj4EW/DZY01C1oEi8YdJ+\nJM494TfG2+ERR2F+WPPLqDfus9iY3zatCNZ/PMwW1jHikmOpgENrOapSjWwA\niLwXYlyyt3e5g3pgp9fongB38p0umJzVLYWAHv/FQSeWNycxJEFkq6YFe7W0\nejnuuII9BDJfPRU4IFPFdIxKqL0z9Lk6Tfwft/kSYGwdIoPPoW9+YHBih5eo\n2VAY3HpIeuFddhnh7rYJewhIVmhlYt4eiiFxa96a8X/BUY/Ztz1wHtm0UvwO\n6vkupBOFIOzivc/md2teYycZhtkRmegIpmJBdUMxs3tIuyq89wASUys3dkwH\niHDH\r\n=gzJk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGEw4zVzgxWH4Fec4++4DT8dlifBmRw108nva1f9JEdGAiBsr6cxAY0eiKxhnoAJZkJxwZ/CnSzXuWHFFIotnB1ZnQ=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.9_1537958158823_0.641136274845411"},"_hasShrinkwrap":false},"3.1.0-rc.10":{"name":"butter-toast","version":"3.1.0-rc.10","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.10","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-1NYMZYq8SW4j+rmmriQeNwvKwyT3daazcQ8N+L/rigeiwbe87PPq1QrX8O2aG7J2ex2/vnifd7zx0Tr6oFdGdw==","shasum":"d1b7a83e4fff6c8facda9436403b43e81ed94d16","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.10.tgz","fileCount":67,"unpackedSize":10193897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2GfCRA9TVsSAnZWagAAz98QAIyVHZjxf0Yl9luKrJMM\nSwZOiEzRecPXDquu1ptKMMutwBwQAFHIGiTIUykK9PXlmsxdnzOL7nesOg8q\n3ncBEQzPtR3z8C35wAKhBUG1TOUg4hnuypd26HOkfxo49ZqC+b6/DnS/a8Te\n31IUJYatvuYRo6hmqJmbab9YpfEDU7cl/Y9lPDaAcSKcFSe4BxipPWZL9NRN\nb0vWO/IRkpsEn+dl/ytAQTJ6soIKbweCSSdhQ2Q+xq0NJ5tMA6/HpHNDkgWs\nR/zYROpQ7U9mkbFmZdZS3glBG6J3cTwVImO24mQPghnNvY2rqkskgvjfIVkA\nTWxqxrF2KHckAwiEzX1uzJpqgpqjyrIEbf/o6vwcQg6H+CCeCDCuBISzm8MD\nC1J4JiiWmThVsWpyhgEQxyOY6iE/qwxcR/oD3ggiT2Q877i763mtuy4gwPwl\n+pkpSv8/L1EWJczvMQFiklx0FQMMjd0MnShvc36/RAtK1LVW4jlEkwtSypHa\nv7qiF4XQ98NXjRYxG/p2VykNeMLNPAiFJ/kzwNW7uhpQRRTgC8Js068gxwVd\nglS1RCrA2vDdbcV4S6zb5ZRG82Icf9HJHL4Sf44lMJDOTBNT650uL2wdZ8CI\nyFDRNAsoow2kmh98z7lP+4v0KsMaIj5g7lC2UYSOuM4YldBZo/Z5cd1BvFzu\nsViq\r\n=Usdm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYc5coVggqETtPaK3dY5busVLkOWMiOMUsc7i0Vf+FuAiAGMqw8fv4DGV5KHDt9VbRSGNlMDXxaoCTmOlBaMarrvQ=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.10_1537958302504_0.7579270459558676"},"_hasShrinkwrap":false},"3.1.0-rc.11":{"name":"butter-toast","version":"3.1.0-rc.11","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.11","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-WM9LUi/YUugZ01GFlfUflW320/o3ATgnREGZPV52AtwuZY0rMZOVZxzNpPUJuJT8vNEVQQABrstANETJbDNCUg==","shasum":"4767232449da684233074015f206adf76b8756fa","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.11.tgz","fileCount":67,"unpackedSize":10193761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2IOCRA9TVsSAnZWagAAkCIP/20bspkYoSsZotEPeSJa\nfcdTmmTjBc+oc05yp+sLaMxMiYfgALm6t5dtPJBzzgqyVx1+zgs9ehkX20F4\nXpbB0ARsP5zZCK0+PugsPuuYcHjwu7eIRBuTN6kZr0koGg5T3AkHKHmyF7qX\nzQWxE26ilPbNNkzniQqPOjbxrC24J9YQiM4/VzWH9svx9qAPuO2P7Q7Jeu/g\nctpaLbged3JV2Eb9I3f3P5HHPIz4zbPVUD4lxhEV8AQ5IOoGT9n77miFA6Ib\nXI1q8Jk/Zn02XLcgvKwuLbMBHQHhLIa5QeVXa8PNAzJ0c2UVg8WwpOoyS9mz\nTFN7J48ZjgeBhydKollg3jWj/z/ObgfTHaZI33q4d+s5IbmclDH8gpLvlDsj\nxpnIcYB7toWtaXQQhsoQ+GClupBDPO6Bdg8HLYH530VcMvsAZT9LtXL6b/6b\n8SQixzZBKtE7diT62bYVPc4/39eD4jxqUECBCI7DcCm6RoTWtM+aECqi7HhT\nhdSKN67pb+qXNvXokoBBPxINVP/+97CM68Rjv6sv7JTS8rmUAfp2XgoNDegC\n4cHOQgPGpCOQqhIGXovshVFBqjCe2W+W0slkFPLyhLfcBg1BsY7c+P48XpZR\nbd7ScjwRAMYVZu8H/GIfv0fwbQ5WChhD3HupFvOuKu8xuj0CmcHVBIIhHgd9\nevPZ\r\n=xYV7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDf+N9wyvnW/alLBzBz6F2bIduCPKJ7NujIwz+832lCSgIhANhIcFpwwbJRHFuSHrpOF8f2pKhatariYcDyRzVTJd5/"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.11_1537958413493_0.4452976492205325"},"_hasShrinkwrap":false},"3.1.0-rc.12":{"name":"butter-toast","version":"3.1.0-rc.12","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.12","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-s6nE0hP1LP4ZIdudJ6C2BnhGMjFd9EFcgUhWtDaHLkUh1H2fixcdOGuQUZyTX9KiAxzrZeBYyZtL6vI8XJ6wxg==","shasum":"4edd39ca3da8b5cc71e8f5350ae235f6e5029c41","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.12.tgz","fileCount":67,"unpackedSize":10191480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2OhCRA9TVsSAnZWagAAX2kP/3d1A/Ar03KWq5hnKQs7\nWk+C4YiQMI1QWr18QAc4vPFsO16ycJx8/1XulaCiaQpBQag33loW7ubbVDzq\nAZ5jBMTSJwMC3SpGfEZFkvHdC7E2j3H6HOZO+/zRdlNfXfRLoFATag63/GRW\n2Py2uIr1Y/tzRcUV19N7wEHSOeaFYS9xM62+Dl1eU+hUposz9L3/mc6XUZEM\nPRPgbZvvKMYArPQYzSrVAYkih6AcVcoI7iap66F1NDRBkRdF/KD2iGIFDCq1\n8nYUkLBCWwLieXB+khE4yht2BV8UAhCTL80oJh3VRXEwP/kcK3EYTXZ72iBT\nFQSuNATNV5lgQV5cTfFHSC6cyF/fMn5zXqn7TWIT+mO2M59YD86zrpbK59ez\nwmiJl4MilbxbVEqsHIXgX4mjvRadCCaJABu19tJbbEhtL2jrhKZpuFbEh5Y1\nimyhIw6pNL9T5Gt3FugyX/TSn7AbDSoUpqhb4CT6sgzUaHGavnx/XnuPjk47\nusCN0AHfSgr5UX4TPb+yuqrg6kOTrgyW/Qbyd+Rqi7XuE8bxqws86TT27Q1X\nVlGKWnOE2aDmQLcdbSHI6t8YrQeFTwzK1GOBBJGlXwiK+DKr+Sd9lwmb9Cfr\nW7Hz8yMpeVVEIKcfXRh+ZHusJuHNidRzURMZrpATt3p0UwQltHbUtZj6K83E\n+EMa\r\n=+Bbr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHoqVOqjDCVbt1azUMlRO716aUxDLnA+ANQeDcPO3bmcAiBGV6KGiqf07DeEhiWuejCsPWUC1mI5BWfJSePUPotbFg=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.12_1537958816337_0.38998330353290633"},"_hasShrinkwrap":false},"3.1.0-rc.13":{"name":"butter-toast","version":"3.1.0-rc.13","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.13","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-EL5d3v0rHdEb4KzMfRopE0Is1K1/ppJKujDs1j1A9A1qrOe0OCpqut8gKi+IXNk0ZbSbB3pdWlkvx5G0REPrYg==","shasum":"c757e2c884dbf7de750c0ee250ecd81f0574f72a","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.13.tgz","fileCount":67,"unpackedSize":10191480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2X4CRA9TVsSAnZWagAAbVwP/RbW6T/uGKFJF0+N/qXn\nuXd7m9bULjdBuciWen7aEBQxI/gXbEsJ7l+UKAKHsz4dKetkvQMNqnhjkRYI\nyFVN1QWUgkJZHUg2IuJlfl5jtzQeqSUxTAYZE86Nyn25UK8sUjxKNIAZJakm\nqGnoAqm1ast0Zle1aVDR/3bBP4lDqYbbIuqsbZmhm19nbndjy0dJ6ZDt+PgE\nzXDjUecVlLTNr6lAwgZilg1NmWOmCz5V/3MxgEYDBx7njTuOnI5uafoEk4St\nEz1dw48dDw4H9bQL2CBivhQ/di1mPwyauSL7RbXWjj24nrrh/vrXy2KaQscX\nhQp9pkoBnBYySzCfll6aBDc6DVeNgWYsTba3DePRcmyHZbG4UFHCZXk/Ufll\nPyU+9esS3E/Gjh9ckTVCDylWXDzWh9rEhuaLory+h4/iy3qp2UKyQrttTiN/\nx+swhmK9vsHQnSxdNI3WDaQHcJaXYY6DUzJ6wSHDosA0nm0UfFS1m5SVKAIq\nKuJUejrnlvzAxEp3ZhGRnhqSAq09zhyEOipsZMe0uxXi2G7lLTNTQBesTQrF\nbgjVjMhpaK6b0xTRsvTFuAK7pkx+6Io8bmyigxQtiTdEqirq0V1oTQZWCKCO\nqQQfbTA2/z5V+8r71PclyBHALyegp64PThkwhInFMdP0J0ApoacLbhEt/dnX\nywi+\r\n=396j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD26WbTa4DcYujpCMz0vdDWdgwIdXO+u9BQvNgIeoCeuAIhAI0YvzbSBnbgeE2yEiVaL3pHw0AhWOY9mIUvgulczhf8"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.13_1537959415784_0.40203658331561276"},"_hasShrinkwrap":false},"3.1.0-rc.14":{"name":"butter-toast","version":"3.1.0-rc.14","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"7642972dea8889767aef88cd978ae4c255923935","_id":"butter-toast@3.1.0-rc.14","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-+O3H7/q03Yy7WbIxNgtWa5MAdmSdjWXxl8I7taTmSGPDtdIiUU5+alKOXsxTT+BOqd/6jJy45rDVfvU95eFDYg==","shasum":"d8b67a89c7a1bb8181d3b2e64eb74be313783716","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.14.tgz","fileCount":67,"unpackedSize":10191480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2kHCRA9TVsSAnZWagAA/GMP/i7Xs7TBw9Ivud15ICKM\n+K/oxdDftEz2d2meElo8mMtqZeAc6rC8g8fJZ8RCc0XGh2w1bsaE8Qfn9g+A\nv49nLPKR4QJsbOEHAlmuEkgAsIU/qjAh8gXNlSHo7AFnWimiRInlCwag7WVR\nslEjam5HwQENoBVamaGZjo8FUXg/EiwU/2g6bM+m7snZixcaWJ7xoRttaN0I\n+UMI6friyOICg7RbCXNXuLZ0+XApmT4YYvkEdt+yUZ5Wjcw8SqX1Nb5RMl8z\nZ8bsjfjz7e+uKxWFqowx6AZ1TJMALjsVQ0BdTkkKNqmMTjVZfn4IkqrSL2xU\nfj+L9NVVWeu3vByyaYkzfryy6St98h6cmlDvClHzjhCIl6CLgUPKqLyVY+Zl\nexQfW7GKZulMoB3PI8LzMztqKfb+Kecx892OueCVTiuV/tvn9gts0AjYNhgW\nNMuSXjIjzHB11xGANKt5G56BQfanrL1huz48PB9jLB4e1sa6QxCFmWreMAX5\nWOLyXu0DyLLO2yBdUevQ2a6tWJj6FkZ6y1Yg5smeGL9NeaIQQg+RXqKlLEf/\nDBNZXak8NGf37i8keo+uBsXn9ejOs8mAcWFID9PJWmgB3qxzJKB30tIivJy7\nGaXZchFnYAGHDvLJtknpbDbLyq2HSTF/57Pv/jnPDkeF88AkOWmv/EGcJxeS\nZ9Rg\r\n=Gppw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCy0n2483iMPgX6SV+B61Qa3i5eSkjdgWsVX9GptwcCQIgQvxwMadKew4N3KpAWzP29CSqj1cyqXOqRzeUtfByUMk="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.14_1537960198179_0.8720525121093443"},"_hasShrinkwrap":false},"3.1.0-rc.15":{"name":"butter-toast","version":"3.1.0-rc.15","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"929fa3b69680808835acdc1d02cd73835729e3ac","_id":"butter-toast@3.1.0-rc.15","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-PqYOsXsGaJciiDSmczpedYgSLrpWl3efa4kOL7xHL8oflHgo34vqrPTn0sVdahYKcIggGubDDBlsm787vjJM1A==","shasum":"16c35459e9ef57057cabc8d1194b39627e549afd","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.15.tgz","fileCount":67,"unpackedSize":10191480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2nnCRA9TVsSAnZWagAACfAQAJsQFupr/keUyVhXOhNX\nDJotrIry6dRGZxMjdjrwTgyn+CBU/X8KOZJNf3paeO7Zy9lq7bCmszR9hPd8\nhE5bJ4pA26GeCkWZsA2Rq6kGGGLahfdReDnG/k15oekBvRzzlL1exN4ueXKy\n91tTtRHD/K0/GAAMb6VYVY01tEa/Eb8AUlWFBwZaK3Ice1Hj5NoefsJ5Iz1b\ndlxTQpBnuNMfAc5m4Tpv3xq7gZ1BpuwpuXruvbBZ0Don4XMH6Y0LHyb/vg19\n2pjUW7IO06N14ajohJhbb8FGmSgyAt49IasDBjVNSG5Fy1ZCcCkfSmFF3jRZ\nSj+wWin4s2I3Bu7QXdBX9Mj7A0c7fSH8tE1WtZBRsp2XZF1xphk6WRRCIbi3\ngyrGmbc+ezM8h94rzIqglGoHfMwf7a7c2/Bm4xGBj2ytVMbc+VKmzj0w+Did\nZfxvUtR2pHbRPgPEmLfXO85jGlpQuArHsBgpEp2aeli5yx9C0lK0EMS3xn68\nkyiyiDz9GjTkwCAfhM5pp9oucbbXnr+mAS3J0zlfrwIwfYVE3xKTizdqb6fw\nFja+5c/lnpxUEqSiq55oakY/TM6m03HMTai0yq/mjaTJqvEvdL1XmAzQLmfx\nZ9pxEE1E0Oxdd8duhQv2A6PzRVK4JWTjJe4vJwM0763aNsWN1HWQS7pkXprl\nPWTO\r\n=Zlg2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdnC7/aDxk+XM2CrUKz4qjFNQpGrzFjIwSLFk9r0FDHQIhAN5KAwHSypwUUxoxbal5g1+A5kPVI4z1lvENN+YsY3ad"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.15_1537960422145_0.6761341496626683"},"_hasShrinkwrap":false},"3.1.0-rc.16":{"name":"butter-toast","version":"3.1.0-rc.16","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"63093f8e85e17436cbe8b89df69a5ae853fb2f46","_id":"butter-toast@3.1.0-rc.16","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-Ig9RA5IdlOILHxAaXezmyeEZ9jkXdk9/ehCWiJ+2M0c91+kAQnynDa0VbCen5yQCABmWZJS8a/Df9BBdcdMVsg==","shasum":"5d192d389be250711433d78fa716d37b80fc8e1d","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.16.tgz","fileCount":67,"unpackedSize":10191040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2rtCRA9TVsSAnZWagAAhUoP/1ntIGLPU5+mEYR8jzdx\nIlCIfLC6C/GvwYYv72DO1QHwUOZiUCwyI799hUmImghLtGTSP0E64YnT7/As\nv9SKYLIf7nx3YDk7Fs3sJ1Xp8LObSaosirNd6iLUv6glRU90t5KPiljkKmgs\nSQUq12jsqwCGCk0hhMqNIguCr0vHLZKshun/PzEk10Lgq6F1LNxMvmRBqGOi\nb1+VugynHAfhANKJyj63pTrIQX8O4XrymGCftKc5cV/Dxi+OlEBcvoC+yzJb\nCEqzyR2nlSLiGaZnTj5R1HKxXGY6faWBVOVTeTwoCS4A3A464c3czr6nH+nt\n9LkRrHQxliJFE748ElwOJYSMJGfIivhDPiAfYk6k3vkxKB4wUTsMYYGqbBQg\n9qx6GAf6LkMKsFLNs82cQF/W8m54ZAKBLYQdj3WJAZ1iqtx21CcSVKTwkWNT\n84AL18CAKpJI8zftX/kbGL5mjtJMcLRSoe0KM2VkNLLsOS6P0pclYx2CokmL\nP8ZaZObJkQL1evkQTjRxk26VYNnTckLlGz+hvimGgTm5IihIKBr5S5Y4MP0H\nMIWOqpeyUmnoxQTucAWWh+0iy/+Mc/hCcMEzPbhKcXgawD1vOXAXcSiK2/gL\nPQQMnW+xNBjp6G60uIUf8iONKk2l9fKnYbuUwmnQTO++r/S7HCXqEIBzThgT\n1zJr\r\n=nq+g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxz9D5gIqeD8NeRDs9YL1QcUBut3b4vC7xuwOn/ghe/AiAlB+97gwvHIpBnbQpNht8jbM50N4BIXlxp+SkVBi8J3g=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.16_1537960684886_0.5088806220762765"},"_hasShrinkwrap":false},"3.1.0-rc.17":{"name":"butter-toast","version":"3.1.0-rc.17","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"08596938da812d994e4a4b2652792bbe00ff5b32","_id":"butter-toast@3.1.0-rc.17","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-tZBteLgi+GU0axoIK8B9oQruvBw25f4KelWaw4HvuJJGNA00xmphVh/7gCwF0ZgLi1HKiVSsShx+VmFa52/EqA==","shasum":"a38d4f00144334cccbebf87c6e29e320f319ed02","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.17.tgz","fileCount":67,"unpackedSize":10207401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2+DCRA9TVsSAnZWagAAt1IQAJyHDps2tgCBrAMPyHo2\no0bPhW3XTAyklapz897c759tBlxzJHun+OKu61PKKolie4O7dfc69PxoaMv9\njHI/VYP4K2xEslFNvkZ9EoH+1Wq1r2zAyYEDTeZRqeXQglQyiJcVzqWHOgHD\n3C6RUvo7El9786Nz4kdNDNMrdrom5DNsWVkoxnWd4aInRILDuN9R/zb9tM9P\niC0Z/gwkf0AfKol0hgE1B70mjdZLO5PBiq1SEwqMI9QFUY4HYQrUwhF9njiu\niKUspwhHTEhJEecm/93EVJ0sa8MxV9pX9mIQwZtBlHb+IK4CpAO55ok3NbOM\n/vta37G77zTMnHEdmrACjCll9SXXpdDOHPiYTVd0gBu0AR9E9bkMnrOR05V0\nlpBE5ee+k1B18wglB1CCkD3GPQG1zZAMfBJSvabCYszgXaTQolKAHz1FLzU8\naUpZ+/e9TtVgsokQe0ufp5LhA9a2aYXZ/5q5obUEN8BjRW0/9f60FfTNXbTT\nAZKm8MOTEwhEowJDvDkAyCguXDSvROx2apWm0Q6ypgcNk8Og0R/jI0vR7biX\nEBN883IuBnBeDda6iwbO13szhIZfHynMdGgkFRGqjCtrMMSi4aZg3aVUiljX\ntJNcKtuDihWo66kELzpcTI6pnhpyJ1Gdr+V3+jijYn8bDQQ366NC5ZJKzxuY\nMhOb\r\n=8GZU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDM7ZuYM9fJgGGVsSh4lNOBKf2MNAr6RtpqZDIoou7OhAIgAQ2O+eiaQ3GOvTeQrUJpaDEsh2nkndlYoFmRYhearj0="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.17_1537961857762_0.17026910625974145"},"_hasShrinkwrap":false},"3.1.0-rc.18":{"name":"butter-toast","version":"3.1.0-rc.18","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build-webpack","build:noconflict":"NO_CONFLICT=true npm run build-webpack","build-webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"08596938da812d994e4a4b2652792bbe00ff5b32","_id":"butter-toast@3.1.0-rc.18","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-jND8wDkWur/ZZdrHdVWqiShwWEKHIU3VmQHjVDHPKlntxCPUbpX9mwOjRvnCLUNZ/gogJp7QyBsAFmzfzyvFDg==","shasum":"dd0327b2d8971d4c7fc41b3219bdbe68208bfdc4","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.18.tgz","fileCount":67,"unpackedSize":10215053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq3MXCRA9TVsSAnZWagAAEtkP/0Uj+kXKXEpuZbgAkFyp\nvgyVpUfgmGEVr7SjU830IzAUDHSo2but+WNJRkD5wseb4EYfltJ5jc+xV6ex\nTg5pNhjHfFm+A3650VIaKbEJ/fuP6s7XhadXcZqH1Q9oFdsDXus/oWBkvjXS\nP5nP7wmBr1QQRhJguYgmz5p5WWq1+uN2wG7AMJjga/3QoJEzAxq9rtIcrUew\n9d3bYGNQSlT/uSkH8tvDdeFYtid/dgpbLguFRrwOP+QZKFDEodTIqcKjRpbn\nVx9C1ui+r4MXcqExozwSZNZQRLUqLbNvLvJLH6NfSUCaM9F5hOeB60976Hhn\nErLdVLRoF/jugxH6ipNkz7ICl0E+/e5tE71UYcJvrOoM99QBovuKIQXSgqJT\nBpYNkzRh9iVC6IIeJYUpsiM6OjDt4SFE+aF7KfUxNcT5tG/UroIXRL5ghQDQ\n/RKLNX3pXFuToz3mJUUvPfIMtp2DHg20InCWfyPlFOtPj9QeLXt10atKOY2D\nigqeTMhEFcTlHJDaxG5NtImO63gy4L2T+jsUoWyR9R16T3AB+gIrcBpLnK6g\naAPMqoKGBq+lKfcyc/JgQmbqC0J7Pc8g5oH8ehMQOyoTxd5iPRLxh0QzmJic\n1Wz+ri/ivdUt3Jya7pvX17IXdSVeVXy/nrC6xo3tP7yjq0+bh8iZsRV+12qE\nWncz\r\n=o4dj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7xhc4pkBsH9l7qNDtP+IbIL9RP+ifgJ9GsYJpX2yMFAIhAOnRVphvkIio3R/Xs0R7P8TqY2ExsszaaSINE3pfB0iA"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.18_1537962774825_0.38982604091212947"},"_hasShrinkwrap":false},"3.1.0-rc.19":{"name":"butter-toast","version":"3.1.0-rc.19","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"d137570c603893ac6f4be0036cc19f8c547709e4","_id":"butter-toast@3.1.0-rc.19","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-FEQp9A/j5gOD0fSRhTQjsO0sLeV1GOxcfulOmdspmJsetWDm5NxzEGdvm5JWxCd/+3o1nfkoIDZHEPOML3Fu/w==","shasum":"ecf07281efee0b98ebb1af1a1af76af5c181c50d","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0-rc.19.tgz","fileCount":67,"unpackedSize":10215074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq3a5CRA9TVsSAnZWagAATrEP/Rho0eWwTXz9UCWy7N9Q\nJlmXh7DVdObOK+/82vurS/fwWp8tZUaKYbtER5D8EzM5VoSI2mlExRxqJef0\nhKVWvitGS6+f6R7LiDJGkrm6hoXKsmhPx7yGuCuOPr86cd1SSKQ6ZzwZbCky\nYCYuOwYPxTo0Pu1ztQ/JVRWp5MusjM6WHpaUGGpRdNTUt/tnSq8YeiHShfqO\nLWeaUGLQCzsso60bfj6GIayAUGc8bwm0kH3B6xDM//g8itJ98ZoKwYU2CEFO\nqawzeX4D1FpQSa3/Jl+hodWJr4Opjt+0oeFARVH6UuvlacAUDd91NWaN248s\nROwwQRrqctJELHRhu3t21a/e7Xy/j4TWOfBflds7sH9pWjwanvNIMKoCgS/O\nwsrxarajc586NzF0+FvGfIh4NB6J2qteIrZKEJxCaRqZ8GT/Vlt91UIzu8zS\nv2qrOIUhMpQpFFDwelJDVliqH6uqGiPsiuxrvVMPpkibJ3jhjYjl4nKu4/Xa\nZab5+2gmszGHUx8LFQM0+sdbpfDEmoQU3NzRNtDDl9HXvU9OvgRZRUI1HNrw\nwSzv+e08llRjnkDf4Z6QT4NyQgOEWZ7ewVH5bAbPPwHaM5Mh63hOMMr/b+4F\nU1Op7Hzhuj6csXsA1qlxqxKILw0EvXOVPg/i2UQlslo5eu5YCgI6xr4Uc4aQ\nnDud\r\n=ECID\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE08/LsnrKdqtzsHQnMluM7tFSsYpHdNus7oq6G5ZNOIAiEAx2N7NoMKRK9frOk8av46QzjeV0k1JkJGnL3uVLl3FtY="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0-rc.19_1537963704907_0.9026586195008166"},"_hasShrinkwrap":false},"3.1.0":{"name":"butter-toast","version":"3.1.0","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.0.0"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.1.0","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-alpha.22","@storybook/addons":"^4.0.0-alpha.22","@storybook/react":"^4.0.0-alpha.22","babel-core":"^7.0.0-bridge.0","babel-eslint":"^9.0.0","babel-jest":"^23.6.0","babel-loader":"^8.0.2","babel-plugin-styled-components":"^1.7.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","enzyme-to-json":"^3.3.4","eslint":"^5.6.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^6.0.2","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.0.3","styled-components":"^3.4.9","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"gitHead":"bc17d137da1805ff3831b1db52ab81fcb3753344","_id":"butter-toast@3.1.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-Fjg9vkDfIPy14BXCsToOryKe+w78LYgixWA3kXIbofBmp0qWpME4ZUV3Ziu6V9SlI7Ts/H0razwmUB+3A2TS1g==","shasum":"c506598c490e363701676087ec31ba3cc613f8a9","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.0.tgz","fileCount":47,"unpackedSize":6843814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq3qHCRA9TVsSAnZWagAAs6cQAJsomh+7G6AfuaVuD45X\nY1qaC+P51ZLM3wd/nEIgMD0zBXr86l+nubcP0oxkR7baiONmwnRjIRY2wUB8\nXitX9bCM5x+GaxjOjDpjUNnWc13d1AjCucmXKbd12EZ1QtwdnOJTudErJWuM\nozdHQ79KvUMojvcDE60g6eEZchAebmO7Yk7tM5RMM4M1f5+kXjB8BuCN+8Ih\neAx+El9wRWq5Y/fHCD1Pgh2pxyB2paY87gO83rwYwL8xibBbmohCmrfeLFvj\nhhPnkR0IdteI8XIUPliXIfywT9zyw5heDVNYN6qNgJ7/luJ0wU8jvgJgma2a\nPPaVZXJgIBYNvEhgwLKNKXhDt7XX2Q+6PT99xlz8HFts4b+k77rssxxY78Ab\nNKHtZScZiZyveTPVFgx90JG2/YXad1dWJkjJsB3kmxgXeTAeez/p+nvWpayR\nYRjZXNrce8/o2dkOw5aSz9GMghZlesH68gBhVln2kYq7EMMnkiwE5aO2QfO7\nR5axubPJYTWljICFBQdbf0PjmxjqtgzQ3MHWjpdSwAWr5qy3jS1zNDlYWmqq\nCC1stdA0Ikt0VXwUU8vfh1zdeOAmI6Thm23miEpsEA4HTTjf3q/2kZkEfg7N\noofwK+OX3uqDdjuYL0+o5ARGuzX0I8JKq9PoJH4O4g2ZE7SbhP/79UhU7f8H\n7dq0\r\n=1pUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJbKjPc8QKYEKKAICmw3kv+FWm2oEFjkCW9iTezhFA+AiEArfOvFJENVFsIDEZ4wGmoD+IqpkKfbf9y71ynvLYee8k="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.0_1537964678277_0.5839187168350568"},"_hasShrinkwrap":false},"3.1.1-rc.1":{"name":"butter-toast","version":"3.1.1-rc.1","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.1.2"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-rc.1","@storybook/addons":"^4.0.0-rc.1","@storybook/react":"^4.0.0-rc.1","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-loader":"^8.0.4","babel-plugin-styled-components":"^1.8.0","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","enzyme-to-json":"^3.3.4","eslint":"^5.7.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^7.0.0","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.2.0","styled-components":"^4.0.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `nameSpace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_BOTTOM\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `nameSpace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` | ` ` | Y | Overrides the tray's default timeout for the current toast.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","readmeFilename":"README.md","gitHead":"8658fc53dbd2b64e017c490d0182a4f683431109","_id":"butter-toast@3.1.1-rc.1","_npmVersion":"6.3.0","_nodeVersion":"8.9.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-TnJReUIg4/2SsPDK86d7PnVhdeKx/kDKTQx/8w+pIPKE452vgpG0ZCVEkewd8O5GHhN+mPssxfBJcv/Q/ZgeMw==","shasum":"cac196d08866971bec67ea099dc75c419f17337c","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.1-rc.1.tgz","fileCount":67,"unpackedSize":10074210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyPnxCRA9TVsSAnZWagAARC8P/jPSpGM76Q4cSx5bwdqM\n4t9Y8zhtBdnqm4OxgsUKQPVIMQFJHHvMcEvmNlXDi2kkIcLe+TgbLdhGLlOa\nUth8XXFAsCUlyYaWfzBe1lv1KfF4hM60/jfbe1KDHvSmtNPk4BfQViQUJ8py\nLzyfmYSSMGmuX+izyjvAl/+lc9R6lDf6OBasxelSInLYzkomdB9tHRdzQIle\nXZTz9PdNSinm+DUTSsI9bBpL1Wgjr5exWsPDzRU9aP/or3APMnH4T8ugpRh8\n8CZe5L2oD2Cl01A6qeUdyIRBO9x96eEqKQT+/qNFyPxcFgIDk9FmoL8wfxCs\nVY12f9pu72BL0fH+eCOV7dTGOPA5KYgvD7VsE0+zKrfwDNfAd3GtQUJFmZ7H\nRON2iSZCyWDJxfJTsMBoiPuMn34l3RyeQ9MDemF0mmc5QyXCM2ci+IM+0tnA\no36LVZmwnFDFlbZ+mWGDkBoQJCzjKo8l06dilTXEg26BUEdcmuuaI9A8TNMb\ngnhsevJJ1TmcK1cnYZ6zFmHo/9RqQojjQWg3HD2jti10l7v2BIVEoimCbkJ5\nj8ES26FH50z3euGAkNfCyepZBk041B4dvaObZkPMX23wQZx5e8ElcYx1+fMh\npqOljGyDBsCzVkeN4wSDPJtZ1bHoIAzdNGz3fZaclvGr6H+pF59AsTe89Enq\nvZlW\r\n=gWU8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/8HaJ/bIpDLcoBmks10qBGdJ33WCm1/T36pjAVSGjGQIgU16BLNRlLsO0nYUwWf0GJ/Evys2f92T/6uu5yahTtP8="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.1-rc.1_1539897840675_0.49730251215108345"},"_hasShrinkwrap":false},"3.1.1":{"name":"butter-toast","version":"3.1.1","description":"Smooth toast notifications for react apps","main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.1.2"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-rc.1","@storybook/addons":"^4.0.0-rc.1","@storybook/react":"^4.0.0-rc.1","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-loader":"^8.0.4","babel-plugin-styled-components":"^1.8.0","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","enzyme-to-json":"^3.3.4","eslint":"^5.7.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^7.0.0","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.2.0","styled-components":"^4.0.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"gitHead":"72035e5f4cfccc287f6795c67a34dddb7fbae597","_id":"butter-toast@3.1.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-hAcKPyC0Rr0ir5STYN/IWxYx7SvtGnFM0zMvvqRs+rfMnA2wAt4xduc/o1tn9cKfKXc1VbP103B3Zb/H2ll+Dg==","shasum":"b0133475be131c75e21280a98474560827d0cf00","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.1.tgz","fileCount":47,"unpackedSize":6702951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyPt4CRA9TVsSAnZWagAArxkP+gN+Ic2CgPgzLv0TGBLD\nlP5RRqHlGgiE8ZXXz+G54W6874Pboof995fJN1IG0iexrWoFbfkCfstk4WxQ\n9jPT365g6n5LaoUAGlL1zI0Xo4ndmewCAwCqEnioMUuqOohzhlY0LN73VUnM\nEyAMuZqmz/sT+6+CCwPgWpeH+0E1Gk8ZP0A1F+dI4+CMEFGXoUjCLcbNRmMj\nBarvifiLo1UD1J5SNf3V728g36drLZSl322iXBsveqPiBtNl/Mdzau7Y5HdN\nXNuqM/Z6S2hElWxuGv+csxbppKCB6U+dk6PitZxu23mQQAh7hnsVHXbhDlEP\nDVeonxtJt0kxYh8v4l+b0BIa6Mr+68njNTucWlhaLNqoe1qcpcl1xagkCdjJ\n5fUOHLcXzNC+55JtUizAVMUnw17Ktpg4dr4zKfTKjgvG9QtKsPGpsdxUDiwQ\nqwYoIH5dcNG/C3rW6aTavN4eTmr9+xU8OlBlAWgJXd/Ji1HVpi/8TdxhJZiw\nyWKC9wOmPbEz6YKbZh7CL2+5rM4KBHdxCNkenGNPEW2z7r/23lRqaa9HkJlj\ntW48+hVAwWmsozncSnwcOpq8JgOSYReCqVNWpBdq2Kax0P7GT7ymqR+v/2S1\nim7pDSXWwMoiBXruNHf6DTsy91wY4r185cI/1cPx688TmkhDQlGJwdAoDwtX\nemkR\r\n=U71O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7sas0hKIUsV6orsy7LDTSC8LXuy6pfsaVzKiGbV67SwIhAII2rg0FBi9MPZ37K07ZH4apDi+HGrkVPya003CUBqrf"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.1_1539898230917_0.7159727487908354"},"_hasShrinkwrap":false},"3.1.2":{"name":"butter-toast","version":"3.1.2","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.1.2"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-rc.1","@storybook/addons":"^4.0.0-rc.1","@storybook/react":"^4.0.0-rc.1","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-loader":"^8.0.4","babel-plugin-styled-components":"^1.8.0","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","enzyme-to-json":"^3.3.4","eslint":"^5.7.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^7.0.0","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.2.0","styled-components":"^4.0.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"gitHead":"93ff59c344eaa242a2cd57221cd4d1426c65c44b","_id":"butter-toast@3.1.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-SasmSvTRytIPFbzfj8Ue1/5SwFaCrB6p232yhe1VbxST2GJF18CpY0JROceYKsaRUVZETCnStqTH0+bwurqH6Q==","shasum":"7395e8e609d53a97681ed69864a5658e51d42370","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.2.tgz","fileCount":47,"unpackedSize":6703145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbycbCCRA9TVsSAnZWagAAK3UP/11RA1UKD/Zp8tSAuGtv\nM2TrhNr9AM+OHudkTr84kgPF+7lp+qmh6etAQ9V08b/mZ8w0mEI7Hd7e+bl4\nCOvR3iVrrAC0igrA4PzP6dDnp4JAQBjQHiDmoO5Pzh/brIaR5qPIHaSSHtei\nxwWYrTAwHPAEGRUn3EiSAAtddvB9qGTAJN/g6ZlFoOy63VOtKxlLX9/SUV/e\nMNXKlle/C6GDYY967x8YINBHTVrPzwEOexFpQ70/oOb802JZ35LGzs8zGAco\ndURfSHkN24NkC//DmI1zkSWdneSBL4urSO711P5+MsS1+EXJrfdvYdJdmN9t\ncE5B2HYyIk+pQICpxGB+E3PTIVzbhK64G2ZmeZmP2E/F835mk+rA5RxorNac\nssNjSHZZ48XeXpm1Bdug+oROojNXayKUNem4BEUkcZ65gLGguMOJ1OuaBe0r\ndjNavyWK8zFkCP83ZfnuX/kZ95nDPx4tkChp5rJ9mTz97ANN7xHQ9i0zIZQO\nF+1vSTxJxGOAYv1mrbO0kl3A7/LufLTfsa+CspOWY0y0Jb+XX6Xfvmaymc2l\nkTfQHchQpz/YA4QB3VQmJVaxhMmHPuMOPas04wN+Ywa2mB1ZP6ypOQpa+DFG\nkO1U2vCwwosFN9il2Q+OzxV3BKgHQQ4X+l0Lx5dKWirjmQYNTsCcfjbX6cvE\nhJDX\r\n=DgmS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHxHa0BN/pUWKTKenTvVYBQ94uw2LkobNKgilDdoUSkQCIQD+DceZfPHR8heRArlwEnlpbBQADYHF6Bo68Vp2w4DPww=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.2_1539950273743_0.46373677040868433"},"_hasShrinkwrap":false},"3.1.3":{"name":"butter-toast","version":"3.1.3","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.1.2"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-rc.1","@storybook/addons":"^4.0.0-rc.1","@storybook/react":"^4.0.0-rc.1","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-loader":"^8.0.4","babel-plugin-styled-components":"^1.8.0","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","enzyme-to-json":"^3.3.4","eslint":"^5.7.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^7.0.0","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.2.0","styled-components":"^4.0.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"gitHead":"439fe3d3492b328e8d00e3573f586dcec39247dc","_id":"butter-toast@3.1.3","_npmVersion":"6.4.1","_nodeVersion":"8.13.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-wR7R+VesvSi0E1z4qA7NEYl+vQ89xpXSsWfgGPNuH8RFkFCGhJzcsA1BAxhNDdclAEw5cibuoM8N1l47YQmfPQ==","shasum":"a1306413f78a80d32b6e3e40d68224e139bd8ca2","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.1.3.tgz","fileCount":47,"unpackedSize":6705545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9ZL9CRA9TVsSAnZWagAAPcoQAJzEw8uq8jV46bUGcMbo\ncwBwNp32mreaf7eJ9pYqwxzEvaUeNsrkPSwk0wDt3lFfciqed1C9mUoG6EdW\nEzdgWjlqHfhLKVPKywz+7wfeZmxGrsaV/9zTybocl5zd3yCeyzoMn/xwIUSs\nOruX+M/81I6t2B3nRi2O7XRuvgUJ2+4ysDtWHyxTXmd6B12RXUDGlHwK5c6t\ns7mOmWGAZXk8QUbAnJLbTplnxAKTbxswNxOdj4B95Ukc45meq8URkgGtlGDR\nYtEytdfWzjluXi/dTnKUyhBYmpEV1+M9oUdPzLFhjKCaWmf1kP7eZiPx/YSx\nRrmZnzqbcqKc9kGJfbIQguJkmK95HBM3m8R4rEps8j/e6Ux2RIG1DhRglLOz\nUe/pXHv1/H2dxQ105g1sikt2F+wjAXMi465RDSar2QYiF/gSZJtmFI4UxnQC\nowzgSlrA2CMV9YKAECmAMODAJrxpwjsy5dHTQ5Xlelcfyf7vQSTsxPQR9D6n\nod88V8EP863yWvpqb+mlu5H+LJPETLRs+fmMsSOBTsNjTIC5uIFQ4JBeQBW+\nSOUbJfKzOdUs+AHGov8JibuIOYuLWtSNH2OeJcofR977bugGu5x6QQSi93Ti\nETRxATc8Mzfr7RLC0hR0jT3ZV93Au21spNxsyUUZsa7uXIJ4UROkLh0BUvpc\nTCF2\r\n=5ltl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSvQl7YGsUODtJMJ4LmXFZcdH++3acz+odGOMGjJlw6gIhAJrqxCOk1eUUF+/Da7kNNjcX/VzOWxBpLSuYURjhD5J6"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.1.3_1542820603942_0.7712132174652242"},"_hasShrinkwrap":false},"3.2.0":{"name":"butter-toast","version":"3.2.0","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.1.2"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-rc.1","@storybook/addons":"^4.0.0-rc.1","@storybook/react":"^4.0.0-rc.1","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-loader":"^8.0.4","babel-plugin-styled-components":"^1.8.0","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","enzyme-to-json":"^3.3.4","eslint":"^5.7.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^7.0.0","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.2.0","styled-components":"^4.0.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"gitHead":"0326313675c3b150c80d5eea221248f446f83b2a","_id":"butter-toast@3.2.0","_npmVersion":"6.4.1","_nodeVersion":"8.14.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-faZBVj/7bfwdM34Rktwy6x1WQowhknNklw2Z6LYyssejmgPzJrfttSgLnDs0y+32WVzNZv6F6hznu73hZVjtdA==","shasum":"764c293edfc60e465aa7d209973f001ecd37a75b","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.2.0.tgz","fileCount":48,"unpackedSize":6696271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEl5QCRA9TVsSAnZWagAAfx8P/0NqSWoulwemN65Uw8Rw\nlKADF8MS1KKayXgQ88lSOCutybjVuebS5axsPz7pq8HggmUbZ2NWO2oMSewE\nnvi8T2dxmr2348uoFPAiGxtYjlIu8xZoW1C0SBVLdVYopsHAOQI7U30qGASy\niwGpFJkB5amOKjSchbiItITyCw8CgfffqhDM+FqayQL/A8vPRcWe4uZGoh+W\ndZwZw70RupgyGU9e379tqYWvJlULVjR2cWVs2907NMaww++jKVae4zwWlkEY\nuaWsERdI17PpqGngjrVrmzt54Xe9KNkD99Dd3dthua/ZRN9tcWEB5YO/tr41\n7IUj2JSdPSM1A6lTTlOoBlXZm7I7MVkrDHv1vo+s+a8Wth9Lsa1e2l9rqvua\nHVQu+NXsT3tGqN3M/Beew8tfKlwWQw0ebae7ThBUZFOVfHUZeQn+jq+XDKVg\n1k5nMWwFiedyaLmU3qfr5QuaiRAUC1MlxrKLpSmAKqXsT2nONNWhlAeF3LiO\nAYeZl0Ci3YYztFL1it+J7v1+93CRjNMYX8VoCHn3mM2iYKpaIrgaan/C68n4\nTYtYgBm8Otpt6frEruHLdXhlMcESRf/y2Qw3HdzNWaRPzboFdKvVeZTR6bI7\nmKi7QFkPuM0aeZ5S+bHDjU0TTsZZSEdjVbDxMA9/rrdn8J5E2T/ib5egIpv8\ngwly\r\n=+Sat\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHieWg/qrV41AaOjXeR1Lhotd2ExG7t4WvjzHEojmWXtAiBRmrg77bKbYaKZq669bZqPZV/MRLLogcUm/zhEgoEsdQ=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.2.0_1544707663501_0.1590591930412879"},"_hasShrinkwrap":false},"3.2.1":{"name":"butter-toast","version":"3.2.1","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.1.2"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.0.0","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"1.0.0","@storybook/addon-actions":"^4.0.0-rc.1","@storybook/addons":"^4.0.0-rc.1","@storybook/react":"^4.0.0-rc.1","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-loader":"^8.0.4","babel-plugin-styled-components":"^1.8.0","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","enzyme-to-json":"^3.3.4","eslint":"^5.7.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.10.0","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^23.6.0","jest-enzyme":"^7.0.0","lodash":"^4.17.11","prop-types":"^15.6.2","react":"^16.5.2","react-dom":"^16.5.2","polished":"^2.2.0","styled-components":"^4.0.2","react-test-renderer":"^16.5.2","webpack":"^4.19.1","webpack-cli":"^3.1.0"},"gitHead":"7a714e514786e04d43d2808f61f77b1d20f71c28","_id":"butter-toast@3.2.1","_npmVersion":"6.4.1","_nodeVersion":"8.14.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-bYNMVrVD6Z7pzfLxVI8nNysbEtpairhtNxYdFI+rm6MwfW5NaVWUIrPE97NBPg2mL85g8fKGKy6zxqB1iuDGBw==","shasum":"ee4510ce4c832b8a69eb583b43234341e4cd8061","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.2.1.tgz","fileCount":49,"unpackedSize":6703309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEsk4CRA9TVsSAnZWagAAZooP/RjMt9bWjasJv2ZjaF80\nP6kghLPye12/Z+acAR1IjQphqNp9+8FhSOaILE1uE/BG3UtDc7pTJQJgw67Z\nzBw1JNsrgzzSnDRVStTOVzQN5bDgXIXfUC64ntdNJ7ZrrJX9oJa2Uz29MKFa\n8yUlMUWZ9GSVQSnT3qCi7wC2EWWe1frzqVH0XagAm0izMSnro/WxXvnXI23A\nh8yBnBeSjbofHYJ+udkyjBZSvvOnsZQvwjZg6Vp1k9szgoSrCJ9pUK/p9yX0\nTy5JQXXfts9+CIyNN0dpQM+DWTzx4PF93gdKB733hNGhHuwcPa9dhrcMfSkC\nPJoXcX1vhphNuDknhVe+fTpbTkOS0L+2USbndsflgNHXqkxFfFj/7M4/ZusX\n4ivkP0sKwC+25cU2Qf6vin2Z2aADHykXmOXAbJ2Xrr3F3DIcc3qKCdPP1EnF\ncDkRiyWyh4AjeoI2wXhZVNGLb9K2KfSUdh+euqNEWySM+ZahwZpHgvCE7dy/\nc+JiKkCtiXQLaY03LtccWXzdKI6GvaKWLxsH9+I+phuXxMsdd5NCwyu+vOqj\nSTueITdxuDXjGVz/XvZb19iBUrCmDCzE+Rn/1HZFI0p4fjkwjZeTRSlW7604\nRlVT9gFvsZwiU+GgLIgFJq53mwfFeVQlrBiGw+qVrGRQmHjH3zuW3B+R8p5L\nfxgS\r\n=3oCI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICexUXZUEfRumWhimfM0NJl0Ok31kQmrE+6LgsIhvD8AAiEA/9uN7ou6I2/foQxg/2vM7BMEhSzfvKjdFJdhXQ72udk="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.2.1_1544735031660_0.18103079480427953"},"_hasShrinkwrap":false},"3.2.2":{"name":"butter-toast","version":"3.2.2","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.3.1"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"^2.0.1","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@storybook/addon-actions":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"^6.26.3","babel-eslint":"^10.0.1","babel-jest":"^24.0.0","babel-loader":"^8.0.5","babel-plugin-styled-components":"^1.10.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.8.0","enzyme-to-json":"^3.3.5","eslint":"^5.13.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.12.4","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^24.0.0","jest-enzyme":"^7.0.1","lodash":"^4.17.11","polished":"^2.3.3","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0","react-test-renderer":"^16.7.0","styled-components":"^4.1.3","terser":"^3.14.1","terser-webpack-plugin":"^1.2.1","webpack":"^4.29.0","webpack-cli":"^3.2.1"},"gitHead":"e2db2c016c5c7c2020e51491d28e47f0cf5cd12d","_id":"butter-toast@3.2.2","_npmVersion":"6.4.1","_nodeVersion":"8.15.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-mx/mjdwmKCxE2KegkyN28yNqp1HS7Lh29PWxNI7BF/9DKRPlzZNDDTQIhgX/Bue3AFuy307Fmu8XGfcgggppBg==","shasum":"cba300e0f1b252a1384090b1088b8d6c57a7aeb3","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.2.2.tgz","fileCount":45,"unpackedSize":5709921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcV295CRA9TVsSAnZWagAAObsP/1i2PZnw2DFSSsS+ywgL\nfUW69Ii26Z4U7MRrX6Vso7GbFGk5veZbNhMS9k8TkP/OQyPbR4pognBJbsaz\nAz2BDhL595yltfJ0+AJO18iyBS/NMvfvSq/8myg8PIcJcN7nrzGVZbx26Shc\n5SCfkXNt1MQWU8WHG4rs/ZzhQhmjvamfaLiYlrPlF1O61K23NuupAgd6Vspp\nxGJ45U4VzizDPYs6qFmmUtUJqZseyVVXSCBW4oc5Kbum/t1+BtlBkA1ANrpr\n9fKeZaN8KXDL00eNKTG+zSF/xoaBaglxUOazZuFrLmU7PuA5d1Tbsqz2VMbF\njAbhC57IH2CUE+U/FrXj9GzZNNZSRNfgPZlBCLnnTQ8mqchOSZU1/2HOMha3\nGb3dM2PkgctRBHug0uE09vWutMqYww+LYP7zS+oSMTuviuHADNB5KSjxTbQN\nlCm/QpQeNmdLmH8orfd5QSHelbno6K7Jt14F5qCWshmm2/rbmU+Y+a6xvAhY\nh55M46rtL6jU+wNRJ9EjdRMD0XnRpQRfbpXnSCo9aPF2F+8v+py3jZY7qnHj\n82knK+k5cKMROxRlr0rFQWE1hYfPsIttEpZ0Ya6B085Gxg8EwgAa9sDfJNdU\ns/9WvWxW689sZXvhmPexmMB6EQ0Z/+TqlM2sVZwyyqxz70fOj9NHzxsjq7WM\nhyW9\r\n=0IFq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjLMeHT1S7PoyVw/wdoZPm9HJw+hHDvuNarAAJGia/DAiEAw8zFvuHXrR92JYY3+ApLlLmmax1cKuSVCMHROShSLak="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.2.2_1549234040787_0.2347674326114133"},"_hasShrinkwrap":false},"3.3.0":{"name":"butter-toast","version":"3.3.0","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.3.1"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"^2.0.1","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@storybook/addon-actions":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"^6.26.3","babel-eslint":"^10.0.1","babel-jest":"^24.0.0","babel-loader":"^8.0.5","babel-plugin-styled-components":"^1.10.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.8.0","enzyme-to-json":"^3.3.5","eslint":"^5.13.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.12.4","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^24.0.0","jest-enzyme":"^7.0.1","lodash":"^4.17.11","polished":"^2.3.3","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0","react-test-renderer":"^16.7.0","styled-components":"^4.1.3","terser":"^3.14.1","terser-webpack-plugin":"^1.2.1","webpack":"^4.29.0","webpack-cli":"^3.2.1"},"gitHead":"4fd3093379a616f3578a4196d586f9554cc2fb17","_id":"butter-toast@3.3.0","_npmVersion":"6.4.1","_nodeVersion":"8.15.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-m/3Zdmk9fPlCobBygGNkrflszo9d7T3//3Wsffwd1ffHDCSPWnV/Sse0MqM8KP/s1SSdLRTRou3KtMv+plOfkg==","shasum":"0cee8275915a2815e4a6f71235a1f961884fdb6a","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.3.0.tgz","fileCount":45,"unpackedSize":5710723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcglgCCRA9TVsSAnZWagAA0NQP/2JPWdwdJkU5ukT7YpSU\nccl97fleIZ2lElwN5+paCNorvc/NgL99f4+QtoEfRCfVOg+Q/4lP068gi+x2\nY9FeRFJTRDaX1i/UxqveOq89+iWgqKDO5wpPZqQLWTF9uBvBASWoG+J552Ac\nSGSfb6Pc10UHzosKDZuLmjf0c/QR0J2OQzewIlnGq3PIfFyxDeBYxrAqI5GE\n/vOgW7g9Q6PTzrhHyn3npHAwSFWwMC8Av5KHqJn7qbe5fUGxgQi3iXaKT5c5\nIez/hlQqead78mSMjThkD2Y6RRl8hc3yv6bmZTwBm6zIgjnwarBo3x9X54KE\nxEqc9iEDYnfQaU7bT3pdzDOyYKMVDqb9xd89ltDR1QXFbxL+KJl1RETVQi0k\n12v2B8pYhFX6b48rIMiLumtHa9StfpTWsWr7bCHlKwMheFUcih0d1E5uGKyr\nkoh8NGEJ4Jwp7UoZ0MCeqccLwy41C41e411m/Fb/K3Up2k6ppn0rHL9rFDOI\nQuZdls9aJ8B2sQwy5bTFVm/06hDefQKrlbZZrrNgPk9saRj2Azf+ifYPj5gH\n+3gKRJ+hZ7NdpF1tRH+lK3HO10sggtIajMBOLa21kvnNPM6NcHYcGq6jgCzk\nlUNDAoS24PR380q9Vxqi6kC8UzGNqj8A3GJyB1pLlGBUrSyesgvilM5n5sGQ\nw446\r\n=35K9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBu21Gp3rJmxbWSkUApx11MzmVuDCHXPstDaJDUqJ4xnAiBqm4W37JM/qIGc/W9g4kiDz43+XypwnOabJxKuGaLT4g=="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.3.0_1552046081564_0.6808488651162592"},"_hasShrinkwrap":false},"3.3.1":{"name":"butter-toast","version":"3.3.1","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.3.1"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"^2.0.1","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@storybook/addon-actions":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"^6.26.3","babel-eslint":"^10.0.1","babel-jest":"^24.0.0","babel-loader":"^8.0.5","babel-plugin-styled-components":"^1.10.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.8.0","enzyme-to-json":"^3.3.5","eslint":"^5.13.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.12.4","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^24.0.0","jest-enzyme":"^7.0.1","lodash":"^4.17.11","polished":"^2.3.3","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0","react-test-renderer":"^16.7.0","styled-components":"^4.1.3","terser":"^3.14.1","terser-webpack-plugin":"^1.2.1","webpack":"^4.29.0","webpack-cli":"^3.2.1"},"gitHead":"1be87f9ebb4ba29996e19210f9c9ca181c42d991","_id":"butter-toast@3.3.1","_npmVersion":"6.4.1","_nodeVersion":"8.15.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-ztebWmhGtdZb/VhaGN9HOJktY1Jb/4CzA8y7StCQcbmVYU3Jbc17+x6RxuNiqrDyx0hQqZBImRtE0Wkkvsrl1A==","shasum":"ad6ba1cfb5e57457209eb22f34bd8e9bc4c3f1e9","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.3.1.tgz","fileCount":45,"unpackedSize":5710724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcglkACRA9TVsSAnZWagAAg2QP/RM+qs+/XoyvY+HBSDqd\nsi3Oc2XtMDHyRSoE2c9prXytEgEytn9qyHm6ZcSo7SKeflReQKYFoqmZFORr\nuUbkarrk936HqM1+R/Dx0/YG8af/dXfR4womUfMom7Ymply2VeEOBi//ORjj\nYWjBkEz7iuhWgVU+WDHsyvy8Yc1Pav8B1AKtxM01vynElKKaOoDPvkmqwTRE\nAk4M5VLEOCOmMQz0VgRJ7W79UJ3EyBLWvRBEElchh5SAja1bTQPQyVTi/jGg\n2V79s/7nzczfkY4kc9GUV9XpJ87tXCVW2gnLRtXbG+XcMKun0L+kJatUq7pV\nwR6mPV2prSostTYRkh5vSy07W2GvqGI04U8f/HKOQpqbgLyg9AD+nzyLsjq9\nlTQujYPP9xG2C7RV77iWD6qFchE1rsLrarBs3ZF17bkvDpnmFKESX4FUZyU8\nsN649bXWcOGu+hx0a4hLh/LjLmXgN6nBL6mXmz3txLi1jt45bKgtVAG4AFFQ\nnJIOln55qMDOO4vtGTlwANewr0qwTXJXwVWEu2/FF7/qCXIkvHQYmOQO2+mO\nj3FxJ7waptTxSpYh/noMY1Z3WUeGzi99EN65pPUorb/f1RgKD1+58Ep1PLB5\nDcCXbKkx+2mMtAHY0W+A4OzL8c1ip3EMxYBEgOA/bV+VLPtKyPbzrwWc4KwU\nWxLl\r\n=wbwn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBxGOOEfnZF6lQQ0d9mHh4fAcNu8oyCyEk4hsJ0kQ9QAIgJCFppF/e8hkdkOKhFZ1xEuKAq+MA4TgwypjTqpVkkA4="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.3.1_1552046335440_0.15971763350694212"},"_hasShrinkwrap":false},"3.3.2":{"name":"butter-toast","version":"3.3.2","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.3.1"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"^2.0.1","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@storybook/addon-actions":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"^6.26.3","babel-eslint":"^10.0.1","babel-jest":"^24.0.0","babel-loader":"^8.0.5","babel-plugin-styled-components":"^1.10.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.8.0","enzyme-to-json":"^3.3.5","eslint":"^5.13.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.12.4","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^24.0.0","jest-enzyme":"^7.0.1","lodash":"^4.17.11","polished":"^2.3.3","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0","react-test-renderer":"^16.7.0","styled-components":"^4.1.3","terser":"^3.14.1","terser-webpack-plugin":"^1.2.1","webpack":"^4.29.0","webpack-cli":"^3.2.1"},"gitHead":"b3c7eedfef9331ef96e54a914b1160cb0fd6d168","_id":"butter-toast@3.3.2","_npmVersion":"6.4.1","_nodeVersion":"8.15.1","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-7s63zYJHS/s4k4eds0BVH9jiHRHZUtDKc6JcjNhG8w9jvKKNBK2kOBjbEXntUgNY4swXRxVNpHiepKQBIo6Rrg==","shasum":"47e408ab0e90d2933a136950eccd344e0db53e8d","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.3.2.tgz","fileCount":45,"unpackedSize":5710878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjAJcCRA9TVsSAnZWagAAnq8P/0YgwL2d23ptqcHQZWSp\nc4F9js/GdStlpX1M84M3N1V/eqUoB04teyB2Xj9C8buGb5hCmdtyVqOAh0rN\nUZBltN3h0Dh9nmYWDX8B+n1kGxVjCHSFnETxI2XwyYViC6wyX2LsTFTSziLg\nrwPtUCJDTtjzPSLwRnX/vUirG1rssxUito752zU5v7mFay7ozhtiLbwEMMwX\nK9fuaY4sbN00MK5dH/hcXFu/RaN00rr5Jf7UU4EdF/fs1EZ9yoDp2lcO/lcg\ntb64OfcOoZx9KDDQwSa2gs2RJQJkFGuapFj7kgtoWf/GCyfsxzuh8mQsvLfX\nIe0W9q9bTPYlhCs9rDeWiAbhYtIAJvTIGGyBR6F9wozrwBcvCDT188aUtskY\n7eaaG+Kg7/yILkktkfTjm2zxeyCCIUZDBh8TJse0utRGyyiXWXCcNfwBO+i7\nVyvw/10EWRvMosH0XN87ESDh6zPmbqKZIRh4ovgVfkQKuvjM539VJgSfoCW0\nkxGSnBsTR4NCDVLJkMuBQzf1jrBi0fxKosBj3oqF5yIY+9Js8EZn3OBa9n4c\nfj0E6Scmb6gUq9plsQnO/PYsbEgPoOoRKvxareEwpGh4qa4NFfQV/6ieap22\n51Nxe1QhzQbC+4qxmU6PjRcc5rS0yUbTOI1BH0AY3Tv1v7/7fDvW5fG2dWg8\niZHF\r\n=3ffZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvvAj1N+bqkagRj8OqMqf7Wn13Bakr+iLTPwtUEP0jggIhAJKFJFL4G7xfZWScEFb2UhQNEkQZkyTqoO3hK49cuXUH"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.3.2_1552679515297_0.1611387016495085"},"_hasShrinkwrap":false},"3.3.3":{"name":"butter-toast","version":"3.3.3","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.3.1"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"^2.0.1","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@storybook/addon-actions":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"^6.26.3","babel-eslint":"^10.0.1","babel-jest":"^24.0.0","babel-loader":"^8.0.5","babel-plugin-styled-components":"^1.10.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.8.0","enzyme-to-json":"^3.3.5","eslint":"^5.13.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.12.4","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^24.0.0","jest-enzyme":"^7.0.1","lodash":"^4.17.11","polished":"^2.3.3","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0","react-test-renderer":"^16.7.0","styled-components":"^4.1.3","terser":"^3.14.1","terser-webpack-plugin":"^1.2.1","webpack":"^4.29.0","webpack-cli":"^3.2.1"},"gitHead":"1bd4c1c8db5e362c4114ce28ff9c9cbbc01de556","_id":"butter-toast@3.3.3","_npmVersion":"6.4.1","_nodeVersion":"8.16.0","_npmUser":{"name":"ealush","email":"evyatar.a@fiverr.com"},"dist":{"integrity":"sha512-rsU0ejXiCrmGxGBJa07UrfN+Kjia0lfDxQL9NXIRr0I/mzoT/wT2+gx1FIDX4OeGUdFdjlfz5V7OoxmGzAymVA==","shasum":"da3143d5c7ef4cf888d7f927f455840e0c76be90","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.3.3.tgz","fileCount":45,"unpackedSize":5710949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJct4siCRA9TVsSAnZWagAARzsP/3duXn1REwhspwQcKY2P\nW6+R0T3X40mGdF/igaVaLS9rbtvddQmZq0khqYL6bgqN7JW320bZ29iSMprS\nzAsHLc8/sHrTnix29xUSKLdf6xIIJzumRGf7J7uUlO75myGhdTpdd7gSHd0o\nIus7MHh32ghZPuQjcfgPLERemUA1pI1qo0OMi7oGC0zwbNU4YmHXELNk3sms\n4cWec9a9LGIeSNKVTMzXQI4IDFlo8wAQQFdW1pMA7JYTgFx61K9hsa3u0iCH\nZen2jjq4azR00wSPIpOL9Aek+BlvuBkvdyTSzoEDGrYWK2fZdfoP5y/RTLTx\n07LIvuYI516Vs155UNL9B/NQeEu427BuDWdlVaDua4WkJsTFcMsx4y/TZgd8\n7DQ4aYFXc4e7ATiZWNUidpZ0MK04ORo2DL27/4yp1+5EzCEYwqCSlbk1YXP4\nmllWTvvqtNwZVskK7HqXj59p32tQRWeBNI8TsbnyH4z2AagTEsYbxH3iqnIo\nGaSe78lzV86wLsFeWPmRWaptJQJsEKw9VIv46CxqlnCSTGRfV6pPu1fPsXcz\nsyndF0Xt0tuJOFZmGlxEOW/LlneQyt0c5UhN9zi8TgMKpWUBl8WMnqrwR5pY\nyXbRjjMr02FBpXpKzdCXWFZOpwbdeXmA8v5K+LYvM1/VvuYUbtZUmN0pXjRK\n+dXf\r\n=Fpic\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ+c3QagdV3bzbGRE/uAeg6Wi1PLrnMYbXzV2xTYql9AIhAOTDQJzXog3f6o+RdPeTK0MySnmNAAJEL9bAr42eV79U"}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.3.3_1555532577020_0.04672142745671981"},"_hasShrinkwrap":false},"3.3.4":{"name":"butter-toast","version":"3.3.4","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.3.1"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"^2.0.1","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@storybook/addon-actions":"^5.2.0","@storybook/addons":"^5.2.0","@storybook/react":"^5.2.0","babel-core":"^6.26.3","babel-eslint":"^10.0.1","babel-jest":"^24.0.0","babel-loader":"^8.0.5","babel-plugin-styled-components":"^1.10.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.8.0","enzyme-to-json":"^3.3.5","eslint":"^6.4.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.12.4","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^24.0.0","jest-enzyme":"^7.0.1","lodash":"^4.17.11","polished":"^2.3.3","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0","react-test-renderer":"^16.7.0","styled-components":"^4.1.3","terser":"^4.3.1","terser-webpack-plugin":"^1.2.1","webpack":"^4.29.0","webpack-cli":"^3.2.1"},"gitHead":"10b29835f0db0ac31363f37ad3df04d9be03a969","_id":"butter-toast@3.3.4","_npmVersion":"6.4.1","_nodeVersion":"8.16.2","_npmUser":{"name":"ealush","email":"code@ealush.com"},"dist":{"integrity":"sha512-ySufTwvttbMqXqOdZlm6xaaFk3L1XxtfCob+mtrNCQZ7/B4/VY1xZdNLtSMgRs5I4qU22Dfd2uXd8HDezA3cEg==","shasum":"1dd6d7f5f35d259e765a213c01c43e1346244dad","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.3.4.tgz","fileCount":45,"unpackedSize":5711100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+K0hCRA9TVsSAnZWagAAjYgP/i/1I6HKlIvdnOPn9rOP\nCceoxdS0ykctfN8dIH27sC9AY8ZcRA/NAzDofKF7GyBNw+W+WMA65jjNaxBH\naq0iAjCfBLDCQAD1m0u6+iVJ9t6ymrgcYdq24rcZOHAr1/V7SgIfiTydPwqS\n5uV2XrLsojF3OEcunFx3rW+lLqmMCLOjYMpJG+f1aoKEUcISh2YijiBPi30S\nj1QgbHHQY4fXSi28BWguTWZvj7/VkQX/BDeHLYlDby5R5p4TOJ4iJ6VHKdNm\nkQ6YAPKoEjb/tHvmro6EY6NM/8kPqnOux8sNBuiI/KvPwkmJk/gCD67hjxuW\n7Kv6e7zQXiYZcnum6JKd30JrvJ2vavR3fBwKv7K6DSZ0UIzVa2Cj5HKJWE4x\nuPxAffROgUYAQAYLWppRo2IQM7xEHZTxwISW02TIYXI49YYzIkqowbxZVR0t\ny2qLLAfJQNlnIwYibxaDp7peG5A6FezsiIwCxKO588rC8Jf+V28IojA7T/Me\ndCwPlkBKFcdzAK6Nct5SiJV9wQKmYSiWxPNdQzjug7fY4TBMJk4MvQxSYP25\nYKUO1EiYXDaGQGaGE3KED+RyYTPepryJF3PVfGZlv/wPW7xsU78N3TEn33ro\nojCVV5bzUE5En0DLoM11XeCabGaOY40tPFQss0ypQ7QUvw46XWBy9vCokR4w\nJHgJ\r\n=WXKq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBtpJXqS13ZHP6WwFVU4Zs4wHEDUhgi/ewYnkAgp0dZ2AiEAkbjOkFQCRCf/4fmCpQECqkhFY2XwRBt4lIlevW+/lQA="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.3.4_1576578336274_0.16804079486636692"},"_hasShrinkwrap":false},"3.3.5":{"name":"butter-toast","version":"3.3.5","description":"Smooth toast notifications for react apps","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"],"main":"./dist/butter-toast.min.js","scripts":{"build":"npm run build:webpack && npm run build:external","build:external":"EXTERNAL=true npm run build:webpack","build:webpack":"webpack --config ./webpack.config.js","test":"jest --config ./configuration/jest.config.js","test:watch":"jest --config ./configuration/jest.config.js --watchAll","test:coverage":"jest --config ./configuration/jest.config.js --coverage","eslint":"eslint ./src/** --quiet","start":"npm run storybook","storybook":"start-storybook -p 9003 -c .storybook","storybook:build":"build-storybook -c .storybook -o gh-pages"},"repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"license":"UNLICENSED","bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"homepage":"https://github.com/ealush/butter-toast#readme","dependencies":{"@babel/runtime":"^7.3.1"},"peerDependencies":{"react":"^16.4.1","react-dom":"^16.4.1"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.0.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@fiverr/eslint-config-fiverr":"^2.0.1","@quickbaseoss/babel-plugin-styled-components-css-namespace":"^0.1.1","@storybook/addon-actions":"^5.2.0","@storybook/addons":"^5.2.0","@storybook/react":"^5.2.0","babel-core":"^6.26.3","babel-eslint":"^10.0.1","babel-jest":"^24.0.0","babel-loader":"^8.0.5","babel-plugin-styled-components":"^1.10.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.8.0","enzyme-to-json":"^3.3.5","eslint":"^6.4.0","eslint-plugin-class-property":"^1.1.0","eslint-plugin-react":"^7.12.4","funnies":"^2.0.0","greenkeeper-lockfile":"^1.15.0","jest":"^24.0.0","jest-enzyme":"^7.0.1","lodash":"^4.17.11","polished":"^2.3.3","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0","react-test-renderer":"^16.7.0","styled-components":"^4.1.3","terser":"^4.3.1","terser-webpack-plugin":"^1.2.1","webpack":"^4.29.0","webpack-cli":"^3.2.1"},"gitHead":"d854127de4e1e5ab1b8e9aacdb9366bab102503c","_id":"butter-toast@3.3.5","_npmVersion":"6.4.1","_nodeVersion":"8.16.2","_npmUser":{"name":"ealush","email":"code@ealush.com"},"dist":{"integrity":"sha512-6TZkT5lGcX4jvucK26X156wnw79Lo137yelHPvHUnpVgz7ZiyJGYNCXFY/twE0dLDQpVDlnUWOBhNKLt5gcl2w==","shasum":"3a40883c7b2162eda10ff05cae01d2537f27182c","tarball":"https://registry.npmjs.org/butter-toast/-/butter-toast-3.3.5.tgz","fileCount":45,"unpackedSize":5711235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+LAVCRA9TVsSAnZWagAANugP/03bU0114sv/RcmJ0Bl0\n750FISd/tggBDd3e7tJSER32gyNh+5xaJfum+KAlMXFBT9FDaexsl2NaEsbw\nHObMdEdMkxYv/9S/j4+B7dS4AF2+liVTyCmYhHuxuADuws3HC307EUMrpP1z\n6OmCnqex35o9Ye/s3Klm0lvQMN32ywdSzzcx/JaDRiN1PlhKd+df/Mp2dKlh\nj8xH8GewihU+KFDohbWJ3dHhgzFFVxzUtGjxb3tEYaEdFvaoDXX7483gsqiQ\nCJvX2DBK5RccsTq7oYV9saGFWaMw8xEJv6VRjkSG5hP1VQ6q8nwqk6aexrGE\nMBhL7/YVefuF1VkWJnPK/yAdcwjZkRpDjR5uqWPCaoPrmRdmffaS2Uh5TCAB\nTlRjpgVH2sGVhLugPV05cHTHNRgWd9OIYVbmeeGWjjkd+ZRFzmuTd2NWS40V\nYLvbnoNZdUpF0DtQnt285uo/RF84i9sZuAeCHxGB4LjZHaLTxrjjGsL9m3AT\nuQAbBkHDSknYgZVd9NM+z/MWfMZznmbqnYbAOqSIeZi3ReN4EA/Gs8oHOVAM\nzlchiNndFsNQ0xvf2fr7drczggkpUaXPT5NFSuJ1yE1pF6VKoz1MMq9p1Rm+\nCa9om7EDrDq9T0r7tKu+f7uDOGNXVMWShO4GaAwNNuK/8D7JcXUK+e9eIOI+\nXbWD\r\n=GpDF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNLLinISee8Wfwh6hhED5D1rta0POoOQa78LEuu/bBPgIgIfS8aThLh3mpVZ3Iofc6PUR4aNgEaAJP9jXD6jsh4WA="}]},"maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-toast_3.3.5_1576579092399_0.1559300970861759"},"_hasShrinkwrap":false}},"readme":"\n# Butter Toast\n\n\n\nButter Toast is a toast notification system for React apps that puts an emphasis on ease of use, customizability and butter-smooth transitions.\n\nButter Toast comes with a few built-in styles which you can apply, and you can also use any component for creating the notifications.\n\n## Basic usage\n\nThe following example code will show a toast whenever the `ClickMe` button gets clicked. You can read more about the functions and constants used in the docs below.\n\nYou can try this example as a live demo [here](https://stackblitz.com/edit/react-hzeye5);\n\n```js\nimport React, { Component } from 'react';\nimport ButterToast, { Cinnamon, POS_BOTTOM, POS_RIGHT } from 'butter-toast';\n\nclass App extends Component {\n\n onClickMe() {\n ButterToast.raise({\n content:
\n )\n }\n}\n```\n\n## V3 update\nV3 is a near-complete re-write of butter-toast. It brings with it a simpler API and overall more stability (plus, better ie11 support), moreover - it better supports addign features in the future. **IT IS INCOMPATIBLE WITH V2**. If you are currently a happy V2 user, there is no need to rush for an upgrade - new features will only be added to V3, though.\n\n## Terminology:\n* **Toast**: A single notification in the stack.\n* **Tray**: The containing element of a stack of toasts.\n* **Raise**: The action of showing a toast of the screen.\n* **Dismiss**: The action of removing a toast from the screen.\n* **Cinnamon**: Styles library bundled with butter-toast\n\n# Content\n* [Feature list](#feaatures)\n* [How to install](#installation)\n * [Controlling the bundle size](#controlling-the-bundle-size)\n* [How to use](#usage)\n * [Creating a tray](#creating-a-notification-tray)\n * [ButterToast Props](#buttertoast-props)\n * [Understanding renderInContext](#understanding-renderincontext)\n * [Positioning the tray on the screen](#positioning-the-tray)\n * [Emitting a toast](#raising-emitting-a-toast)\n * [Raise params](#raise-params)\n * [Toast props](#toasts-content-props)\n * [Custom dismiss and onClick](#using-the-custom-dismiss-and-onclick-handlers)\n * [How to access the raise method](#accessing-raise)\n * [Dismissing a toast](#dismissing-toasts)\n* [Using the built in styles (Cinnamon)](#using-the-built-in-styles-sprinkle-some-cinnamon-on-top)\n * [Crisp](#crisp)\n * [Crunch](#crunch)\n * [Slim](#slim)\n\n## Features\n* Any component can be a toast. You can use whatever you like.\n* Rendering the toast-notifications globally right under body to prevent stacking-context collision.\n* Rendering the toast notifications in-context, for positioning relative to parent component.\n* Multiple notification tray support, they can be namespaced for separate controls.\n* Emitting notifications from every part of your application, not just from the container component.\n* Multiple built-in themes.\n* Sticky toast notifications.\n* Custom on-dismiss and on-click callbacks.\n* Custom timeouts for toasts.\n* Toasts pause on hover.\n* dismissAll at once.\n\n## Installation\n\n```\nnpm install --save butter-toast\n```\n\n## Controlling the bundle size\nBy default ButterToast comes with a few built-in toast styles. For these styles, it uses [Styled Components](https://www.styled-components.com/) which adds to the overall bundle size. If you do not intend to use the built-in styles, you can use the `lean` bundle, which only exposes core stacking behavior, and is only ~4Kb gzipped.\n\n```js\nimport ButterToast from 'butter-toast/dist/lean.min.js';\n```\n\n# Usage\n\n## Creating a notification tray\nTo use Butter Toast you first need to instantiate a notification tray. You do this by rendering the `` Component. By default it will append your current tray directly under `body` unless you pass the `renderInContext` prop [read more](#understanding-renderincontext).\n\n### ButterToast props:\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `renderInContext` | `boolean` | `true` | Y | Determines whether the tray should be renderd relative to `body` or to its parent component.\n| `className` | `string` | | Y | Adds a class to the tray for custom styling\n| `namespace` | `string` | | Y | Scopes the tray under a namespace, useful when multiple trays are present on the page.\n| `position` | `object` | `null` | `{ horizontal: 'POS_RIGHT', vertical: 'POS_TOP' }` | Y | Determines the location of the tray on the screen. When null is passed, no positioning will be applied.\n| `timeout` | `number` | `6000` | Y | The default time in ms for toasts in the tray. Can be overridden individually.\n| `spacing` | `number` | `10` | Y | The distance in pixels between each toast in the tray.\n| `style` | `Object` | `undefined` | Y | Custom style object for the tray, eases custom positioning\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Understanding renderInContext\nBy default, a tray gets rendered as a top-level element, appended to the `` of your html page. The reason this happens is that your toasts appear in an as-high-as-possible [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) and that nothing shows on top of them. If you need your toasts to be aligned to the content of your react app, or positioned relative to it, use the `renderInContext` prop that will treat your tray as a regular react component and render it as a descendant of its parent component.\n\nWhen using `renderInContext` you will not be able to use ButterToasts positioning, you will need to manually specify the position for the tray using CSS.\n\nTo determine the direction in which the toasts stack, you can still use the `position.vertical` prop. Setting it to `POS_TOP` will make them stack from the top-down, and using `POS_BOTTOM` will make them stack from the bottom-up.\n\n### Positioning the tray\nBy default a tray can be aligned to any of the four corners of the screen, and to the top-center, and bottom-center. You can of course use any positioning you would like via css, or a custom `style` prop to the tray.\n\nIf you use `renderInContext`, no positioning will be applied to your tray - css will need to be used.\n\nButterToast exposes five constants that let you determine the position of the tray on the scree:\n\n```js\nimport ButterToast, { POS_TOP, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_CENTER } from 'butter-toast';\n```\n\nWith these you can specify the vertical and horizontal position of the tray. You need to create an object containing the keys `horizontal` and `vertical` to specify where the tray should appear, and pass it down as the `position` prop:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast, { POS_TOP, POS_CENTER } from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n\n const position = {\n vertical: POS_TOP,\n horizontal: POS_CENTER\n };\n\n return (\n
\n \n
\n );\n }\n}\n```\n\nIf you want to manually set the position via css, set `position` to `null` and no positioning will apply:\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n### Using the `style` prop\nIf you deal with a more complex scenario in which you need some more customized styling over existing - such as displaiyng your notifications below your sticky header - you can add a `style` property to your tray and it will override Butter-Toast's styles with yours.\n\nSo for example:\n\n```jsx\n\n```\n\nWill override `POS_TOP`'s default `10px` with `50px`.\n\n## Raising (emitting) a toast\nTo emit a toast, you need to use Butter Toast's `raise` method.\nRaise accepts the toast and its configuration, and returns its id. The id can later be used to dismiss the toast.\n\n## Raise params:\nThe `raise` method accepts an object containing the content of your toast, and configuration for it:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | ` ` | N | The actual content being rendered. Could be a react component, a function returning JSX or a string of text.\n| `namespace` | `string` | | Y | The named trays to which the toast should apply\n| `timeout` | `number` / `Infinity` | ` ` | Y | Overrides the tray's default timeout for the current toast. When `Infinity`, sets `sticky` to `true`.\n| `sticky` | `boolean` | `false` | Y | Makes the toast ignore its timeout and not dismiss until dismiss gets called on it.\n| `dismiss` | `function` | ` ` | Y | A custom dismiss function, passing it will require manually calling `dismiss`. The function will be passed down as a prop to `content`\n| `onClick` | `function` | ` ` | Y | onClick handler. The function will be passed down as a prop to `content`.\n| `pauseOnHover` | `boolean` | `true` | Y | By default, a toast that's being hovered will pause and not dismiss until released. Setting this to `false` will override this behavior.\n\n### Toast's Content props:\n* `toastId`: the toast's id\n* `dismiss`: either the native, or the custom dismiss handler\n* `onClick`: if passed, the onClick handler.\n* - any other prop passed to `raise`\n\n### Using the Custom dismiss and onClick handlers:\nUsing a custom `dismiss` handler will override the default dismiss handler passed down to the component. This means that you will need to call the native `dismiss` handler manually.\n\nBoth `dismiss` and `onClick` recieve the following params:\n* `e`: the event that triggered the function (i.e.: `click`)\n* `toast`: The full toast object, containing its component and id\n* `dismiss`: The native dismiss handler that needs to be called when manually dismissing the toast.\n\n## Accessing `raise`:\nThe `raise` method is accessible in two ways:\n\n1. **A static method accessible via `ButterToast`:**\nThis is extremely useful if you wish notifications to your tray from different locations in your app, or even from outside of React.\n\nIf you have multiple trays in the page, using `raise` this way will emit the toast from all tray, unless you use the tray's namespace.\n\n```js\nimport ButterToast from 'butter-toast';\nimport `MyToast` from './MyToast';\nimport React from 'react';\n\nButterToast.raise({\n namespace: 'my-tray',\n content: MyToast,\n onClick: ({ toastId, dismiss }) => { console.log('dismissing!'); dismiss(); }\n});\n\nButterToast.raise({\n content: ({ toastId, dismiss }) =>
woohoo!
\n});\n\nButterToast.raise({\n content: 'this is pretty awesome'\n});\n```\n\n2. **An instance method accessible via `ref`**\nThis works exactly like the static method (option 1), only that you do not need to specify the namespapce of the tray as it is pre-linked.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n emitNotification = () => {\n this.tray.raise({\n content: MyToast\n });\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n### Dismissing toasts\nSometimes you would want to dismiss a toast from the outside the toast itself. Similarly `raise`, Butter Toast exposes the `dismiss` and `dismissAll` methods. Just like `raise`, they can be exposed either as ButterToast static functions (`ButterToast.dismiss` / `ButterToast.dismissAll`) or as instance methods (`this.tray.dismiss` / `this.tray.dismissAll`).\n\n`dismiss` accepts the toast's id, and it will dismiss only it, if present in the tray specified.\n\n```js\nimport ButterToast, { dismiss } from 'butter-toast';\n\nconst toast = ButterToast.raise({ ... });\nButterToast.dismiss(toast);\n```\n\n`dismissAll` takes no arguments. If used on a ref, it will dismiss all toasts in the tray, otherwise, it will remove all toasts on the screen.\n\n```jsx\nimport React, { Component } from 'react';\nimport ButterToast from 'butter-toast';\nimport MyToast from './MyToast';\n\nclass MyComponent extends Component {\n\n dismissAll = () => {\n this.tray.dismissAll();\n }\n\n render() {\n return (\n
\n this.tray = tray} position={null}/>\n
\n );\n }\n}\n```\n\n# Using the built in styles (Sprinkle some cinnamon on top)\n\nFor your convenience, Butter toast comes with a few built in Components for quick styling.\n\nYou can import them via the `cinnamon` export.\n\n```jsx\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nButterToast.raise({\n content: \n});\n```\n\nThe included styles are:\n* Crisp\n* Crunch\n* Slim\n\nEach style comes with its own color schemes, and have a few more props the can further customize them.\n\nAll components' content props can be a node. This means that you can pass down a component, a function that returns JSX or a string of text.\n\nThe schemes can be accessed as an export of the component itself:\n\n```js\nimport ButterToast, { Cinnamon } from 'butter-toast';\n\nCinnamon.Crisp.SCHEME_BLUE;\nCinnamon.Crunch.SCHEME_ORANGE;\nCinnamon.Slim.SCHEME_DARK;\n```\n\n## Crisp\n\n\n\nCrisp exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_PURPLE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\nCrisp props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n\n## Crunch\nCrunch exposes the following color schemes: `SCHEME_GREY`, `SCHEME_RED`, `SCHEME_ORANGE`, `SCHEME_GREEN`, `SCHEME_BLUE`.\n\n\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `dismissible` | `boolean` | `true` | Y | Determines whether the `x` button should be visible.\n| `title` | `node` | `null` | Y | A component or a string containing the title of the toast.\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `icon` | `node` | `null` | Y | A component or a string containing the icon of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n## Slim\n\n\n\nCrunch exposes the following color schemes: `SCHEME_DARK`, `SCHEME_LIGHT`.\n\nCrunch props:\n\n| Prop | Type | Default | Optional | Description\n|------|------|---------|----------|------------\n| `content` | `node` | `null` | Y | A component or a string containing the content of the toast.\n| `scheme` | `string` | `SCHEME_GREY` | Y | The color scheme for the toast.\n\n\n","maintainers":[{"name":"ealush","email":"evyatar.a@fiverr.com"}],"time":{"modified":"2022-04-12T04:48:18.132Z","created":"2017-08-21T20:34:10.007Z","0.0.1":"2017-08-21T20:34:10.007Z","0.0.2":"2017-08-22T20:08:33.524Z","0.0.3":"2017-08-25T16:38:36.204Z","0.0.4":"2017-08-25T16:42:19.902Z","0.0.5":"2017-08-27T21:21:15.200Z","0.0.6":"2017-08-28T19:06:13.557Z","0.0.7":"2017-08-28T19:23:35.245Z","0.0.8":"2017-08-30T13:25:41.932Z","0.0.9":"2017-08-30T20:13:16.874Z","0.0.10":"2017-09-02T20:49:50.677Z","0.0.11":"2017-09-02T21:15:37.623Z","0.0.12":"2017-09-09T10:09:50.013Z","1.0.0":"2017-09-15T19:10:39.141Z","1.0.1":"2017-09-29T13:04:03.323Z","1.1.0":"2017-10-05T10:47:11.013Z","1.1.1":"2017-12-13T12:00:24.453Z","1.1.2":"2017-12-29T12:59:00.722Z","2.0.0":"2018-01-12T20:32:42.573Z","2.0.1":"2018-01-12T20:53:02.247Z","2.1.0":"2018-02-15T14:52:38.312Z","2.1.1":"2018-02-17T20:53:57.547Z","2.1.2-rc.1":"2018-04-15T11:57:06.383Z","2.1.2":"2018-04-15T12:14:05.653Z","2.1.3":"2018-08-27T15:50:41.915Z","2.1.5":"2018-08-30T07:57:01.956Z","3.0.0-rc.1":"2018-08-30T08:14:59.427Z","3.0.0-rc.2":"2018-08-30T08:41:46.775Z","3.0.0-rc.3":"2018-08-30T08:55:42.282Z","3.0.0-rc.4":"2018-08-30T08:59:38.093Z","3.0.0-rc.5":"2018-08-30T09:04:24.238Z","3.0.0-rc.6":"2018-08-30T10:54:53.124Z","3.0.0-rc.7":"2018-08-30T11:49:33.569Z","3.0.0-rc.8":"2018-08-30T20:39:14.855Z","3.0.0-rc.9":"2018-08-30T20:45:03.705Z","3.0.0-rc.10":"2018-08-30T21:02:46.377Z","3.0.0-rc.12":"2018-08-31T19:25:01.083Z","3.0.0-rc.13":"2018-08-31T19:29:40.130Z","3.0.0-rc.14":"2018-09-01T18:47:49.888Z","3.0.0-rc.15":"2018-09-01T19:46:01.546Z","3.0.0":"2018-09-01T20:48:56.218Z","3.0.1":"2018-09-02T07:11:44.968Z","3.0.2":"2018-09-02T21:50:09.933Z","3.0.3-rc.1":"2018-09-17T03:55:13.724Z","3.0.3-rc.2":"2018-09-17T04:11:09.200Z","3.0.3-rc.3":"2018-09-17T04:26:23.152Z","3.0.3-rc.4":"2018-09-17T04:32:30.199Z","3.0.3-rc.5":"2018-09-17T04:42:09.473Z","3.0.3-rc.6":"2018-09-17T04:46:26.894Z","3.0.3-rc.7":"2018-09-17T04:57:47.509Z","3.0.3":"2018-09-17T05:09:33.221Z","3.0.4-rc.1":"2018-09-21T10:23:05.195Z","3.0.4":"2018-09-21T10:58:38.919Z","3.1.0-rc.1":"2018-09-25T17:33:12.053Z","3.1.0-rc.2":"2018-09-25T17:40:40.786Z","3.1.0-rc.3":"2018-09-26T07:15:20.915Z","3.1.0-rc.4":"2018-09-26T08:06:35.153Z","3.1.0-rc.5":"2018-09-26T08:11:18.659Z","3.1.0-rc.6":"2018-09-26T08:57:08.620Z","3.1.0-rc.7":"2018-09-26T08:59:21.352Z","3.1.0-rc.8":"2018-09-26T09:11:22.988Z","3.1.0-rc.9":"2018-09-26T10:35:59.555Z","3.1.0-rc.10":"2018-09-26T10:38:22.977Z","3.1.0-rc.11":"2018-09-26T10:40:13.899Z","3.1.0-rc.12":"2018-09-26T10:46:56.673Z","3.1.0-rc.13":"2018-09-26T10:56:56.130Z","3.1.0-rc.14":"2018-09-26T11:09:58.559Z","3.1.0-rc.15":"2018-09-26T11:13:42.943Z","3.1.0-rc.16":"2018-09-26T11:18:05.182Z","3.1.0-rc.17":"2018-09-26T11:37:38.145Z","3.1.0-rc.18":"2018-09-26T11:52:55.300Z","3.1.0-rc.19":"2018-09-26T12:08:25.349Z","3.1.0":"2018-09-26T12:24:38.761Z","3.1.1-rc.1":"2018-10-18T21:24:00.994Z","3.1.1":"2018-10-18T21:30:31.444Z","3.1.2":"2018-10-19T11:57:54.095Z","3.1.3":"2018-11-21T17:16:44.239Z","3.2.0":"2018-12-13T13:27:43.802Z","3.2.1":"2018-12-13T21:03:51.993Z","3.2.2":"2019-02-03T22:47:21.176Z","3.3.0":"2019-03-08T11:54:41.930Z","3.3.1":"2019-03-08T11:58:55.655Z","3.3.2":"2019-03-15T19:51:55.655Z","3.3.3":"2019-04-17T20:22:57.550Z","3.3.4":"2019-12-17T10:25:36.633Z","3.3.5":"2019-12-17T10:38:12.806Z"},"homepage":"https://github.com/ealush/butter-toast#readme","repository":{"type":"git","url":"git+https://github.com/ealush/butter-toast.git"},"author":{"name":"ealush"},"bugs":{"url":"https://github.com/ealush/butter-toast/issues"},"license":"UNLICENSED","readmeFilename":"README.md","keywords":["React notifications","Toast notifications","React toast notifications","Smooth notifications","Toast","Notification","Alert","React"]}