• Stars
    star
    305
  • Rank 132,102 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Complex Loader Management Hook for React Applications

Complex Loader Management Hook for React.

Read the Medium post "Managing Complex Waiting Experiences on Web UIs".

npm version build codecov


Edit useWait

react-wait is a React Hook helps to manage multiple loading states on the page without any conflict. It's based on a very simple idea that manages an Array of multiple loading states. The built-in loader component listens its registered loader and immediately become loading state.

Why not React.Suspense?:

React has its own Suspense feature to manage all the async works. For now it only supports code-splitting (not data-fetching).

useWait allows you to manage waiting experiences much more explicitly and not only for Promised/async patterns but also complete loading management.

Overview

Here's a quick overview that what's useWait for:

import { useWait, Waiter } from "react-wait";

function A() {
  const { isWaiting } = useWait();
  return (
    <div>
      {isWaiting("creating user") ? "Creating User..." : "Nothing happens"}
    </div>
  );
}

function B() {
  const { anyWaiting } = useWait();
  return (
    <div>
      {anyWaiting() ? "Something happening on app..." : "Nothing happens"}
    </div>
  );
}

function C() {
  const { startWaiting, endWaiting, isWaiting } = useWait();

  function createUser() {
    startWaiting("creating user");
    // Faking the async work:
    setTimeout(() => {
      endWaiting("creating user");
    }, 1000);
  }

  return (
    <button disabled={isWaiting("creating user")} onClick={createUser}>
      <Wait on="creating user" fallback={<Spinner />}>
        Create User
      </Wait>
    </button>
  );
}

ReactDOM.render(
  <Waiter>
    <C />
  </Waiter>,
  document.getElementById("root")
);

Quick Start

If you are a try and learn developer, you can start trying the react-wait now using codesandbox.io.

Quick start on CodeSandbox

1. Install:

yarn add react-wait

2. Require:

import { Waiter, useWait } from "react-wait";

function UserCreateButton() {
  const { startWaiting, endWaiting, isWaiting, Wait } = useWait();

  return (
    <button
      onClick={() => startWaiting("creating user")}
      disabled={isWaiting("creating user")}
    >
      <Wait on="creating user" fallback={<div>Creating user!</div>}>
        Create User
      </Wait>
    </button>
  );
}

3. Wrap with the Waiter Context Provider

And you should wrap your App with Waiter component. It's actually a Context.Provider that provides a loading context to the component tree.

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Waiter>
    <App />
  </Waiter>,
  rootElement
);

Installation

$ yarn add react-wait
# or if you using npm
$ npm install react-wait

The API

react-wait provides some helpers to you to use in your templates.

anyWaiting()

Returns boolean value if any loader exists in context.

const { anyWaiting } = useWait();

return <button disabled={anyWaiting()}>Disabled while waiting</button>;

isWaiting(waiter String)

Returns boolean value if given loader exists in context.

const { isWaiting } = useWait();

return (
  <button disabled={isWaiting("creating user")}>
    Disabled while creating user
  </button>
);

startWaiting(waiter String)

Starts the given waiter.

const { startWaiting } = useWait();

return <button onClick={() => startWaiting("message")}>Start</button>;

endWaiting(waiter String)

Stops the given waiter.

const { end } = useWait();

return <button onClick={() => endWaiting("message")}>Stop</button>;

Using Wait Component

function Component() {
  const { Wait } = useWait();
  return (
    <Wait on="the waiting message" fallback={<div>Waiting...</div>}>
      The content after waiting done
    </Wait>
  );
}

Better example for a button with loading state:

<button disabled={isWaiting("creating user")}>
  <Wait on="creating user" fallback={<div>Creating User...</div>}>
    Create User
  </Wait>
</button>

Making Reusable Loader Components

With reusable loader components, you will be able to use custom loader components as example below. This will allow you to create better user loading experience.

function Spinner() {
  return <img src="spinner.gif" />;
}

Now you can use your spinner everywhere using waiting attribute:

<button disabled={isWaiting("creating user")}>
  <Wait on="creating user" fallback={<Spinner />}>
    Create User
  </Wait>
</button>

Creating Waiting Contexts using createWaitingContext(context String)

To keep your code DRY you can create a Waiting Context using createWaitingContext.

