Merge 1e2d2fc into 0b0f792

README.md

@@ -91,7 +91,7 @@ $ yarn add react-toastify
 - Fancy progress bar to display the remaining time
 - Possibility to update a toast
 - You can controll the progress bar a la npgrogress 😲
-- Starting v5 the `ToastContainer` is optional 😎
+- Starting v5 the `ToastContainer` is optional if you want to 😎
 
 ## Usage
 
@@ -132,6 +132,9 @@ If you can't figure out where to put it, rendering it in the application root wo
   import { toast } from 'react-toastify';
   import 'react-toastify/dist/ReactToastify.css';
 
+  // Call if once in your app. At the root of your app is the best place
+  toast.useLazyContainer()
+
   const App = () => {
     const notify = () => toast("Wow so easy !");
 
@@ -141,18 +144,14 @@ If you can't figure out where to put it, rendering it in the application root wo
 
 The library will mount a `ToastContainer` for you if none is mounted. 
 
-You can disable this feature if you want to.
-
-```js
-toast.useLazyContainer(false);
-```
 
 #### Configure the ToastContainer when it is mounted on demand
 
 The configure function accept the same props as the ToastContainer. As soon as the container is
 rendered call to configure will have no effect.
 
 ```js
+toast.useLazyContainer();
 toast.configure({
   autoClose: 8000,
   draggable: false,

index.d.ts

@@ -300,10 +300,10 @@ interface Toast {
   configure(config: ToastContainerProps): void;
 
   /**
-   * Opt-in/out for lazy mounted container
-   * By default it's on
+   * Opt-in/out for lazy mounted container. 
+   * By default it's off
    */
-  useLazyContainer(useLazyContainer: boolean): void;
+  useLazyContainer(useLazyContainer?: boolean): void;
 
   /**
    * Display a toast without a specific type.

scss/_toast.scss

@@ -18,7 +18,7 @@
     }
     &--default {
         background: $rt-color-default;
-        color: #aaa;
+        color: $rt-text-color-default;
     }
     &--info {
         background: $rt-color-info;

scss/_variables.scss

@@ -4,13 +4,14 @@ $rt-toast-background: #ffffff !default;
 $rt-toast-min-height: 64px !default;
 $rt-toast-max-height: 800px !default;
 
-
 $rt-color-default: #fff !default;
 $rt-color-info: #3498db !default;
 $rt-color-success: #07bc0c !default;
 $rt-color-warning: #f1c40f !default;
 $rt-color-error: #e74c3c !default;
 
+$rt-text-color-default: #aaa !default;
+
 $rt-color-progress-default: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55) !default;
 
 $rt-mobile: "only screen and (max-width : 480px)" !default;

src/__tests__/toast.js

@@ -30,8 +30,9 @@ function unmountLazyContainer() {
 }
 
 describe('toastify', () => {
-  it('Should lazy mount a ToastContainer if it is not mounted', () => {
+  it('Should lazy mount a ToastContainer if it is not mounted, when opt-in', () => {
     ensureLazyContainerIsNotMounted();
+    toast.useLazyContainer();
     toast('hello');
     jest.runAllTimers();
 
@@ -41,6 +42,7 @@ describe('toastify', () => {
 
   it("Should be possible to configure the ToastContainer even when it's lazy mounted", () => {
     ensureLazyContainerIsNotMounted();
+    toast.useLazyContainer();
     toast.configure({
       rtl: true
     });

src/toast.js

@@ -10,7 +10,7 @@ let container = null;
 let containerDomNode = null;
 let containerConfig = {};
 let queue = [];
-let lazy = true;
+let lazy = false;
 
 /**
  * Merge provided options with the defaults settings and generate the toastId
@@ -153,10 +153,10 @@ toast.configure = config => {
 
 /**
  * Opt-in/out for lazy mounted container
- * By default it's on
+ * By default it's off
  */
 toast.useLazyContainer = useLazy => {
-  lazy = useLazy;
+  lazy = typeof useLazy === 'undefined' ? true : useLazy;
 };
 
 toast.POSITION = POSITION;