simple-boot-react

Our primary goals are

• Provides react hooks, state, utils, and more.

---

• simple-boot-react
  • Installation
  • hooks
    • usePromiseState
    • useDependencyCallBackCleanUp
    • useNotFalsy
    • useNotNullish
    • useObservable
    • useObservableUnsubscribe
    • usePromise
    • usePromiseCleanUp
    • usePromiseLazy
    • usePromiseNotNullish
    • useWindow

Installation

npm install --save simple-boot-react

hooks

usePromiseState()

manage the state of the promise.

Usage

function Component() {
  const data = usePromiseState({
    factory: () => Promise.resolve('hello')
  })
  return (<div>
    <div>{data.state}</div>
    <div>{data.isError}</div>
    <div>{data.isLoading}</div>
    <div>{data.isSuccess && data.data}</div>
  </div>)
}

option

• usePromiseState<T, RP>: StateHook - T is Promise return type, RP is Factory Parameters type
  • factory: () => Promise - promise factory
  • success: (data: T) => void - success callback
  • error: (error: any) => void - error callback
  • manual: boolean - if true, the promise is not executed automatically.
  • signal: (type: 'retry' | 'success' | 'error' | 'loading' | 'ready', data: StateHook) => void - signal callback
  • executeConfig: { noCacheLoad?: boolean, retry?: number }

useDependencyCallBackCleanUp()

Usage

function Component() {
  usePromiseCleanUp(() => {
    return new Promise<() => void>((resolve, reject) => {
      //cleanUp function return 
      resolve(() => {
        console.log('cleanUp')
      })
    });
  }, [data])
  return <div></div>
}

useNotFalsy()

Usage

function Component() {
  const notFalsyData = useNotFalsy((data) => {
    return data.length;
  }, 'data');
  return <div>{notFalsyData.length}</div>
}

useNotFalsyCallBackCleanUp()

Usage

function Component() {
  useNotFalsyCallBackCleanUp((data) => {
    return () => {
      console.log('useNotFalsyCallBackCleanUp cleanUp')
    }
  }, data)
  return <div></div>
}

useNotNullish()

Usage

function Component() {
  const notNullishData = useNotNullish((data) => {
    return data.length;
  }, 'data');
  return <div>{notNullishData}</div>
}

useNotNullishCallBackCleanUp()

Usage

function Component() {
  useNotNullishCallBackCleanUp((data) => {
    return () => {
      console.log('useNotNullishCallBackCleanUp cleanUp')
    }
  }, data)
  return <div>{notNullishData}</div>
}

useObservable()

Usage

function Component() {
  return <div></div>
}

useObservableUnsubscribe()

Usage

function Component() {
  useObservableUnsubscribe(() => {
    return subject.pipe(debounceTime(500), distinctUntilChanged()).subscribe(it => {
     // ... 
    })
  })
  return <div></div>
}

usePromise()

Usage

function Component() {
  return <div></div>
}

usePromiseCleanUp()

Usage

function Component() {
  return <div></div>
}

usePromiseLazy()

Usage

function Component() {
  return <div></div>
}

usePromiseNotNullish()

Usage

function Component() {
  return <div></div>
}

useWindow()

Usage

function Component() {
  return <div></div>
}