meyve

Meyve - Type-Safe Form Library for Next.js Server Actions

Meyve (Turkish for "fruit") is a powerful and type-safe form library designed specifically for Next.js applications using Server Actions. It provides a seamless way to handle form submissions with built-in validation, state management, and optimistic updates.

Features

• 🚀 Built for Next.js Server Actions - Seamless integration with Next.js 14+ and React 19+
• 🔒 Type-safe end-to-end - Full TypeScript support with Zod schema validation
• 📝 Robust validation - Client and server-side validation with detailed error handling
• ⚡ Optimistic updates - Instant UI feedback while server processing happens
• 🔄 Automatic loading states - Built-in pending states for forms and buttons
• 🎨 Accessible components - Form, Input, and Button components with proper ARIA attributes
• 🛡️ Error handling - Comprehensive error handling with field-level validation
• 📦 Minimal dependencies - Only requires Next.js and Zod

Installation

npm install meyve zod
# or
yarn add meyve zod
# or
pnpm add meyve zod

Quick Start

1. Create a Server Action

// app/actions/login.ts
'use server'

import { z } from 'zod'
import { createAction } from 'meyve'

const loginSchema = z.object({
  email: z.string().email('Please enter a valid email'),
  password: z.string().min(8, 'Password must be at least 8 characters')
})

export const login = createAction(loginSchema, async (data) => {
  // Handle login logic here
  console.log('Login attempt:', data.email)
  
  // Return result (this will be available in the form state)
  return {
    success: true,
    message: 'Login successful!'
  }
})

2. Create a Client Component

// app/components/LoginForm.tsx
'use client'

import { useForm, Form, Input, Button } from 'meyve'
import { login } from '@/app/actions/login'

export default function LoginForm() {
  const { formState, action, isPending } = useForm(login, {
    initialState: { 
      success: false, 
      message: '' 
    },
    // Optional callbacks
    onSuccess: (data) => {
      console.log('Form submitted successfully', data)
    },
    onError: (error) => {
      console.error('Form submission failed', error)
    },
    // Optional optimistic updates
    optimisticData: (formData) => ({
      success: true,
      message: 'Logging in...'
    })
  })

  return (
    <Form action={action} className="space-y-4">
      <Input 
        name="email" 
        type="email" 
        label="Email" 
        required 
      />
      <Input 
        name="password" 
        type="password" 
        label="Password" 
        required 
      />
      <Button type="submit">
        {isPending ? 'Logging in...' : 'Login'}
      </Button>
      
      {formState.message && (
        <div className={formState.success ? 'text-green-500' : 'text-red-500'}>
          {formState.message}
        </div>
      )}
    </Form>
  )
}

For more detailed documentation and examples, visit the GitHub repository.