@makejack4/react-simple-client-hook
v0.0.5
Published
This package is sitll beta.
Downloads
3
Maintainers
superaumanReadme
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