@useverse/core 2.0.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +131 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
package/README.md
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
# @useverse/core
|
|
2
|
+
|
|
3
|
+
A comprehensive collection of practical React hooks designed to enhance web applications with sound effects, keyboard shortcuts, and file download capabilities.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@useverse/core)
|
|
6
|
+
[](https://github.com/fabiconcept/useverse/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
This core package bundles all useverse hooks into a single, convenient package:
|
|
11
|
+
|
|
12
|
+
- 🎵 **useSoundEffect** - Add UI sound effects to interactive elements
|
|
13
|
+
- ⌨️ **useShortcuts** - Implement keyboard shortcuts and hotkeys
|
|
14
|
+
- 📥 **useFileDownload** - Handle file downloads with status tracking
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @useverse/core
|
|
20
|
+
# or
|
|
21
|
+
yarn add @useverse/core
|
|
22
|
+
# or
|
|
23
|
+
pnpm add @useverse/core
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Quick Start
|
|
27
|
+
|
|
28
|
+
```jsx
|
|
29
|
+
import { useSoundEffect, useShortcuts, useFileDownload } from '@useverse/core';
|
|
30
|
+
|
|
31
|
+
function FileManager() {
|
|
32
|
+
// Configure sound effects for different actions
|
|
33
|
+
const hoverSound = useSoundEffect('/hover.mp3', { volume: 0.3 });
|
|
34
|
+
const clickSound = useSoundEffect('/click.mp3', { volume: 0.5 });
|
|
35
|
+
const successSound = useSoundEffect('/success.mp3', { volume: 0.7 });
|
|
36
|
+
const errorSound = useSoundEffect('/error.mp3', { volume: 0.7 });
|
|
37
|
+
|
|
38
|
+
// Manage downloads with status tracking
|
|
39
|
+
const [downloadStatus, startDownload] = useFileDownload();
|
|
40
|
+
|
|
41
|
+
// Define keyboard shortcuts for file operations
|
|
42
|
+
useShortcuts({
|
|
43
|
+
shortcuts: [
|
|
44
|
+
{ key: 's', ctrlKey: true, shiftKey: true }, // Ctrl+Shift+S
|
|
45
|
+
{ key: 'd', ctrlKey: true }, // Ctrl+D
|
|
46
|
+
{ key: 'Escape' }, // Esc
|
|
47
|
+
],
|
|
48
|
+
onTrigger: (shortcut) => {
|
|
49
|
+
if (shortcut.key === 's' && shortcut.ctrlKey && shortcut.shiftKey) {
|
|
50
|
+
handleSaveAll();
|
|
51
|
+
} else if (shortcut.key === 'd' && shortcut.ctrlKey) {
|
|
52
|
+
handleDownload();
|
|
53
|
+
} else if (shortcut.key === 'Escape') {
|
|
54
|
+
handleCancel();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
// File operation handlers
|
|
60
|
+
const handleDownload = async () => {
|
|
61
|
+
clickSound();
|
|
62
|
+
try {
|
|
63
|
+
await startDownload('https://example.com/report.pdf', 'quarterly-report.pdf');
|
|
64
|
+
successSound();
|
|
65
|
+
} catch {
|
|
66
|
+
errorSound();
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
return (
|
|
71
|
+
<div className="file-manager">
|
|
72
|
+
<div className="toolbar">
|
|
73
|
+
<button
|
|
74
|
+
onMouseEnter={hoverSound}
|
|
75
|
+
onClick={handleDownload}
|
|
76
|
+
disabled={downloadStatus === 'downloading'}
|
|
77
|
+
>
|
|
78
|
+
{downloadStatus === 'downloading' ? 'Downloading...' : 'Download Report'}
|
|
79
|
+
</button>
|
|
80
|
+
|
|
81
|
+
<div className="status">
|
|
82
|
+
{downloadStatus === 'success' && (
|
|
83
|
+
<span className="success">✓ Download complete!</span>
|
|
84
|
+
)}
|
|
85
|
+
{downloadStatus === 'error' && (
|
|
86
|
+
<span className="error">⚠ Download failed</span>
|
|
87
|
+
)}
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div className="shortcuts-help">
|
|
92
|
+
<h4>Keyboard Shortcuts</h4>
|
|
93
|
+
<ul>
|
|
94
|
+
<li>Ctrl + Shift + S: Save all files</li>
|
|
95
|
+
<li>Ctrl + D: Download report</li>
|
|
96
|
+
<li>Esc: Cancel operation</li>
|
|
97
|
+
</ul>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Requirements
|
|
105
|
+
|
|
106
|
+
- React >=16.8.0 (Hooks support)
|
|
107
|
+
- Modern browser environment
|
|
108
|
+
|
|
109
|
+
## Individual Packages
|
|
110
|
+
|
|
111
|
+
If you prefer to use hooks individually, you can install them separately:
|
|
112
|
+
|
|
113
|
+
- [@useverse/useSoundEffect](https://www.npmjs.com/package/@useverse/usesoundeffect)
|
|
114
|
+
- [@useverse/useShortcuts](https://www.npmjs.com/package/@useverse/useshortcuts)
|
|
115
|
+
- [@useverse/useFileDownload](https://www.npmjs.com/package/@useverse/usefiledownload)
|
|
116
|
+
|
|
117
|
+
## Documentation
|
|
118
|
+
|
|
119
|
+
For detailed documentation of each hook, visit their respective package pages:
|
|
120
|
+
|
|
121
|
+
- [useSoundEffect Documentation](https://github.com/fabiconcept/useverse/tree/main/packages/useSoundEffect#readme)
|
|
122
|
+
- [useShortcuts Documentation](https://github.com/fabiconcept/useverse/tree/main/packages/useShortcuts#readme)
|
|
123
|
+
- [useFileDownload Documentation](https://github.com/fabiconcept/useverse/tree/main/packages/useFileDownload#readme)
|
|
124
|
+
|
|
125
|
+
## Contributing
|
|
126
|
+
|
|
127
|
+
We welcome contributions! Please see our [Contributing Guide](https://github.com/fabiconcept/useverse/blob/main/CONTRIBUTING.md) for details.
|
|
128
|
+
|
|
129
|
+
## License
|
|
130
|
+
|
|
131
|
+
ISC © [fabiconcept](https://github.com/fabiconcept)
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@useverse/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@useverse/
|
|
7
|
-
"@useverse/
|
|
8
|
-
"@useverse/
|
|
6
|
+
"@useverse/usesoundeffect": "^1.1.0",
|
|
7
|
+
"@useverse/useshortcuts": "^1.1.0",
|
|
8
|
+
"@useverse/usefiledownload": "^1.1.0"
|
|
9
9
|
},
|
|
10
10
|
"publishConfig": {
|
|
11
11
|
"access": "public"
|