Xput

A comprehensive React form component library with rich text editor support, built on top of React Hook Form, Zod, and Lexical.

Features

• 🎨 Multiple Input Types: Text, email, password, number, textarea, select, radio, checkbox, switch, file, color, date, time, datetime, OTP, and more
• 📝 Rich Text Editor: Full-featured Lexical-based editor with toolbar, markdown support, and more
• ✅ Form Validation: Built-in Zod schema validation
• 🎯 TypeScript: Fully typed with TypeScript
• 🎨 Styled Components: Beautiful UI components built with Radix UI and Tailwind CSS
• 🔄 Wizard Support: Multi-step form wizard component
• 📦 Zero Config: Works out of the box with minimal setup

Installation

npm install xput

Peer Dependencies

Xput requires the following peer dependencies:

npm install react react-dom

Usage

Basic Example

import { useForm, FormProvider } from 'react-hook-form';
import { Xput } from 'xput';
import * as z from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

function MyForm() {
  const methods = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <Xput
          name="email"
          label="Email"
          type="email"
          placeholder="[email protected]"
          required
        />
        <Xput
          name="password"
          label="Password"
          type="password"
          placeholder="Enter password"
          required
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

With Rich Text Editor

<Xput
  name="content"
  label="Content"
  type="editor"
  placeholder="Write your content here..."
  editorMaxLength={5000}
/>

Multi-Step Wizard

import { XputWizard } from 'xput';
import * as z from 'zod';

const steps = [
  {
    title: "Step 1",
    description: "Enter your basic information",
    fields: (
      <>
        <Xput name="name" label="Name" type="text" required />
        <Xput name="email" label="Email" type="email" required />
      </>
    ),
    schema: z.object({
      name: z.string().min(1),
      email: z.string().email(),
    }),
  },
  {
    title: "Step 2",
    description: "Additional details",
    fields: (
      <Xput name="bio" label="Bio" type="textarea" />
    ),
    schema: z.object({
      bio: z.string().optional(),
    }),
  },
];

function MyWizard() {
  return (
    <XputWizard
      steps={steps}
      onComplete={(data) => {
        console.log('Form completed:', data);
      }}
    />
  );
}

Input Types

• text - Standard text input
• email - Email input with validation
• password - Password input with show/hide toggle
• number - Number input
• textarea - Multi-line text input
• select - Dropdown select
• select-search - Searchable dropdown
• radio - Radio button group
• checkbox - Checkbox
• switch - Toggle switch
• file - File upload with preview
• color - Color picker
• autocomplete - Autocomplete with create option
• date - Date picker
• datetime - Date and time picker
• time - Time picker
• otp - OTP input (4 or 6 digits)
• editor - Rich text editor

Styling

Xput uses Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project.

You may also need to import the editor theme CSS:

import 'xput/styles';

Or if using a bundler that supports CSS imports:

import 'xput/src/styles/editor-theme.css';

API Reference

Xput Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | required | Field name for form state | | label | string | - | Label text | | type | InputType | 'text' | Input type | | placeholder | string | - | Placeholder text | | required | boolean | false | Whether field is required | | disabled | boolean | false | Whether field is disabled | | schema | z.ZodType | - | Zod validation schema | | defaultValue | any | - | Default field value | | hint | string | - | Helper text | | options | Array<{label: string, value: string}> | [] | Options for select/radio | | passwordStrength | 'weak' \| 'medium' \| 'strong' | 'medium' | Password strength level | | otpLength | 4 \| 6 | 6 | OTP input length | | editorMaxLength | number | - | Max length for editor |

XputWizard Props

| Prop | Type | Description | |------|------|-------------| | steps | Array<Step> | Array of wizard steps | | onComplete | (data: any) => void | Callback when wizard completes | | className | string | Additional CSS classes |

Building

The package uses TypeScript compiler for building. If you encounter esbuild compatibility issues on older macOS versions, you can:

1. Use ESBUILD_SKIP_VALIDATION=1 npm install to skip esbuild validation
2. The build will use TypeScript compiler directly
3. For production, consider using rollup or webpack for proper bundling

License

MIT