Have ideas to improve npm?Join in the discussion! »

    @featherweight/react-resource-ts
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published

    @featherweight/react-resource-ts

    Intro

    React Resource is a React Hooks library for data fetching based on Resource ADT

    Install

    npm install --save @featherweight/react-resource-ts @featherweight/resource-ts fp-ts

    Don't forget to install peer dependencies: @featherweight/resource-ts and fp-ts.

    Quick start

    First, you need to wrap you app with ResourceProvider.

    import React from 'react'
    import {useResource, Succeded, Failed} from '@featherweight/react-resource-ts'
     
    import {fetchArticles} from './api'
     
    const Articles = () => {
      const articles = useResource(fetchArticles)
     
      if (articles.isInitial) return null
     
      if (articles.isPending) return <div>Loading articles...</div>
     
      return (
        <div>
          <Succeded of={articles.resource}>
            {articles => (
              <ul>
                {articles.map(article => (
                  <li>{article.title}</li>
                ))}
              </ul>
            )}
          </Succeded>
          <Failed of={articles.resource}>
            <div>Cannot load articles =(</div>
          </Failed>
        </div>
      )
    }

    API

    useResource

    useResource<O, D, E>(load, config?), where O - options for load fuction; D - response type; E - error type;

    const {
      cancel: () => void,
      error?: E,
      isFailed: boolean,
      isInitial: boolean,
      isPending: boolean,
      isSucceded: boolean,
      reset: () => void,
      resource: Resource<D, E>,
      run: (o: O=> Promise<Resource<D, E>>,
      state: string,
      value?: D,
    } = useResource<O, D, E>(
      loadFn: (o: O, meta: Meta) => Promise<D>,
      config?: {
        args?: O
        chain?: Resource<any, any>
        defer?: boolean
        dependencies?: any[]
        namespace?: string
        onFail?: (e: E) => void
        onSuccess?: (v: D) => void
        reducer?: CustomReducer<D, E>
        skipPending?: number
      }
    )

    useResource.withError

    useResource.withError<E>() binds error type and returns useResource<_, _, E>.

    import {HTTPErrorType} from './http'
     
    const useHttpResource = useResource.withError<HTTPErrorType>()

    useTask

    useTask<O, D> is an alias for useResource<O, D, Error>.

    create

    Factory function for creating pre-configured useResource hook.

    const useUserResource = create(fetchUser, {namespace: 'user'})

    create.withError

    Binds error to create factory function.

    const useUserResource = create.withError<HttpErrorType>()(fetchUser, {
      namespace: 'user',
    })

    Components

    You can use helper components to declaratively render ui based on resource state.

    import {
      Initial,
      Pending,
      Succeded,
      Failed,
    } from '@featherweight/react-resource-ts'
     
    const user = useResource(fetchUser)
     
    const rendered = (
      <>
        <Succeded of={user.resource}>
          {(user) => <div>{user.name}</div>}
        </Succeded>
        <Failed of={user.resource}>
          {(error) => <div>{error.toString()}</div>}
        </Failed>
        <Pending of={user.resource} render={() => <div>Loading...</div>}>
        <Initial of={user.resource}>
          <div>Nothing there yet</div>
        </Initial>
      </>
    )

    Install

    npm i @featherweight/react-resource-ts

    DownloadsWeekly Downloads

    12

    Version

    0.5.0

    License

    none

    Unpacked Size

    158 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar
    • avatar