{"id":48581921,"url":"https://github.com/devalade/trivule-react","last_synced_at":"2026-04-08T17:03:31.420Z","repository":{"id":242321808,"uuid":"805815446","full_name":"devalade/trivule-react","owner":"devalade","description":"This is an implementation of Trivule in React JS","archived":false,"fork":false,"pushed_at":"2024-06-02T19:58:03.000Z","size":132,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-06-03T08:34:57.485Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devalade.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-05-25T14:38:54.000Z","updated_at":"2024-06-02T19:58:06.000Z","dependencies_parsed_at":"2024-06-02T08:32:33.937Z","dependency_job_id":"556afab1-ba6a-4349-a7cd-5023a3816d11","html_url":"https://github.com/devalade/trivule-react","commit_stats":null,"previous_names":["devalade/trivule-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devalade/trivule-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devalade%2Ftrivule-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devalade%2Ftrivule-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devalade%2Ftrivule-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devalade%2Ftrivule-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devalade","download_url":"https://codeload.github.com/devalade/trivule-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devalade%2Ftrivule-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31564917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2026-04-08T17:03:19.342Z","updated_at":"2026-04-08T17:03:31.396Z","avatar_url":"https://github.com/devalade.png","language":"TypeScript","readme":"# Trivule Integration in React + Vite\n\nThis project demonstrates a minimal integration of [Trivule](https://github.com/trivule/trivule) and Trivule form in a React application using Vite.\n\u003e Note: Trivule v1.3.0 \n\n## Code Overview\n\n### `useTrivuleForm`\n\nThis custom hook creates and manages a Trivule form instance.\n\n```javascript\nimport { useEffect, useMemo } from \"react\";\nimport { TrivuleForm } from \"trivule\";\n\n// Creating a Trivule form instance\nfunction useTrivuleForm(props) {\n  const trivuleForm = useMemo(() =\u003e {\n    // Create a new instance of TrivuleForm with the provided configuration\n    const form = new TrivuleForm(props);\n    return form;\n  }, [props]);\n\n  useEffect(() =\u003e {\n    // Bind the Trivule form to its HTML element as soon as the element is ready\n    //Although this method can be called several times, \n    //once Trivule encounters a valid html element,\n    // it does not redo the binding.\n    trivuleForm.bind(\"form\");\n  }, [trivuleForm]);\n\n  return trivuleForm;\n}\n\nexport default useTrivuleForm;\n```\n\n### `TrForm`\n\nThis component uses `useTrivuleForm` to create a Trivule form instance and handle form submission.\n\n```javascript\nimport { useEffect, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { TrivuleForm } from \"trivule\";\nimport useTrivuleForm from \"./useTrivuleForm\";\n\n// The TrivuleFormComponent component\nfunction TrForm({ children, onSubmit, trFormConfig, aftertBinding }) {\n  const form = useTrivuleForm(trFormConfig);\n  Registers a callback to be executed when the html element is bound to Trivule. For example, field validation\nform.afterBinding(aftertBinding);\n  const handleSubmit = (e) =\u003e {\n    // Prevent the default form submission if the form is valid\n    if (!form.valid) {\n      e.preventDefault();\n      // Call the onSubmit callback provided by the parent component\n      if (onSubmit) {\n        onSubmit(form);\n      }\n    }\n  };\n\n  return \u003cform onSubmit={handleSubmit}\u003e{children}\u003c/form\u003e;\n}\n\n// Define the prop types for TrivuleFormComponent\nTrForm.propTypes = {\n  children: PropTypes.node, // The child elements to be rendered inside the form\n  onSubmit: PropTypes.func, // The callback function to handle form submission\n  trFormConfig: PropTypes.any, // The configuration object for the Trivule form\n  aftertBinding: PropTypes.func, // The callback function to be executed after the form is bound\n};\n\nexport default TrForm;\n```\n\n### `ContactForm`\n\nThis component demonstrates how to use `TrForm` for form validation with Trivule.\n\n```javascript\nimport TrForm from \"./trivule-form\";\n\nfunction ContactForm() {\n  // This callback will be executed as soon as the form is ready.\n  const afterFormBound = (trivuleForm) =\u003e {\n    trivuleForm.make({\n      name: {\n        rules: \"required|between:2,80|only:string\",\n      },\n      email: {\n        rules: \"required|email\",\n      },\n      message: {\n        rules: \"required|between:2,200|only:string\",\n        realTime:false\n      },\n    });\n\n    // Modify email validation to accept only gmail addresses\n    const email = trivuleForm.get(\"email\");\n    if (email) {\n      email.appendRule({\n        rule: \"endWith:@gmail.com\",\n        message: \"Only gmail addresses are accepted\",\n      });\n    }\n  };\n\n  return (\n    \u003cTrForm aftertBinding={afterFormBound}\u003e\n      \u003ch1\u003eForm validation with Trivule, React+Vite\u003c/h1\u003e\n      \u003cdiv className=\"row\"\u003e\n        \u003cdiv className=\"col\"\u003e\n          \u003cdiv className=\"form-group\"\u003e\n            \u003clabel htmlFor=\"name\"\u003eName\u003c/label\u003e\n            \u003cinput type=\"text\" id=\"name\" name=\"name\" /\u003e\n            \u003cdiv className=\"alert alert-danger\" role=\"alert\"\u003e\n              \u003cdiv className=\"triangle\"\u003e\u003c/div\u003e\n              \u003cdiv data-tr-feedback=\"name\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"col\"\u003e\n          \u003cdiv className=\"form-group\"\u003e\n            \u003clabel htmlFor=\"email\"\u003eE-mail\u003c/label\u003e\n            \u003cinput type=\"email\" id=\"email\" name=\"email\" /\u003e\n            \u003cdiv className=\"alert alert-danger\" role=\"alert\"\u003e\n              \u003cdiv className=\"triangle\"\u003e\u003c/div\u003e\n              \u003cdiv data-tr-feedback=\"email\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"form-group\"\u003e\n        \u003clabel htmlFor=\"message\"\u003eMessages\u003c/label\u003e\n        \u003ctextarea id=\"message\" className=\"form-control\" name=\"message\"\u003e\u003c/textarea\u003e\n        \u003cdiv className=\"alert alert-danger\" role=\"alert\"\u003e\n          \u003cdiv className=\"triangle\"\u003e\u003c/div\u003e\n          \u003cdiv data-tr-feedback=\"message\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cp\u003e\n        \u003cbutton type=\"submit\" value=\"Submit\" data-tr-submit\u003e\n          Submit\n        \u003c/button\u003e\n      \u003c/p\u003e\n    \u003c/TrForm\u003e\n  );\n}\n\nexport default ContactForm;\n```\n\n## How to Run\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/devalade/trivule-react.git\ncd trivule-react\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Start the development server:\n\n```bash\nnpm run dev\n```\n\n4. Open your browser and navigate to `http://localhost:5173` to see the form in action.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevalade%2Ftrivule-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevalade%2Ftrivule-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevalade%2Ftrivule-react/lists"}