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

0.0.4-beta.2 • Public • Published

@faasjs/react

License: MIT NPM Stable Version NPM Beta Version

React plugin for FaasJS.

If you use SWR or React Query / TanStack Query, please use @faasjs/browser directly.

Install

npm install @faasjs/react react react-dom

Modules

Classes

Interfaces

Type Aliases

Functions

Type Aliases

ErrorChildrenProps

Ƭ ErrorChildrenProps: Object

Type declaration

Name Type
error? Error
errorDescription? string
errorMessage? string
info? any

FaasAction

Ƭ FaasAction: FaasActionPaths | Record<string, any>


FaasData

Ƭ FaasData<T>: T extends FaasActionPaths ? FaasActions[T]["Data"] : T

Type parameters

Name Type
T any

FaasDataInjection

Ƭ FaasDataInjection<Data>: Object

Injects FaasData props.

Type parameters

Name Type
Data any

Type declaration

Name Type
action string | any
data Data
error any
loading boolean
params Record<string, any>
promise Promise<Response<Data>>
reloadTimes number
setData React.Dispatch<React.SetStateAction<Data>>
setError React.Dispatch<React.SetStateAction<any>>
setLoading React.Dispatch<React.SetStateAction<boolean>>
setPromise React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
reload (params?: Record<string, any>) => Promise<any>

FaasDataWrapperProps

Ƭ FaasDataWrapperProps<PathOrData>: Object

Type parameters

Name Type
PathOrData extends FaasAction

Type declaration

Name Type Description
action string -
children? React.ReactElement<Partial<FaasDataInjection>> -
data? FaasData<PathOrData> use custom data, should work with setData
fallback? JSX.Element | false -
params? FaasParams<PathOrData> -
setData? React.Dispatch<React.SetStateAction<FaasData<PathOrData>>> use custom setData, should work with data
onDataChange? (args: FaasDataInjection<FaasData<PathOrData>>) => void -
render? (args: FaasDataInjection<FaasData<PathOrData>>) => Element | Element[] -

FaasParams

Ƭ FaasParams<T>: T extends FaasActionPaths ? FaasActions[T]["Params"] : any

Type parameters

Name Type
T any

FaasReactClientInstance

Ƭ FaasReactClientInstance: Object

Type declaration

Name Type
faas <PathOrData>(action: string | PathOrData, params: FaasParams<PathOrData>) => Promise<Response<FaasData<PathOrData>>>
id string
useFaas <PathOrData>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: useFaasOptions<PathOrData>) => FaasDataInjection<FaasData<PathOrData>>
FaasDataWrapper <PathOrData>(props: FaasDataWrapperProps<PathOrData>) => Element

Options

Ƭ Options: RequestInit & { beforeRequest?: ({ action, params, options, }: { action: string ; options: Options ; params: Record<string, any> }) => Promise<void> | void ; headers?: { [key: string]: string; } ; request?: <PathOrData>(url: string, options: Options) => Promise<Response<FaasData<PathOrData>>> }


ResponseHeaders

Ƭ ResponseHeaders: Object

Index signature

▪ [key: string]: string


useFaasOptions

Ƭ useFaasOptions<PathOrData>: Object

Type parameters

Name Type
PathOrData extends FaasAction

Type declaration

Name Type Description
data? FaasData<PathOrData> -
debounce? number send the last request after milliseconds
params? FaasParams<PathOrData> -
setData? React.Dispatch<React.SetStateAction<FaasData<PathOrData>>> -
skip? boolean -

Functions

FaasDataWrapper

FaasDataWrapper<PathOrData>(props): JSX.Element

A data wrapper for react components

Type parameters

Name Type
PathOrData extends Record<string, any>

Parameters

Name Type
props FaasDataWrapperProps<PathOrData>

Returns

JSX.Element

<FaasDataWrapper<{
  id: string
  title: string
}>
  action='post/get'
  params={ { id: 1 } }
  render={ ({ data }) => <h1>{ data.title }</h1> }
/>

FaasReactClient

FaasReactClient(«destructured»): FaasReactClientInstance

Before use faas, you should initialize a FaasReactClient.

Parameters

Name Type
«destructured» Object
› domain string
› onError? (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>
› options? Options

Returns

FaasReactClientInstance

const client = FaasReactClient({
  domain: 'localhost:8080/api'
})

faas

faas<PathOrData>(action, params): Promise<Response<FaasData<PathOrData>>>

Request faas server

Type parameters

Name Type
PathOrData extends Record<string, any>

Parameters

Name Type Description
action string | PathOrData {string} action name
params FaasParams<PathOrData> {object} action params

Returns

Promise<Response<FaasData<PathOrData>>>

faas<{ title: string }>('post/get', { id: 1 }).then(res => {
  console.log(res.data.title)
})

getClient

getClient(domain?): FaasReactClientInstance

Get FaasReactClient instance

Parameters

Name Type Description
domain? string {string} empty string for default domain

Returns

FaasReactClientInstance

getClient()
// or
getClient('another-domain')

useFaas

useFaas<PathOrData>(action, defaultParams, options?): FaasDataInjection<FaasData<PathOrData>>

Request faas server with React hook

Type parameters

Name Type
PathOrData extends Record<string, any>

Parameters

Name Type Description
action string | PathOrData {string} action name
defaultParams FaasParams<PathOrData> {object} initial action params
options? useFaasOptions<PathOrData> -

Returns

FaasDataInjection<FaasData<PathOrData>>

function Post ({ id }) {
  const { data } = useFaas<{ title: string }>('post/get', { id })
  return <h1>{data.title}</h1>
}

Keywords

none

Install

DownloadsWeekly Downloads

808

Version

0.0.4-beta.2

License

MIT

Unpacked Size

34.6 kB

Total Files

7

Last publish

Collaborators

  • zfben