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 π
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 srotasPrerequisites
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 documentationScripts π
# Build the package
npm run build
# Testing code
npm run test
# Formatting code
npm run format
# Lint for errors
npm run lintLicense π
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.