Merge pull request #4 from Sametyzc/master

show and hide functions

Author: barisates

README.md

@@ -1,3 +1,4 @@
+
 # react-loading-ui
 React loaing component.
 
@@ -23,6 +24,7 @@ $ npm install react-loading-ui
 - To use, just call the ````Loading()```` function.
 
 > Note: The ````Loading()```` function **toggle** between **hide** and **show**.
+> But instead of **toggling**, you can also use ````ShowLoading()```` and ````HideLoading()````
 
 ```jsx
 import React, { Component } from 'react';
@@ -84,17 +86,21 @@ SetDefault({
 ```
 ##### Loading
 
-````Loading()```` preview with light color theme.
+````Loading()```` and ```ShowLoading()``` preview with light color theme.
 
 ![Loading()](http://barisates.com/git/rlui/loading.jpg "Loading")
 
 ##### Progress
-```Loading({ progress: true })``` preview with light color theme.
+```Loading({ progress: true })``` and ```ShowLoading({ progress: true })``` preview with light color theme.
 
 With the ```Progress(progress)``` function you can ensure the loading progress, see the [demo](https://codesandbox.io/s/react-loading-ui-khrt7 "demo").
 
 ![Porgress](http://barisates.com/git/rlui/progress.jpg "Porgress")
 
+##### Hide Loading
+If you want to force hiding, you can use ```HideLoading()``` function.
+
+
 ##### CSS Overrides
 
 If you want to customize the styles, you can use the following classNames:

src/index.js

@@ -32,7 +32,7 @@ const Element = {
   },
   Remove: () => {
     const div = document.getElementById('loading-ui')
-    
+
     unmountComponentAtNode(div)
     div.parentNode.removeChild(div)
   }
@@ -133,6 +133,27 @@ export function Loading(props) {
   }
 }
 
+/**
+ * @param {object} props 
+ * @param {string} [props.title]
+ * @param {string} [props.text]
+ * @param {bool} [props.progress]
+ * @param {boolean} [props.progressedClose]
+ * @param {string} [props.theme]
+ * @param {bool} [props.topBar]
+ * @param {string} [props.topBarColor]
+ */
+export function ShowLoading(props) {
+  if (!document.getElementById('loading-ui')) {
+    Loading(props);
+  }
+}
+
+export function HideLoading() {
+  if (document.getElementById('loading-ui')) {
+    Loading();
+  }
+}
 
 /**
  * @param {number} progress 

src/index.test.js

@@ -1,6 +1,13 @@
-import {Loading} from './index';
+import {Loading, HideLoading, ShowLoading} from './index';
 
 it('renders without crashing', () => {
     Loading();
     Loading({progress: true});
 });
+
+it('renders without crashing', () => {
+    HideLoading();
+    ShowLoading({progress: true});
+    ShowLoading();
+    HideLoading();
+});