2.2.2 • Published 4 years ago
@livelybone/use-async-data v2.2.2
@livelybone/use-async-data
pkg.module supported
, which means that you can apply tree-shaking in you project
A react hook for deal data that generated asynchronously
repository
https://github.com/livelybone/use-async-data.git
Demo
https://github.com/livelybone/use-async-data#readme
Run Example
you can see the usage by run the example of the module, here is the step:
- Clone the library
git clone https://github.com/livelybone/use-async-data.git
- Go to the directory
cd use-asyn-data
- Install npm dependencies
npm i
(use taobao registry:npm i --registry=http://registry.npm.taobao.org
) - Open service
npm run dev
- See the example(usually is
http://127.0.0.1:3000/examples/test.html
) in your browser
Installation
npm i -S @livelybone/use-async-data
Global name - The variable the module exported in umd
bundle
useAsyncData
Interface
See what method or params you can use in index.d.ts
Usage
import useAsyncData from '@livelybone/use-async-data'
function getAsyncData(arg1: any, arg2: any): Promise<any> {
// get data asynchronously via fetch/xhr/mock
}
const App = () => {
// `setData` is used to update data manually
const { data, getData, isFetching, setData } = useAsyncData(
getAsyncData,
{},
console.error,
)
return (
<article>
<button
onClick={() =>
getData('first argument', 'second argument').catch(console.error)
}
>
Get Data
</button>
<p>Is Fetching: {isFetching}</p>
<p>Data: {JSON.stringify(data)}</p>
</article>
)
}
CDN
Use in html, see what you can use in CDN: unpkg
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/use-async-data/lib/umd/<--module-->.js"></script>
Or,see what you can use in CDN: jsdelivr
<script src="https://cdn.jsdelivr.net/npm/@livelybone/use-async-data/lib/umd/<--module-->.js"></script>