utils

“A lightweight TypeScript utility library for managing React state and extracting form data easily.”

🧩 Installation

npm install @mr.inverted/utils

💡 Usage

<WithState intialState={{ isOpened: false }}>
  {({ isOpened }, setState) =>
    <div className="absolute top-5 right-3 z-10">
      <div className="flex flex-col gap-2.5">
        {!isOpened && (
          <button onClick={() => setState("isOpened", true)}>
            <Icon icon="heroicons:bars-3" width={24} height={24} color="white" />
          </button>
        )}

        {isOpened && (
          <button onClick={() => setState("isOpened", false)}>
            <Icon icon="heroicons:x-mark" width={24} height={24} color="white" />
          </button>
        )}
      </div>
    </div>
  }
</WithState>

<WithState intialState={{ items: [] as string[] }}>
  {({ items }, setState) =>
    <>
      {items.map((item, index) =>
        <RatingItem index={index} key={index} />
      )}

      <RatingDivider onClick={() => setState("items", items.concat(moreItemsToAdd))} />
    </>
  }
</WithState>

const { email, password } = getSelectedFormData(event, ["email", "password"]);

const { token, is_active } = getSelectedFormData(event, ["token", "is_active"]);