JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 150
  • Score
    100M100P100Q59953F
  • License MIT

A utility package providing event handler functions like debounce and throttle for efficient function execution. Built with TypeScript and optimized for React projects.

Package Exports

  • srotas
  • srotas/dist/srotas.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (srotas) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Srotas Logo

Srotas πŸ”

Node.js Version TypeScript React Vite Unit Tests Publish NPM Package License

Srotas (ΰ€Έΰ₯ΰ€°ΰ₯‹ΰ€€ΰ€Έΰ₯) is a lightweight React-friendly utility library offering a set of reusable event handler functions. It helps developers avoid boilerplate code by offering common event handling patterns β€” debouncing, throttling, blocking key presses, preventing right clicks, and more.

The name Srotas β€” derived from Sanskrit β€” means β€œstream” or β€œflow”, a poetic nod to the flow of events this library elegantly manages.


Features 🌊

  • 🎯 Focused API: Tiny, purposeful, and highly reusable event utilities.
  • πŸ’‘ Typed Handlers: Built with full TypeScript support and IDE autocompletion.
  • βš›οΈ React-Ready: Designed for seamless integration in React apps.
  • ⚑ Zero Dependencies: Tree-shakable and dependency-free.
  • πŸ§ͺ Dev-First: Built with Vite, TypeScript, and tested for production use.

Installation πŸ“¦

npm install srotas
# or
yarn add srotas
# or
pnpm add srotas

Prerequisites

Ensure you have the following installed:

  • Node.js: v22 or later.
  • React: v19 or later.

Usage βš™οΈ

import {
  preventDefaultOnly,
  stopPropagationOnly,
  preventAndStopEvent,
  debounceEvent,
  throttleEvent,
} from "srotas";

<button onClick={preventAndStopEvent}>Click</button>

You can also use more advanced handlers like:

<input
  onKeyDown={(e) => blockKeyPress(e, ["Enter", "Escape"])}
  onChange={debounceEvent((e) => handleInputChange(e), 300)}
/>

Exports πŸ“€

General Handlers

preventDefaultOnly(e)
stopPropagationOnly(e)
preventAndStopEvent(e)

Debug Handlers

logEventDetails(e)

Context-Specific Handlers

preventRightClick(e)
focusElement("#input-id")
preventDrag(e)
blockKeyPress(e, ["Enter", "Escape"])

Utility Handlers

debounceEvent(handlerFn, delay)
throttleEvent(handlerFn, limit)

All handlers are strongly typed and compatible with React's synthetic events.


Project Structure πŸ“‚

srotas/
β”œβ”€β”€ src/               # Source files
β”‚   β”œβ”€β”€ handlers/      # All utility/event handler functions
β”‚   └── index.ts       # Entry point for all exports
β”œβ”€β”€ tests/             # Unit tests
β”œβ”€β”€ dist/              # Bundled output (auto-generated)
β”œβ”€β”€ vite.config.ts     # Vite configuration
β”œβ”€β”€ tsconfig.json      # TypeScript config
β”œβ”€β”€ package.json       # Package metadata
β”œβ”€β”€ LICENSE.md         # MIT License
└── README.md          # Project documentation

Scripts πŸš€

# Build the package
npm run build

# Testing code
npm run test

# Formatting code
npm run format

# Lint for errors
npm run lint

License πŸ“œ

This project is licensed under the MIT License. See the LICENSE file for details.


Acknowledgments πŸ™Œ

  • Inspired by repetitive patterns seen across frontend projects β€” especially in form handling, keyboard interactivity, and user inputs.
  • The name Srotas reflects the idea of controlling streams and flows β€” whether of data, events, or user interaction.
  • Built with 🧑 by Tejas and open to contributions.