guard-ui

A small, safety-first UI utility library that prevents common frontend bugs.

What it is

guard-ui provides a tiny set of focused utilities that act as guardrails for UI code:

• preventDoubleSubmit — Prevent duplicate async executions (e.g. double clicks).
• safeJSONParse — Parse JSON without throwing and return a safe fallback.
• safeAccess — Safely read deep values from objects/arrays with a fallback.

These utilities are framework-agnostic and designed for production safety.

Install (local / testing)

This package is a local project skeleton. To use it in a project locally:

# from the folder containing package.json
npm pack
# this will create guard-ui-1.0.0.tgz which you can install:
npm install ../guard-ui/guard-ui-1.0.0.tgz

Or simply copy the src files into your project.

Usage

import { preventDoubleSubmit, safeJSONParse, safeAccess } from "guard-ui";

preventDoubleSubmit

const submit = preventDoubleSubmit(async (data) => {
  await api.save(data);
});

// multiple rapid calls will only run one instance
submit({ name: "Yasir" });
submit({ name: "Yasir" });

safeJSONParse

const raw = localStorage.getItem("user");
const user = safeJSONParse(raw, null);

safeAccess

const total = safeAccess(response, "data.pagination.total", 0);
const avatar = safeAccess(user, ["profile", "avatar", "url"], "/default.png");

API

• preventDoubleSubmit(fn) → returns a wrapped async function that ignores concurrent calls.
• safeJSONParse(value, fallback = null) → parses string JSON or returns fallback. If given an object/array, returns it as-is.
• safeAccess(source, path, fallback) → reads a deep property at path (string with dot separators or array of keys), returns fallback if missing.

License

MIT