React FAQ Component 🌌

A customizable, accessible FAQ/accordion component for React applications with built-in styling.

Features ✨

🎨 Auto-included CSS with zero-config styling
♿ Built with accessibility (ARIA) support
🌀 Smooth fade-in animations and toggle transitions
📦 No CSS imports needed - styles bundled automatically
🌐 PropTypes validation with error warnings
🧩 Dual module support (CJS + ESM)
🛠️ CSS Variables for easy theme customization

Installation 📦

`bash npm install faq-mars

Peer Dependencies ⚙️

Ensure these are installed in your host project:

bash npm install react react-dom prop-types

basic usage:

import React from 'react'; import Faq from 'faq-mars'; import 'faq-mars/dist/Faq.css';

const App = () => { const faqItems = [ { question: "How does it work?", answer: "This component provides an interactive FAQ interface." }, { question: "Can I customize it?", answer:

Yes! Use className props or CSS variables.

} ];

return ( <div style={{ maxWidth: '800px', margin: '0 auto' }}>

Project FAQ

<Faq items={faqItems} /> ); };

Customization

Using CSS Classes javascript

2. CSS Variables theming

/* In your global CSS */ .faq-container { --faq-border-color: #e0e0e0; --faq-bg-color: #f8f8f8; --faq-hover-bg: #f0f0f0; --faq-text-color: #333; --faq-transition-speed: 0.3s; --faq-border-radius: 8px; }

3. Custom CSS

/* Custom question style */ .custom-question { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; font-family: 'Comic Sans MS', cursive; }

/* Custom answer animation */ .custom-answer { background: #f8f9fa; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

Package detail

faq-mars

readme