Erag Open-Source Packages Documentation

website·Indexed 31 days ago

Full documentation reference for open-source packages by Er Amit Gupta, including Laravel Disposable Email and Laravel Inertia Toast.

Tokens: 1.2K
Snippets: 10
Records: 10
Agent score: 14%

What's inside Erag Open-Source Packages

Integrate a rich text editor in Vue 3

The @erag/text-editor-vue package is a dependency-free WYSIWYG editor built with native browser APIs. It supports mentions (@), merge tags ({{), templates, image uploads, tables, and HTML editing.

npm install @erag/text-editor-vue

<script setup>
import { ref } from 'vue';
import { Editor } from '@erag/text-editor-vue';
import '@erag/text-editor-vue/dist/style.css';
const content = ref('<p>Hello World</p>');
</script>
<template>
  <Editor v-model="content" />
</template>

Integrate a rich text editor in React

The @erag/text-editor-react package is a dependency-free WYSIWYG editor for React 18 & 19. It supports mentions (@), merge tags ({{), templates, image uploads, tables, and HTML editing.

npm install @erag/text-editor-react

import { useState } from 'react';
import { Editor } from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

export default function App() {
  const [content, setContent] = useState('<p>Hello World</p>');
  return <Editor value={content} onChange={setContent} />;
}

Convert Laravel application to a PWA
The laravel-pwa package transforms Laravel apps into Progressive Web Apps with automatic web manifest generation, service worker registration, custom install prompts, and dynamic logo uploads.
```
composer require erag/laravel-pwa
php artisan pwa:install
```
```
@pwa
```
https://erag.in/laravel-pwa/websitellms

Define Laravel forms in PHP for Inertia.js

The inertia-forms package allows defining Laravel forms in PHP and rendering them in Inertia.js (Vue, React, or Svelte). Validation rules are derived from the PHP fields, and it supports conditional fields and file uploads.

composer require erag/inertia-forms
npm install @erag/inertia-forms-vue   # or -react / -svelte

class CreateUserForm extends Form
{
    protected ?string $actionRoute = 'users.store';

    public function fields(): array
    {
        return [
            TextInput::make('name')->required(),
            TextInput::make('email')->email()->required(),
            Submit::make('Create user'),
        ];
    }
}

// Controller: Inertia::render('Users/Create', ['form' => CreateUserForm::make()]);
// Store: public function store(#[Validate] CreateUserForm $form) { ... $form->validated() ... }

<Form :form="form" />

Add toast notifications to Vue 3
The @erag/vue-toastification package provides lightweight toast notifications and promise-based confirmation modals with Apple-style animations and Composition API support.
```
npm install @erag/vue-toastification
```
```
<script setup>
import { useToast } from '@erag/vue-toastification';
const toast = useToast();
toast.success('Operation completed successfully!');
</script>
```
https://erag.in/vue-toastification/websitellms
Block disposable emails in Laravel
Use the laravel-disposable-email package to block disposable, fake, and temporary burner email addresses. It provides built-in validation rules, automatic remote blacklist syncing, DNS MX checks, and high-performance cache drivers.
```
composer require erag/laravel-disposable-email
php artisan disposable:sync
```
```
$request->validate([
    'email' => ['required', 'email', 'disposable'],
]);
```
https://erag.in/laravel-disposable-email/websitellms
Implement country-aware phone input in React
The @erag/phone-number-react package provides a headless usePhoneNumber hook for country-aware phone input, dial codes, auto-formatting, and validation for React 18 and 19.
```
npm install @erag/phone-number-react
```
```
import { usePhoneNumber } from '@erag/phone-number-react';
const { phone, country, formattedPhone, isValid, handleInput } = usePhoneNumber({ defaultCountry: 'US' });
```
https://erag.in/phone-number-react/websitellms
Sync Laravel translations to Inertia.js frontends
Use laravel-lang-sync-inertia to automatically export and sync Laravel PHP language translation files to Inertia.js frontends. It includes i18n helpers for Vue 3, React, and Svelte.
```
composer require erag/laravel-lang-sync-inertia
php artisan lang:sync
```
```
import { __, trans } from 'laravel-lang-sync-inertia';
__('messages.welcome', { name: 'User' });
```
https://erag.in/laravel-lang-sync-inertia/websitellms
Send toast alerts from Laravel to Inertia.js
The laravel-inertia-toast package allows sending flash toast alerts and confirmation dialog modals directly from Laravel controllers to Inertia.js (Vue 3 and React) without boilerplate.
```
composer require erag/laravel-inertia-toast
npm install @erag/laravel-inertia-toast
```
```
// In Laravel Controller
return redirect()->back()->withToast('success', 'Profile updated successfully!');
```
https://erag.in/laravel-inertia-toast/websitellms
Implement country-aware phone input in Vue 3
The @erag/phone-number-vue package provides a headless usePhoneNumber composable for handling dial codes, auto-formatting, and validation without heavy masking libraries.
```
npm install @erag/phone-number-vue
```
```
<script setup>
import { usePhoneNumber } from '@erag/phone-number-vue';
const { phone, country, formattedPhone, isValid, handleInput } = usePhoneNumber({ defaultCountry: 'IN' });
</script>
```
https://erag.in/phone-number-vue/websitellms