{"id":21905674,"url":"https://github.com/ninsau/nextjs-forms","last_synced_at":"2026-01-07T17:07:30.524Z","repository":{"id":257804126,"uuid":"864685946","full_name":"ninsau/nextjs-forms","owner":"ninsau","description":"A flexible and customizable form builder for Next.js and React, featuring Formik and Yup validation. This package allows developers to easily build forms with dynamic field configurations and validation schemas, supporting file uploads, select fields, and rich text editors.","archived":false,"fork":false,"pushed_at":"2024-09-29T02:22:16.000Z","size":28,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-07T05:33:22.545Z","etag":null,"topics":["form-components","forms","forms-builder","nextjs","reactjs","reusable-components","reusable-form","tailwindcss"],"latest_commit_sha":null,"homepage":"https://nextjs-reusables.vercel.app/forms","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ninsau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-28T22:10:55.000Z","updated_at":"2024-09-29T07:32:24.000Z","dependencies_parsed_at":"2024-11-28T16:46:03.025Z","dependency_job_id":null,"html_url":"https://github.com/ninsau/nextjs-forms","commit_stats":null,"previous_names":["ninsau/nextjs-forms"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/ninsau/nextjs-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Fnextjs-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Fnextjs-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Fnextjs-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Fnextjs-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ninsau","download_url":"https://codeload.github.com/ninsau/nextjs-forms/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Fnextjs-forms/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264935292,"owners_count":23685493,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-components","forms","forms-builder","nextjs","reactjs","reusable-components","reusable-form","tailwindcss"],"created_at":"2024-11-28T16:35:11.445Z","updated_at":"2026-01-07T17:07:30.517Z","avatar_url":"https://github.com/ninsau.png","language":"TypeScript","readme":"# nextjs-forms\n\nA flexible and customizable form builder for Next.js and React, featuring Formik and Yup validation. This package allows developers to easily build forms with dynamic field configurations and validation schemas, supporting file uploads, select fields, and rich text editors.\n\n## See the [Examples](https://nextjs-reusables.vercel.app/forms)\n\n## Table of Contents\n\n- [Features](#features)\n- [Prerequisites](#prerequisites)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Basic Example](#basic-example)\n  - [Props](#props)\n  - [Custom Styling](#custom-styling)\n- [Contributing](#contributing)\n- [Versioning](#versioning)\n- [License](#license)\n- [Code of Conduct](#code-of-conduct)\n- [Acknowledgments](#acknowledgments)\n\n## Features\n\n- **Dynamic Form Fields**: Build forms dynamically using a JSON-like configuration for different field types.\n- **Validation**: Integrates Formik and Yup to provide robust validation out of the box.\n- **Rich Text Editor**: Supports rich text editing with `react-quill`.\n- **Select Fields**: Includes multi-select and creatable select fields with `react-select`.\n- **File Uploads**: Supports file upload fields with optional custom upload handling.\n- **Dark Mode Support**: Tailored for dark mode and light mode with smooth transitions.\n- **Customizable Styles**: Easily override the default styles using the `styles` prop.\n\n## Prerequisites\n\nMake sure you have a working Next.js or React environment. This package assumes you are using:\n\n- **Next.js 11 or later**\n- **React 16.8.0 or later**\n\n## Installation\n\nInstall the package via npm:\n\n```bash\nnpm install nextjs-forms\n```\n\nOr via yarn:\n\n```bash\nyarn add nextjs-forms\n```\n\n## Usage\n\nImport the `FormBuilder` component into your Next.js or React component:\n\n```jsx\n\"use client\";\n\nimport React from \"react\";\nimport * as Yup from \"yup\";\nimport { FormBuilder, FieldConfig } from \"nextjs-forms\"; // Importing from the package\nimport \"nextjs-forms/dist/index.css\"; // Import default styles\n```\n\nPass the required props to the `FormBuilder` component, such as fields, initial values, and validation schema:\n\n```jsx\n\u003cFormBuilder\n  fields={CONTACT_FORM_FIELDS}\n  initialValues={initialValues}\n  onSubmit={handleOnSubmit}\n/\u003e\n```\n\n### Basic Example\n\nHere's a simple example of a form with an input, textarea, and select field:\n\n```jsx\n\"use client\";\n\nimport React from \"react\";\nimport * as Yup from \"yup\";\nimport { FormBuilder, FieldConfig } from \"nextjs-forms\"; // Importing from your package\n\n// Field configurations\nconst CONTACT_FORM_FIELDS: FieldConfig[] = [\n  {\n    name: \"fullName\",\n    label: \"Full Name\",\n    placeholder: \"Enter your full name\",\n    validation: Yup.string().required(\"Full Name is required\"),\n    componentType: \"input\",\n    type: \"text\",\n  },\n  {\n    name: \"email\",\n    label: \"Email Address\",\n    placeholder: \"Enter your email\",\n    validation: Yup.string().email().required(\"Email is required\"),\n    componentType: \"input\",\n    type: \"email\",\n  },\n  {\n    name: \"inquiryType\",\n    label: \"Inquiry Type\",\n    placeholder: \"Select inquiry type\",\n    validation: Yup.string().required(\"Please select an inquiry type\"),\n    componentType: \"select\",\n    options: [\"General Inquiry\", \"Support\", \"Feedback\"],\n  },\n  {\n    name: \"message\",\n    label: \"Message\",\n    placeholder: \"Enter your message\",\n    validation: Yup.string().required(\"Message is required\"),\n    componentType: \"textarea\",\n    rows: 4,\n  },\n];\n\n// Initial form values\nconst initialValues = {\n  fullName: \"\",\n  email: \"\",\n  inquiryType: \"\",\n  message: \"\",\n};\n\n// Handle form submission\nconst handleOnSubmit = (values: any) =\u003e {\n  console.log(\"Form submitted with values:\", values);\n};\n\nconst ContactFormExample = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eContact Us\u003c/h2\u003e\n      \u003cFormBuilder\n        fields={CONTACT_FORM_FIELDS}\n        initialValues={initialValues}\n        onSubmit={handleOnSubmit}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ContactFormExample;\n```\n\n### Props\n\nThe `FormBuilder` component accepts the following props:\n\n| Prop             | Type                            | Required | Description                                                          |\n| ---------------- | ------------------------------- | -------- | -------------------------------------------------------------------- |\n| fields           | FieldConfig[]                   | Yes      | An array of field configurations, describing the fields in the form. |\n| initialValues    | Record\u003cstring, any\u003e             | Yes      | An object containing the initial values of the form.                 |\n| onSubmit         | (values, actions) =\u003e void       | Yes      | A function to handle form submission.                                |\n| validationSchema | Yup.ObjectSchema\u003cany\u003e           | No       | Optional Yup validation schema for form validation.                  |\n| onFileUpload     | (file: File) =\u003e Promise\u003cstring\u003e | No       | Optional function to handle file uploads, returning a file URL.      |\n| styles           | CustomStyles                    | No       | Custom styles for overriding default form styles.                    |\n| enableDarkMode   | boolean                         | No       | Enable dark mode for the form.                                       |\n\n### Custom Styling\n\nThe `FormBuilder` allows for custom styles via the `styles` prop. You can override the default `Tailwind CSS-based` styles for individual form components:\n\n```jsx\n\u003cFormBuilder\n  fields={fields}\n  initialValues={initialValues}\n  validationSchema={validationSchema}\n  onSubmit={(values) =\u003e console.log(values)}\n  styles={{\n    input: \"custom-input-class\", // Customize input field styles\n    textarea: \"custom-textarea-class\", // Customize textarea field styles\n    richText: \"custom-richtext-class\", // Customize rich text editor styles\n    select: \"custom-select-class\", // Customize select field styles\n    checkbox: \"custom-checkbox-class\", // Customize checkbox field styles\n    label: \"custom-label-class\", // Customize label styles\n    submitButton: \"custom-submit-button-class\", // Customize submit button styles\n    form: \"custom-form-class\", // Customize form container styles\n    fieldWrapper: \"custom-field-wrapper-class\", // Customize field wrapper styles\n    errorMessage: \"custom-error-message-class\", // Customize error message styles\n  }}\n/\u003e\n```\n\n## Contributing\n\nContributions are welcome! If you'd like to contribute to this project, please follow these steps:\n\n1. Fork the repository.\n2. Create a new feature branch (`git checkout -b feature/your-feature-name`).\n3. Commit your changes (`git commit -m \"Add your message\"`).\n4. Push to the branch (`git push origin feature/your-feature-name`).\n5. Create a pull request detailing your changes.\n\nPlease ensure your code adheres to the project's coding standards and includes relevant tests if necessary.\n\n## Versioning\n\nWe use [Semantic Versioning](https://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/ninsau/nextjs-forms/tags).\n\nTo bump the version, update the `version` field in `package.json` and follow the guidelines in the [CONTRIBUTING.md](CONTRIBUTING.md) file.\n\n## License\n\nThis project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.\n\n## Code of Conduct\n\nThis project adheres to the [Contributor Covenant Code of Conduct](https://www.contributor-covenant.org/version/2/0/code_of_conduct/). By participating, you are expected to uphold this code. Please report unacceptable behavior to [INSERT EMAIL HERE].\n\n## Acknowledgments\n\n- Inspired by common form-building and validation patterns in React and Next.js.\n- Thanks to all contributors and users for their support.\n- A special shout-out to the open-source community for providing tools and inspiration for this project.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninsau%2Fnextjs-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fninsau%2Fnextjs-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninsau%2Fnextjs-forms/lists"}