function CreateUserButton() {
  const { createWaitingContext } = useWait();

  // All methods will be curried with "creating user" on.
  const { startWaiting, endWaiting, isWaiting, Wait } = createWaitingContext(
    "creating user"
  );

  function createUser() {
    startWaiting();
    setTimeout(endWaiting, 1000);
  }

  return (
    <Button disabled={isWaiting()} onClick={createUser}>
      <Wait fallback="Creating User...">Create User</Wait>
    </Button>
  );
}

Contributors

  • Fatih Kadir Akın, (creator)

Other Implementations

Since react-wait based on a very simple idea, it can be implemented on other frameworks.

  • vue-wait: Multiple Process Loader Management for Vue.
  • dom-wait: Multiple Process Loader Management for vanilla JavaScript.

License

MIT © Fatih Kadir Akın

More Repositories

1

awesome-chatgpt-prompts

This repo includes ChatGPT prompt curation to use ChatGPT better.
HTML
95,527
star
2

graphql.js

A Simple and Isomorphic GraphQL Client for JavaScript
JavaScript
2,256
star
3

vue-wait

Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
JavaScript
2,005
star
4

omelette

Omelette is a simple, template based autocompletion tool for Node and Deno projects with super easy API. (For Bash, Zsh and Fish)
CoffeeScript
1,355
star
5

delorean

An Agnostic, Complete Flux Architecture Framework
JavaScript
747
star
6

fatura

eArşiv / eFatura Fatura Oluşturucu
JavaScript
548
star
7

vue-smart-route

Smart route search to make intelligent looking apps with Vue.js.
JavaScript
319
star
8

atom-term2

THIS PROJECT IS NO LONGER MAINTAINED. PLEASE USE ATOM TERM3 PACKAGE
CoffeeScript
296
star
9

guardian

Guardian watches over your files and run assigned tasks.
Crystal
277
star
10

loremjs

Lorem.js Dummy Text/Image Generator for jQuery and Native JS
HTML
189
star
11

react-hooks-todo-app

A highly testable TodoList app that uses React hooks and Context.
JavaScript
187
star
12

kamber

Static site server (basically blogs) with Crystal Language
Crystal
173
star
13

dom-wait

Complex Loader and Progress Management for Vanilla JS
HTML
143
star
14

pq

Human Readable Promise Chains
JavaScript
143
star
15

vue-plugin-boilerplate

Vue Plugin Boilerplate
JavaScript
122
star
16

confirmation

A simple Node tool to replicate Browser's confirm popup on your CLI.
JavaScript
115
star
17

netflix-data

All Netflix Genres
111
star
18

dahi

Türkçe NLP'de bir marka (Parody)
JavaScript
97
star
19

atom-bootstrap3

Twitter Bootstrap 3 Snippets for Atom
CoffeeScript
81
star
20

completion

Easy Command Line Completion for Crystal
Crystal
70
star
21

honst

Fixes your dataset according to your rules.
JavaScript
69
star
22

do-sshuttle

Use DigitalOcean Droplet to Transparent Proxying via sshuttle
Shell
66
star
23

baristai

TypeScript
66
star
24

equiv

It finds equivalents of the things.
Crystal
60
star
25

kemal-react-chat

This demonstrates how easy it is to build Realtime Web applications with Kemal.
JavaScript
60
star
26

temel

Extensible Markup DSL for Crystal
Crystal
59
star
27

omi-devtools

DevTools for Omi.js
JavaScript
54
star
28

vue-analog-clock-range

Vue Analog Clock Range Component
Vue
52
star
29

kreal

Kreal is a model sharing & RPC library built on and works with Kemal seamlessly.
HTML
44
star
30

ufcs

DLang's Universal Function Call Syntax port to JavaScript
JavaScript
42
star
31

xtract

Extract data from DOM, easily.
JavaScript
40
star
32

lambda.cr

Uniformed function call syntax for Crystal Language.
Crystal
36
star
33

qvimrc

Quick Vimrc
Vim Script
33
star
34

deasciifier

Deasciifier yabancı metinleri Türkçeye çevirmenize yarayan bir uygulamadır.
JavaScript
29
star
35

emoji-downloader

A simple Emoji downloader for CLI
Shell
29
star
36

phaser-coffee-boilerplate

Phaser CoffeeScript + Browserify + LiveReload Boilerplate
CoffeeScript
27
star
37

hexwords-tr

Turkish Hex Words
JavaScript
27
star
38

graphql.js-demo

GraphQL.js Sinatra Example
Ruby
24
star
39

macaron

Macros for CoffeeScript
CoffeeScript
24
star
40

