@@ -34,29 +34,31 @@ Please check the [documentation](https://microcipcip.github.io/vue-use-kit/) to
34
34
35
35
- Sensors
36
36
- [ ` useHover ` ] ( ./src/components/useHover/stories/useHover.md ) &mdash ; tracks mouse hover state of a given element.
37
- [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usehover--demo )
37
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usehover--demo )
38
38
- [ ` useMedia ` ] ( ./src/components/useMedia/stories/useMedia.md ) &mdash ; tracks state of a CSS media query.
39
- [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--demo )
40
- [ ![ Demo] ( https://img.shields.io/badge/advanced_demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--advanced-demo )
39
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--demo )
40
+ [ ![ Demo] ( https://img.shields.io/badge/advanced_demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--advanced-demo )
41
41
- [ ` useMouse ` ] ( ./src/components/useMouse/stories/useMouse.md ) &mdash ; tracks the mouse position.
42
- [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--demo )
43
- [ ![ Demo] ( https://img.shields.io/badge/advanced_demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--advanced-demo )
42
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--demo )
43
+ [ ![ Demo] ( https://img.shields.io/badge/advanced_demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--advanced-demo )
44
44
- [ ` useMouseElement ` ] ( ./src/components/useMouseElement/stories/useMouseElement.md ) &mdash ; tracks the mouse position relative to given element.
45
- [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo )
45
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo )
46
46
- Animations
47
+ - [ ` useRaf ` ] ( ./src/components/useRaf/stories/useRaf.md ) &mdash ; returns ` elapsedTime ` with requestAnimationFrame.
48
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraf--demo )
47
49
- [ ` useRafFn ` ] ( ./src/components/useRafFn/stories/useRafFn.md ) &mdash ; calls function with requestAnimationFrame.
48
- [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--demo )
49
- [ ![ Demo] ( https://img.shields.io/badge/advanced_demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--advanced-demo )
50
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--demo )
51
+ [ ![ Demo] ( https://img.shields.io/badge/advanced_demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--advanced-demo )
50
52
- [ ` useTimeout ` ] ( ./src/components/useTimeout/stories/useTimeout.md ) &mdash ; returns ` isReady ` true when timer is completed.
51
- [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeout--demo )
53
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeout--demo )
52
54
- [ ` useTimeoutFn ` ] ( ./src/components/useTimeoutFn/stories/useTimeoutFn.md ) &mdash ; calls function when timer is completed.
53
- [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo )
55
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo )
54
56
- UI
55
57
- [ ` useClickAway ` ] ( ./src/components/useClickAway/stories/useClickAway.md ) &mdash ; triggers callback when user clicks outside target area.
56
- [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo )
58
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo )
57
59
- Utils
58
60
- [ ` getQuery ` ] ( ./src/components/getQuery/stories/getQuery.md ) &mdash ; get a CSS media query string.
59
- [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/utils-getquery--demo )
61
+ [ ![ Demo] ( https://img.shields.io/badge/demo-🚀-yellow.svg )] ( https://microcipcip.github.io/vue-use-kit/?path=/story/utils-getquery--demo )
60
62
61
63
## Inspiration
62
64
0 commit comments