{\n if (field.alias === \"country\") return ;\n return null; // null = use default renderer for this field\n }}\n/>\n```\n\n## Usage with Different Frameworks\n\n### Basic React Application\n\n```jsx\nimport {\n MauticForm,\n MauticInput,\n MauticSubmitButton,\n MauticTracking,\n MauticFormScript,\n} from \"@adelant/react-mautic-forms\";\n\nfunction App() {\n return (\n \n \n \n\n \n \n\n \n\n Submit\n \n
\n );\n}\n```\n\n### Next.js (Pages Router)\n\n```jsx\n// pages/_app.js\nimport { MauticTracking, MauticFormScript } from '@adelant/react-mautic-forms';\n\nfunction MyApp({ Component, pageProps }) {\n return (\n <>\n \n \n \n \n );\n}\n\nexport default MyApp;\n\n// pages/contact.js\nimport { MauticForm, MauticInput, MauticSubmitButton } from '@adelant/react-mautic-forms';\n\nexport default function Contact() {\n return (\n \n
Contact Us
\n\n \n {/* Form fields */}\n Submit\n \n \n );\n}\n```\n\n### Next.js (App Router)\n\n```jsx\n// app/layout.jsx\nimport { MauticTracking, MauticFormScript } from '@adelant/react-mautic-forms';\n\nexport default function RootLayout({ children }) {\n return (\n \n \n {children}\n \n \n \n \n );\n}\n\n// app/contact/page.jsx - Note: Client Component\n'use client';\n\nimport { MauticForm, MauticInput, MauticSubmitButton } from '@adelant/react-mautic-forms';\n\nexport default function ContactPage() {\n return (\n \n
Contact Us
\n\n \n \n Submit\n \n \n );\n}\n```\n\nIf you need to avoid SSR rendering for the form itself (for example during strict prerendering workflows), lazy-load the form components with SSR disabled:\n\n```jsx\n// app/contact/page.jsx\n'use client';\n\nimport dynamic from 'next/dynamic';\n\nconst MauticForm = dynamic(\n () => import('@adelant/react-mautic-forms').then((m) => m.MauticForm),\n { ssr: false }\n);\nconst MauticInput = dynamic(\n () => import('@adelant/react-mautic-forms').then((m) => m.MauticInput),\n { ssr: false }\n);\nconst MauticSubmitButton = dynamic(\n () => import('@adelant/react-mautic-forms').then((m) => m.MauticSubmitButton),\n { ssr: false }\n);\n```\n\n## Component API\n\n### MauticForm\n\nMain container for Mautic forms that handles form submission and notifications.\n\n```jsx\n {}} // Optional: Function called on successful submission\n errorCallback={(error, formData) => {}} // Optional: Function called on error\n className=\"my-form\" // Optional: CSS class for the wrapper\n>\n {/* Form elements go here */}\n\n```\n\n### MauticInput\n\nComponent for creating various form input types.\n\n```jsx\n\n```\n\nSupported input types: `text`, `email`, `tel`, `number`, `date`, `textarea`, and others supported by HTML input.\n\n### MauticSubmitButton\n\nCustomizable submit button for the form.\n\n```jsx\n\n Send Message // Button text/content\n\n```\n\n### MauticTracking\n\nAdds Mautic tracking to your application. Include this once, typically in your app layout.\n\n```jsx\n\n```\n\n## Custom Hooks (Headless Usage)\n\n### useMauticForm\n\nIf you need complete control over the form rendering and logic, you can use the `useMauticForm` hook.\n\n```jsx\nimport { useMauticForm } from \"@adelant/react-mautic-forms\";\n\nfunction MyCustomForm() {\n const { handleSubmit, isSubmitting, error } = useMauticForm({\n formId: \"123\",\n formName: \"contact_form\",\n action: \"https://mautic.example.com/form/submit\",\n successCallback: (formData) => console.log(\"Success!\", formData),\n errorCallback: (err) => console.error(\"Error!\", err),\n });\n\n return (\n \n );\n}\n```\n\n### MauticFormScript\n\nAdds the Mautic form handler script to your application. Include this once, typically in your app layout.\n\n```jsx\n\n```\n\n## Advanced Usage\n\n### Custom Form Styling\n\nAll components accept `className` props for styling with Tailwind CSS, CSS modules, or any CSS framework.\n\n```jsx\n\n \n\n \n Submit\n \n\n```\n\n### Form Submission Handling\n\nCustomize what happens after successful form submission:\n\n```jsx\n {\n // Access form data\n console.log(\"Form data:\", formData);\n\n // Track event with analytics\n window.gtag?.(\"event\", \"form_submission\", {\n form_name: \"contact_form\",\n });\n\n // Navigate to thank you page\n router.push(\"/thank-you\");\n }}\n>\n {/* Form fields */}\n\n```\n\n### Custom Mautic Instance\n\nYou can use a custom Mautic instance by configuring the endpoint URL:\n\n```jsx\n\n {/* Form fields */}\n\n```\n\n## TypeScript Support\n\nThis library includes comprehensive TypeScript definitions. Import types directly:\n\n```tsx\nimport { MauticFormProps, MauticInputProps } from \"@adelant/react-mautic-forms\";\n\nconst CustomInput = ({ ...props }: MauticInputProps) => {\n return ;\n};\n```\n\n## Browser Support\n\n- Chrome, Firefox, Safari, Edge: latest 2 versions\n- IE: Not supported\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Acknowledgements\n\n- Developed and maintained by [Adelant](https://adelant.com)\n- Built with [Bun](https://bun.sh) and TypeScript\n","readmeFilename":"README.md"}