{"id":15962556,"url":"https://github.com/greon5/react-contact-form","last_synced_at":"2026-05-04T09:31:00.506Z","repository":{"id":202984522,"uuid":"708548349","full_name":"GreoN5/react-contact-form","owner":"GreoN5","description":"A comprehensive contact UI library based on styled-components with the aim for easier display and interaction with a contact form.","archived":false,"fork":false,"pushed_at":"2023-11-15T11:47:44.000Z","size":24,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-16T10:01:29.001Z","etag":null,"topics":["contact","contact-form","javascript","react","react-component","react-component-library","react-components","reactjs","styled-components","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GreoN5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2023-10-22T21:46:14.000Z","updated_at":"2023-11-13T23:24:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"b879f95e-83df-4248-a2e2-0a3200819503","html_url":"https://github.com/GreoN5/react-contact-form","commit_stats":null,"previous_names":["greon5/react-contact-form"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/GreoN5/react-contact-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GreoN5%2Freact-contact-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GreoN5%2Freact-contact-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GreoN5%2Freact-contact-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GreoN5%2Freact-contact-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GreoN5","download_url":"https://codeload.github.com/GreoN5/react-contact-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GreoN5%2Freact-contact-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273093955,"owners_count":25044438,"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","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["contact","contact-form","javascript","react","react-component","react-component-library","react-components","reactjs","styled-components","typescript"],"created_at":"2024-10-07T16:04:30.260Z","updated_at":"2026-05-04T09:31:00.477Z","avatar_url":"https://github.com/GreoN5.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-contact-form\n\n**react-contact-form** is a comprehensive contact UI library based on styled-components \nwith the aim for easier display and interaction with a contact form.\n\n## Installation\n\n**You can install react-contact-form using npm:**\n\n```bash\nnpm install react-contact-form\n```\n\n**Or using yarn:**\n\n```bash\nyarn add react-contact-form\n```\n\n## Getting started with react-contact-form\n\nHere is an example of a basic app using react-contact-form's `ContactForm` component:\n\n```jsx\nimport React from 'react';\nimport {ContactForm} from 'react-contact-form';\n\nfunction App() {\n    return \u003cContactForm onSubmitContact={(e) =\u003e console.log(e)}/\u003e;\n}\n\nexport default App;\n```\n\n## Props\n\n`ContactForm` component accepts the following props:\n\n- `useCheckbox` - `required prop` ((e?: FormEvent\u003cHTMLFormElement\u003e) =\u003e void | Promise\u003cvoid\u003e): Represents the function\n  to be\n  called when the form is submitted. It can be a regular function or an asynchronous function that returns a promise.\n  You typically use it to handle form submission logic, such as making an API request or updating the state.\n- `fields` (ReactNode): Allows you to provide the content for the form fields within the component. You can pass any\n  valid React element or JSX content as the value. This is where you can define the input fields, labels, and any other\n  form elements you want to include in the form. (This prop is going to be always last in the form, before the submit\n  button)\n- `heading` (ReactNode | string): Lets you set the content for the heading of your form. You can pass either a string or\n  a React element as the value. It is typically used to provide a title or description for the form.\n- `subHeading` (ReactNode | string): Similar to the heading prop, this allows you to provide a subheading or additional\n  information below the main heading of the form. It can also accept either a string or a React element as the value.\n- `headingClassName` (string): Lets you specify a custom CSS class for styling the heading element of your form. You can\n  use it to apply unique styles to the form's heading.\n- `formClassName` (string): Similar to headingClassName, this prop allows you to set a custom CSS class for styling the\n  form element. It's useful for applying specific styles to the entire form.\n- `labelClassName`, `inputClassName`, `textareaClassName`, `submitButtonClassName` (string): These props allow you to\n  define custom CSS classes for individual elements within the form, such as labels, input fields, textareas, and the\n  submit button. This gives you granular control over the styling of each element.\n\n## Storybook\n\n[Visit storybook](https://react-contact-form-storybook.netlify.app/ \"Visit Storybook\")\n\n## Contributing\n\nContributions are welcome! If you have suggestions, bug reports, or feature requests, please open an issue or submit a\npull request.\n\n## License\n\nThis project is licensed under the terms of the\n[MIT license](/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreon5%2Freact-contact-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreon5%2Freact-contact-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreon5%2Freact-contact-form/lists"}