@faasjs/react
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
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 >> |
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 <Response <Data >> |
FaasDataWrapperProps
Ƭ FaasDataWrapperProps<PathOrData
>: Object
Type parameters
Name | Type |
---|---|
PathOrData | extends FaasAction |
Type declaration
Name | Type | Description |
---|---|---|
action | string | - |
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
Name | Type |
---|---|
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
Name | Type |
---|---|
PathOrData | extends FaasAction |
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(__namedParameters
): FaasReactClientInstance
Before use faas, you should initialize a FaasReactClient.
Parameters
Name | Type |
---|---|
__namedParameters | Object |
__namedParameters.domain | string |
__namedParameters.options? | Options |
__namedParameters.onError? | (action : string , params : Record <string , any >) => (res : ResponseError ) => Promise <void > |
Returns
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 FaasAction |
Parameters
Name | Type | Description |
---|---|---|
action | string | PathOrData | action name |
params | FaasParams <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
Name | Type | Description |
---|---|---|
domain? | string | empty string for default domain |
Returns
getClient()
// or
getClient('another-domain')
useFaas
▸ useFaas<PathOrData
>(action
, defaultParams
): FaasDataInjection
<FaasData
<PathOrData
>>
Request faas server with React hook
Type parameters
Name | Type |
---|---|
PathOrData | extends FaasAction |
Parameters
Name | Type | Description |
---|---|---|
action | string | PathOrData | action name |
defaultParams | FaasParams <PathOrData > | initial action params |
Returns
FaasDataInjection
<FaasData
<PathOrData
>>
function Post ({ id }) {
const { data } = useFaas<{ title: string }>('post/get', { id })
return <h1>{data.title}</h1>
}