0.0.5 • Published 9 months ago
@makejack4/react-simple-client-hook v0.0.5
Welcome to React Simple Client Hook!
This package is sitll beta.
Note : This package work only client side.
Installation
npm install @makejack4/react-simple-client-hook
or
yarn add @makejack4/react-simple-client-hook
How to use
| Name | Optional | Type |
|---|---|---|
| data | false | Type of task Return |
| onReuqest | false | function(payload: your type) |
| loading | false | boolean |
| error | true | any |
Setup Provider in Root Project
import { ReactSimpleClientHookProvider } from '@makejack4/react-simple-client-hook'
export const RootApp = () => {
return (
<ReactSimpleClientHookProvider>
<body>{children}</body>
</ReactSimpleClientHookProvider>
)
}Create Hook
import { CreateClientHook } from '@makejack4/react-simple-client-hook'
export const useTestHook = () =>
CreateClientHook({
name: 'testHook',
task: async (payload: { id: string; number: number[] }) => {
// .... your logic
return {
key: payload.id,
myArray: payload.number,
}
},
})Use Hook
import { useTestHook } from '[YOUR_RELATIVE_PATH]'
export const MyPageComponent () => {
const { data, onRequest, loading } = useTestHook()
const onClickTest = async () => {
const response = await onRequest({ id: '1', number: [1,2,3] })
// should output { ok : true, data : { key : '1', myArray: [1,2,3]}, error: null } follow by task while create hook
console.log(response)
}
return (
<div>
<button onClick={onClickTest}>click</button>
<div> data : {JSON.stringify(data)}</div>
<div> loading : {loading}</div>
</div>
)
}Props Description
| Name | Required | Type | Default value | Return |
|---|---|---|---|---|
| name | true | String | ||
| task | true | function | Type of task Return | |
| dataPolicy | false | 'default','merge-deep','no-store' | 'default' | |
| initialState | false | Value | null |
dataPolicy Props Description
By default on create your hook will be set 'default' but you can change it, each "dataPolicy" value will be describe below.
- 'default' = your return data of task is latest will be store in "context"
- 'merge-deep' = your return data of task is latest will be merged with previous data in "context" and store in "context"
- 'no-store' = your return data of task will not be store in "context" but only return during you get callback "onRequest" only