@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
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>
}