Skip to content

Commit bde1753

Browse files
committed
docs: add docs
1 parent bbb6436 commit bde1753

File tree

1 file changed

+44
-1
lines changed

1 file changed

+44
-1
lines changed

README.md

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# vue-compose-promise [![Build Status](https://badgen.net/circleci/github/posva/vue-compose-promise)](https://circleci.com/gh/posva/vue-compose-promise) [![npm package](https://badgen.net/npm/v/vue-compose-promise)](https://www.npmjs.com/package/vue-compose-promise) [![coverage](https://badgen.net/codecov/c/github/posva/vue-compose-promise)](https://codecov.io/github/posva/vue-compose-promise) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)
22

3-
> Some awesome description
3+
> Easily manipulate Promises and their state in Vue
4+
5+
**Depends on [@vue/composition-api](https://github.com/vuejs/composition-api)**
46

57
Demo (TODO link)
68

@@ -12,10 +14,51 @@ npm install vue-compose-promise
1214

1315
## Usage
1416

17+
```vue
18+
<template>
19+
<div>
20+
<span> Is the promise still pending: {{ usersPromise.isPending }} </span>
21+
<span> Is the 200ms delay over: {{ usersPromise.isDelayOver }} </span>
22+
<span>
23+
Last succesfully resolved data from the promise: {{ usersPromise.data }}
24+
</span>
25+
<span> Error if current promise failed: {{ usersPromise.error }} </span>
26+
</div>
27+
</template>
28+
29+
<script>
30+
import { createComponent } from '@vue/composition-api'
31+
import { usePromise } from 'vue-compose-promise'
32+
33+
export default createComponent({
34+
setup() {
35+
const promised = usePromise({ pendingDelay: 200, promise: fetchUsers() })
36+
37+
return {
38+
usersPromise: promised.state,
39+
40+
fetchUsers() {
41+
promised.state.promise = fetchUsers()
42+
},
43+
}
44+
},
45+
})
46+
</script>
47+
```
48+
1549
## API
1650

51+
### `usePromise<T>(options?: { pendingDelay?: number | Ref<number>; promise?: Promise<T> | Ref<Promise<T>> })`
52+
53+
- `options`
54+
- `pendingDelay`: amount of time in _ms_ that should be wait whenever the a new promise is pending. This allows delaying the display of a loader to avoid flashing the screen. Can be a _reactive_ property.
55+
- `promise`: initial promise. Can be null. Can be a _reactive_ property.
56+
1757
## Related
1858

59+
- [vue-promised](https://github.com/posva/vue-promised)
60+
- [@vue/composition-api](https://github.com/vuejs/composition-api)
61+
1962
## License
2063

2164
[MIT](http://opensource.org/licenses/MIT)

0 commit comments

Comments
 (0)