Git Product home page Git Product logo

use-watch-status's Introduction

useWatchStatus

NPM JavaScript Style Guide

Features

  • ๐Ÿ“œ Supports (Tested on 4.1+) TypeScript type definition.
  • ๐Ÿฆ” Tiny size. No external dependencies, aside for the react;

Requirement

To use use-watch-status, you must use [email protected] or greater which includes hooks.

Install

npm install --save use-watch-status

API

const [checks, triggers, clear] = useWatchStatus(STATUS_STATES, INITIAL_STATE)
 @param     events - override default events (MUST BE A CONSTANT, and NOT defined at runtime)
 @param     initialEvent - initial state
 @returns   EventChecks - Only one of these checks will be true at any given time
 @returns   EventTriggers - Can be used to turn a single check to true
 @returns   Clear - Can be used to clear state

Usage

import React from 'react'
import { useWatchStatus } from 'use-watch-status'

// NOTE: Without 'as const' on this array all the typescript typings will break
const ALL_POTENTIAL_STATUS_STATES = ['ready', 'loading', 'complete'] as const;

const Example = () => {
  const [checks, triggers, clear] = useWatchStatus(ALL_POTENTIAL_STATUS_STATES, 'ready')
  
  useEffect(() => {
    // simulate ready
    triggers.onReady();

    // simulate loading
    setTimeout(() => {
      triggers.onLoading();

      // simulate loading for 5 seconds, before being marked as complete
      setTimeout(() => triggers.onComplete(), 5 * 1000);
    }, 2 * 1000);
  }, []);

  return (
    <div>
      {checks.isReady && 'Action is ready'}
      {checks.isLoading && 'Action is loading...'}
      {checks.isComplete && 'Action Complete!'}
    </div>
  )
}

Useful Recipe

Create a wrapper around the hook for re-use

const NETWORK_FETCH_STATUS_STATES = ['ready', 'loading', 'error', 'finished', 'timeout'];

const useWatchFetchStatus = () => useWatchStatus(NETWORK_FETCH_STATUS_STATES);

// - Usage - 

const App = () => {
  const [fetchStatusChecks, fetchStatusTriggers, clear] = useWatchFetchStatus();

  useEffect(() => {
    if (isNetworkAccessable) {     // <--- pretend check before triggering 'ready' status
      fetchStatusTriggers.onReady();
    }
  }, []);

  if (fetchStatusChecks.isReady) {
    // Do something
  }

  function resetStatus() {
    clear();
  }

  return (
    ...Some Code
  )
}

Community

Please don't be shy, if you think there are improvements to be made, then submit an issue.

License

MIT ยฉ ClickyCrispp


use-watch-status's People

Contributors

clickycrispp avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.