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

npm install @jagadishpujari/spark-quiz-player

or

yarn add @jagadishpujari/spark-quiz-player

Usage

Basic Usage

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

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

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:

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:

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 file for details.

Support

If you have any questions or need help, please open an issue on GitLab.