@oneblink/apps-react
    Preparing search index...

    Function useLoadResourcesState

    • This function is a react hook for managing the state involved with loading resources.

      import { useLoadResourcesState } from '@oneblink/apps-react'
      const fetchResources = async () => {
      const response = await fetch(`https://some-website.com/api?data=data`)

      if (!response.ok) {
      const text = await response.text()
      throw new Error(text)
      }

      return await response.json()
      }

      const MyComponent = () => {
      const [resources, isLoading, loadError, refresh, setResult] =
      useLoadResourcesState(fetchResources)

      if (isLoading) {
      return <Loading />
      }

      if (loadError) {
      return (
      <>
      <Error message={state.error} />
      <button onClick={refresh}>Try Again</button>
      </>
      )
      }

      return (
      <>
      {resources.map((resource) => {
      // RENDER UI
      return <></>
      })}
      </>
      )
      }

      export default MyComponent

      Type Parameters

      • T

      Parameters

      • onLoad: (abortSignal: AbortSignal) => Promise<T[]>

        The function that fetches your resources. Should be a Promise that returns your array of resources

      Returns [
          resources: T[],
          isLoading: boolean,
          loadError: Error
          | null,
          handleRefresh: () => void,
          setResult: Dispatch<SetStateAction<T[]>>,
      ]