https://github.com/zayminmaw/friendzone
The boundary no events can cross.
https://github.com/zayminmaw/friendzone
Last synced: 5 months ago
JSON representation
The boundary no events can cross.
- Host: GitHub
- URL: https://github.com/zayminmaw/friendzone
- Owner: zayminmaw
- Created: 2024-09-14T18:25:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-17T15:05:55.000Z (over 1 year ago)
- Last Synced: 2025-01-04T16:37:44.017Z (over 1 year ago)
- Language: TypeScript
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# friendzone
The boundary no events can cross. It's a React component library that captures and manages event propagation for its child elements. It provides a way to stop the propagation of certain event categories (e.g., mouse, keyboard, clipboard) and optionally logs the event information for debugging purposes.
## Components
- EventBoundary
- EventBlackHole
- OnClickBoundary
## Usage Example
### EventBoundary
EventBoundary attributes are `trace`, `onEvent` and `logName`.
| Attribute | Type | Description |
| --------- | ------------------------------------------------------------------------- | --------------------- |
| trace | ["clipboard","drag","form","keyboard","media","mouse","pointer","window"] | |
| onEvent | (eventType: string, event: Event) => void | |
| logName | string | For debugging purpose |
```typescript
import { EventBoundary } from "friendzone";
function App() {
return (
{
console.log("parent");
}}
>
{}>
{
console.log("child");
}}
>
click
);
}
export default App;
```
### EventBlackHole
EventBlackHole attributes are `absorbOnly` and `logName`.
| Attribute | Type | Description |
| ---------- | ------------------------------------------------------------------------- | --------------------- |
| absorbOnly | ["clipboard","drag","form","keyboard","media","mouse","pointer","window"] | |
| logName | string | For debugging purpose |
```typescript
import { EventBlackHole, EventBoundary, OnClickBoundary } from "friendzone";
function App() {
return (
{
console.log("parent");
}}
>
{
console.log("child");
}}
>
click
);
}
export default App;
```
### OnClickBoundary
No attributes.
```typescript
import { OnClickBoundary } from "friendzone";
function App() {
return (
{
console.log("parent");
}}
>
// On click boundary will prevent parent from getting triggered
{
console.log("child");
}}
>
click
);
}
export default App;
```