@faasjs/react

License: MITopen in new windowNPM Stable Versionopen in new windowNPM Beta Versionopen in new window

React plugin for FaasJS.

Install

npm install @faasjs/react

Modules

Classes

Type aliases

Functions

Type aliases

FaasDataInjection

Ƭ FaasDataInjection<Data>: Object

Injects FaasData props.

Type parameters

NameType
Dataany

Type declaration

NameType
actionstring | any
dataData
errorany
loadingboolean
paramsRecord<string, any>
promisePromise<Response<Data>>
setDataReact.Dispatch<React.SetStateAction<Data>>
setErrorReact.Dispatch<React.SetStateAction<any>>
setLoadingReact.Dispatch<React.SetStateAction<boolean>>
setPromiseReact.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
reload(params?: Record<string, any>) => Promise<Response<Data>>

FaasDataWrapperProps

Ƭ FaasDataWrapperProps<PathOrData>: Object

Type parameters

NameType
PathOrDataextends FaasAction

Type declaration

NameTypeDescription
actionstring-
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[]-

FaasReactClientInstance

Ƭ FaasReactClientInstance: Object

Type declaration

NameType
FaasDataWrapper<PathOrData>(props: FaasDataWrapperProps<PathOrData>) => Element
faas<PathOrData>(action: string | PathOrData, params: FaasParams<PathOrData>) => Promise<Response<FaasData<PathOrData>>>
useFaas<PathOrData>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>) => FaasDataInjection<FaasData<PathOrData>>

Options

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


ResponseHeaders

Ƭ ResponseHeaders: Object

Index signature

▪ [key: string]: string

Functions

FaasDataWrapper

FaasDataWrapper<PathOrData>(props): JSX.Element

A data wrapper for react components

Type parameters

NameType
PathOrDataextends FaasAction

Parameters

NameType
propsFaasDataWrapperProps<PathOrData>

Returns

JSX.Element

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

FaasReactClient

FaasReactClient(__namedParameters): FaasReactClientInstance

Before use faas, you should initialize a FaasReactClient.

Parameters

NameType
__namedParametersObject
__namedParameters.domainstring
__namedParameters.options?Options
__namedParameters.onError?(action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>

Returns

FaasReactClientInstance

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

faas

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

Request faas server

Type parameters

NameType
PathOrDataextends FaasAction

Parameters

NameTypeDescription
actionstring | PathOrDataaction name
paramsFaasParams<PathOrData>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

NameTypeDescription
domain?stringempty string for default domain

Returns

FaasReactClientInstance

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

useFaas

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

Request faas server with React hook

Type parameters

NameType
PathOrDataextends FaasAction

Parameters

NameTypeDescription
actionstring | PathOrDataaction name
defaultParamsFaasParams<PathOrData>initial action params

Returns

FaasDataInjection<FaasData<PathOrData>>

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