postcss-inline-image

PostCSS plugin that puts images as data URIs into your CSS
JavaScript
21
star
41

sofle-mario

C
21
star
42

dont-fail-me-again

Node.js Error Handler by The Dark Side
JavaScript
21
star
43

fka

JavaScript
20
star
44

idiot

Easier NodeMCU Environment - IoT Made Simple
MoonScript
19
star
45

storm-bitbar

BitBar plugin for Storm-SSH
Shell
16
star
46

veznedar

Arapça Kök Üreteci
JavaScript
16
star
47

graphqljs-rails

GraphQL.js Rails for Rails 5
JavaScript
15
star
48

f

14
star
49

view.coffee

Dead Simple, Vanilla-ish Client-Side Framework based on jQuery, inspired by GitHub's Space-Pen Library
CoffeeScript
13
star
50

jquery.resizestop

Special Event for Resize Controls
12
star
51

awesome-safran

Safran CLI Okuyucuları
12
star
52

safran-cli

Safran.io için command line okuyucu.
JavaScript
11
star
53

GitHubDashboard.kdapp

GitHubDashboard
CoffeeScript
11
star
54

twhosts

Twitter Unblock
10
star
55

jackpack

JackPack
JavaScript
9
star
56

mood-convert-ampt

JavaScript
9
star
57

backbone-presentation

Backbone.js Presentation (Turkish)
JavaScript
9
star
58

popthelock

Pop The Lock JS Clone
8
star
59

puremise.js

Yet another purely functional Promise Monad implementation
JavaScript
8
star
60

mertlang

8
star
61

boehm

7
star
62

wolves

JavaScript port of lykoss/lykos, a Werewolf party game IRC bot
CoffeeScript
7
star
63

knockbone

Knockout.js and Backbone.js Entegration
JavaScript
7
star
64

dyncall

Dynamic method calling support for Crystal Language.
Crystal
6
star
65

lama.app

OS X Application Helper for emre/lama
Objective-C
6
star
66

ircbot

IRC Bot Framework
PHP
6
star
67

kurye

GitHub Project Cloner for Boilerplate Projects
Python
6
star
68

llm-viz-tr

TypeScript
6
star
69

r3

Ruby
5
star
70

html5init

HTML5 Project Startup
CSS
5
star
71

ronin

Very simple Jinja2 based Static Site Boilerplate
Python
5
star
72

plug

jquery plugin generator.
JavaScript
5
star
73

vimme

my newest simple vim environment
Vim Script
5
star
74

shelljs

Javascript + PHP ShellLike Application
5
star
75

pinata

Sinatra-like PHP Framework
PHP
5
star
76

twittersearch

Workshop Project for Ozgur Web Gunleri 2012
JavaScript
4
star
77

restafarian

Node.js Restful Client
3
star
78

mvc

PHP
3
star
79

kamber-theme-default

Kamber Default Template
CSS
3
star
80

cssmodules-demo

Ruby
2
star
81

notes

HTML
2
star
82

win-turkish-us-layout

Windows sistemlere OS X'teki `ALT + harf` desteği sağlar.
2
star
83

kamber-theme-dark

Dark theme for Kamber
CSS
2
star
84

lolero

Lölero Language
1
star
85

knapsack-problem

Solving Knapsack Problem with dynamic programming in Ruby
Ruby
1
star
86

umut

1
star
87

dotvim

Vim Script
1
star
88

turkiye-brand-db

The Brands Database for Turkey
1
star
89

keybase-messenger

keybase based crypted local messenger interface running on firebase
1
star
90

jspy

jspy conference 2012 website
1
star
91

md5solve

MD5 decrypter. Generates content from it's MD5 sum. Work in progress.
1
star
92

react-rails-server-side-example

React Rails with Server Side Rendering Example
JavaScript
1
star
93

crystal-kemal-todo-list

TodoList based on Crystal and Kemal
HTML
1
star
94

react-playground

JavaScript
1
star
95

popeye

Popeye.js ~ Backbone.js PowerUp Wrapper
JavaScript
1
star
96

respublica

Complete Vieux Framework - "Res publica non dominetur"
1
star
97

perr

Perr UI Library using CoffeeScript
JavaScript
1
star
98

vim-script-template

Vim Script
1
star
99

dotfiles

Dotfiles for myself
Vim Script
1
star
100

eventstream.js

Pure functional EventStream monad implementation
JavaScript
1
star