https://github.com/liyuechun/react-native-simplest-hud

The simplest network load indicator of react-native
https://github.com/liyuechun/react-native-simplest-hud

hud loading mbprogresshud react react-native react-native-hud reactjs rnprogresshud rnpropgresshud

Last synced: 5 months ago
JSON representation

The simplest network load indicator of react-native

• Host: GitHub
• URL: https://github.com/liyuechun/react-native-simplest-hud
• Owner: liyuechun
• Created: 2017-04-17T09:31:05.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-18T09:04:48.000Z (about 8 years ago)
• Last Synced: 2024-10-11T15:10:55.769Z (6 months ago)
• Topics: hud, loading, mbprogresshud, react, react-native, react-native-hud, reactjs, rnprogresshud, rnpropgresshud
• Language: Java
• Homepage: http://www.kongyixueyuan.com
• Size: 22.4 MB
• Stars: 23
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# The simplest network load indicator of react-native

If you want to learn React-Native cross platform project，Check out [ComicBook](https://github.com/liyuechun/ComicBook).

## Design sketch

![progress-hud-screen](http://ooljpjhzm.bkt.clouddn.com/001.png)

![progress-hud-screen](http://ooljpjhzm.bkt.clouddn.com/002.png)

![progress-hud-screen](http://ooljpjhzm.bkt.clouddn.com/003.png)

![progress-hud-screen](http://ooljpjhzm.bkt.clouddn.com/004.png)

![progress-hud-screen](http://ooljpjhzm.bkt.clouddn.com/005.png)

## Install

```shell

npm install --save react-native-simplest-hud

```

## Usage

```js

import { RNProgressHUD,mixin } from 'react-native-simplest-hud';

import jsonData from './data.json';

class ExamplePage extends  mixin(RNProgressHUD.Mixin){

    ...

    render(){

        return(

            

                ...

                

                ...

            

        );

    }

}

```

### Showing the HUD

You can display the HUD by calling:

```js

  this.showHUD();

```

### Dismissing the HUD

It can be hide by calling:

```js

  this.hideHUD();

```

## Props

The following props can be used to modify the HUD's style and/or behaviour:

| Prop | Type | Opt/Required | Default | Note |

|---|---|---|---|---|

|__`isVisible`__|_Boolean_|Required|`N/A`|Displays the HUD when set to true.

|__`isActivityIndicator`__|_Boolean_|Optional|`false`|When set to true, the HUD is show by the ActivityIndicator style,or showing by the Rotating ring style.

|__`label`__|_String_|Optional|`Loading...`|Sets Prompt string of the HUD.

|__`color`__|_String_|Optional|`rgb(69,149,252)`|Sets the color of the HUD spinner.