Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/not-jayden/svelte-event
A set of modifier wrapper functions and a comprehensive event action for Svelte event handling
https://github.com/not-jayden/svelte-event
Last synced: 2 months ago
JSON representation
A set of modifier wrapper functions and a comprehensive event action for Svelte event handling
- Host: GitHub
- URL: https://github.com/not-jayden/svelte-event
- Owner: Not-Jayden
- License: mit
- Created: 2023-11-23T16:09:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-09T17:22:18.000Z (about 1 year ago)
- Last Synced: 2023-12-10T16:20:19.087Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 44.9 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚡️ svelte-event
svelte-event provides a set of wrapper functions for adding modifiers to event handlers and a versatile `event` action for comprehensive event listener management in Svelte.
This package is primarily intended to address [the upcoming changes to events in Svelte 5](https://svelte-5-preview.vercel.app/docs/event-handlers), though is entirely compatible with Svelte 3 and 4 as well.
> 🚧 NOTE: This plugin is still in early development, use at your own risk.
## 🚀 Installation
```bash
# Using npm
npm install svelte-event
# Using yarn
yarn add svelte-event
# Using pnpm
pnpm add svelte-event
# Using bun
bun add svelte-event
```
## 💡 Usage
### Modifier Wrapper Functions
`svelte-event` provides several wrapper functions for modifying event behavior:
- `preventDefault`
- `stopPropagation`
- `stopImmediatePropagation`
- `self`
- `trusted`
- `once`
Note: `passive` requires use of the `event` action, as it requires access to the event listener options which is not possible using wrapper functions.
#### Using Wrapper Functions
Apply modifiers directly to event handlers:
```javascript
import { once, preventDefault } from 'svelte-event';
function handleClick(event) {
// Click event logic
}
```
#### Combining Modifiers with `withModifiers`
Use `withModifiers` to apply multiple modifiers using a configuration object:
```javascript
import { withModifiers } from 'svelte-event';
function handleClick(event) {
// Click event logic
}
const modifiedHandler = withModifiers(handleClick, {
preventDefault: true,
stopPropagation: true
});
```
#### Key Modifier
The `key` modifier allows you to specify a key that must be pressed for the event handler to execute:
```javascript
import { key } from 'svelte-event/key';
function handleKeydown(event) {
// Keydown event logic
}
```
You can also specify the set of modifier keys (`altKey`, `ctrlKey`, `metaKey`, `shiftKey`) that must be pressed for the event handler to execute:
```javascript
import { key } from 'svelte-event/key';
function handleKeydown(event) {
// Keydown event logic
}
```
If the `exact` modifier is set to `true`, then the event handler will only execute if the specified key is pressed and no other modifier keys are pressed.
#### Mouse Modifiers
The package also provides `left`, `right`, and `middle` modifiers for mouse events, which only execute the event handler if the left, right, or middle mouse button is pressed, respectively:
```javascript
import { left, right, middle } from 'svelte-event/mouse';
function handleClick(event) {
// Click event logic
}
```
You can also specify the set of modifier keys (`altKey`, `ctrlKey`, `metaKey`, `shiftKey`) that must be pressed for the event handler to execute, as well as the `exact` modifier in the same way as the `key` modifier.
#### Compose Function
The `compose` function allows you to combine multiple wrapper functions into a single function:
```javascript
import { compose } from 'svelte-event';
const handler = compose(
handler1,
handler2,
);
// Use the composed handler in your Svelte component
```
### Event Action
The `event` action in `svelte-event` allows you to attach event listeners to DOM elements, enabling detailed control through various modifiers.
#### Basic Example
```svelte
import { event } from 'svelte-event';
function handleClick() {
// Click event logic
}
```
#### Advanced Configuration
You can provide detailed configuration for event listeners, including multiple handlers, various modifiers, and specific event phases.
- **Multiple Handlers:**
Attach several handlers to the same event:
```svelte
```
- **Event Modifiers:**
Customize event behavior with modifiers such as `preventDefault`, `stopPropagation`, `passive`, and more:
```svelte
```
- **Performance Optimization with `passive`:**
Improve scrolling performance for touch and wheel events:
```svelte
```
- **Capture Phase with `capture`:**
Execute event handler during the capture phase:
```svelte
```
## 📜 License
`svelte-event` is open source, licensed under the MIT License. For more information, see the [LICENSE](LICENSE) file.