@faasjs/react

React plugin for FaasJS.

Install

npm install @faasjs/react

Modules

Classes

• FaasBrowserClient
• Response
• ResponseError

Type aliases

• FaasDataInjection
• FaasDataWrapperProps
• FaasReactClientInstance
• Options
• ResponseHeaders

Functions

• FaasDataWrapper
• FaasReactClient
• faas
• getClient
• useFaas

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

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

FaasReactClientInstance

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