npm package: @jagadishpujari/spark-quiz-player
Description: A customizable React quiz player component with validation
Author: Jagadish Pujari
Latest version: 1.0.1-beta.0

# React Quiz Player

A customizable and accessible React quiz player component with built-in validation.

## Features

- 🎨 Modern, responsive design with Tailwind CSS
- ✅ Built-in form validation
- 🔒 Password strength validation
- 📱 Mobile-friendly responsive layout
- ♿ Accessibility support
- 🎯 TypeScript support
- 🔧 Highly customizable
- 📦 Zero dependencies (except React)

## Installation

```bash
npm install @jagadishpujari/spark-quiz-player
```

or

```bash
yarn add @jagadishpujari/spark-quiz-player
```

## Usage

### Basic Usage

```tsx
import React from 'react';
import { QuizPlayer } from '@jagadishpujari/spark-quiz-player';

function App() {
  const handleQuizSubmit = async (formData) => {
    console.log('Quiz data:', formData);
    // Handle quiz logic here
  };

  return (
    <div className="App">
      <QuizPlayer onSubmit={handleQuizSubmit} />
    </div>
  );
}

export default App;
```

### Advanced Usage

```tsx
import React from 'react';
import { QuizPlayer, Question } from '@jagadishpujari/spark-quiz-player';

function App() {
  const handleQuizSubmit = async (formData: Question[]) => {
    try {
      const response = await fetch('/api/quiz', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      
      if (response.ok) {
        console.log('Registration successful!');
      }
    } catch (error) {
      console.error('Registration failed:', error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 py-12">
      <QuizPlayer
        onSubmit={handleQuizSubmit}
        title="Join Our Platform"
        subtitle="Create your account to get started"
        submitButtonText="Create Account"
        requiredFields={['firstName', 'lastName', 'email', 'password', 'confirmPassword']}
        className="shadow-2xl"
      />
    </div>
  );
}

export default App;
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onSubmit` | `(formData: Question[]) => Promise<void> \| void` | - | Callback function called when form is submitted |
| `className` | `string` | `''` | Additional CSS classes for the form container |
| `showTitle` | `boolean` | `true` | Whether to show the form title and subtitle |
| `submitButtonText` | `string` | `'Register'` | Text for the submit button |
| `requiredFields` | `(keyof FormData)[]` | `['email', 'password', 'confirmPassword']` | Array of required field names |
| `title` | `string` | `'Create Account'` | Form title text |
| `subtitle` | `string` | `'Join us today and get started'` | Form subtitle text |

## Form Data Structure

```typescript
interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  password: string;
  confirmPassword: string;
  phoneNumber: string;
  dateOfBirth: string;
}
```

## Validation Rules

- **Email**: Must be a valid email format
- **Password**: Must be at least 8 characters long
- **Confirm Password**: Must match the password field
- **Phone Number**: Must contain only numbers, spaces, dashes, and parentheses
- **Required Fields**: Configurable via the `requiredFields` prop

## Styling

This component uses Tailwind CSS classes. Make sure you have Tailwind CSS installed in your project:

```bash
npm install tailwindcss
```

If you're not using Tailwind CSS, you can override the styles by providing custom CSS classes through the `className` prop.

## TypeScript Support

This package includes TypeScript definitions. Import the types you need:

```typescript
import { Question, QuizPlayerProps } from '@jagadishpujari/spark-quiz-player';
```

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Support

If you have any questions or need help, please open an issue on [GitLab](https://gitlab.com/jagadishpujari/spark-quiz-player/-/issues).