https://github.com/devalade/trivule-react
This is an implementation of Trivule in React JS
https://github.com/devalade/trivule-react
Last synced: 9 days ago
JSON representation
This is an implementation of Trivule in React JS
- Host: GitHub
- URL: https://github.com/devalade/trivule-react
- Owner: devalade
- Created: 2024-05-25T14:38:54.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-02T19:58:03.000Z (almost 2 years ago)
- Last Synced: 2024-06-03T08:34:57.485Z (almost 2 years ago)
- Language: TypeScript
- Size: 129 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Trivule Integration in React + Vite
This project demonstrates a minimal integration of [Trivule](https://github.com/trivule/trivule) and Trivule form in a React application using Vite.
> Note: Trivule v1.3.0
## Code Overview
### `useTrivuleForm`
This custom hook creates and manages a Trivule form instance.
```javascript
import { useEffect, useMemo } from "react";
import { TrivuleForm } from "trivule";
// Creating a Trivule form instance
function useTrivuleForm(props) {
const trivuleForm = useMemo(() => {
// Create a new instance of TrivuleForm with the provided configuration
const form = new TrivuleForm(props);
return form;
}, [props]);
useEffect(() => {
// Bind the Trivule form to its HTML element as soon as the element is ready
//Although this method can be called several times,
//once Trivule encounters a valid html element,
// it does not redo the binding.
trivuleForm.bind("form");
}, [trivuleForm]);
return trivuleForm;
}
export default useTrivuleForm;
```
### `TrForm`
This component uses `useTrivuleForm` to create a Trivule form instance and handle form submission.
```javascript
import { useEffect, useMemo } from "react";
import PropTypes from "prop-types";
import { TrivuleForm } from "trivule";
import useTrivuleForm from "./useTrivuleForm";
// The TrivuleFormComponent component
function TrForm({ children, onSubmit, trFormConfig, aftertBinding }) {
const form = useTrivuleForm(trFormConfig);
Registers a callback to be executed when the html element is bound to Trivule. For example, field validation
form.afterBinding(aftertBinding);
const handleSubmit = (e) => {
// Prevent the default form submission if the form is valid
if (!form.valid) {
e.preventDefault();
// Call the onSubmit callback provided by the parent component
if (onSubmit) {
onSubmit(form);
}
}
};
return {children};
}
// Define the prop types for TrivuleFormComponent
TrForm.propTypes = {
children: PropTypes.node, // The child elements to be rendered inside the form
onSubmit: PropTypes.func, // The callback function to handle form submission
trFormConfig: PropTypes.any, // The configuration object for the Trivule form
aftertBinding: PropTypes.func, // The callback function to be executed after the form is bound
};
export default TrForm;
```
### `ContactForm`
This component demonstrates how to use `TrForm` for form validation with Trivule.
```javascript
import TrForm from "./trivule-form";
function ContactForm() {
// This callback will be executed as soon as the form is ready.
const afterFormBound = (trivuleForm) => {
trivuleForm.make({
name: {
rules: "required|between:2,80|only:string",
},
email: {
rules: "required|email",
},
message: {
rules: "required|between:2,200|only:string",
realTime:false
},
});
// Modify email validation to accept only gmail addresses
const email = trivuleForm.get("email");
if (email) {
email.appendRule({
rule: "endWith:@gmail.com",
message: "Only gmail addresses are accepted",
});
}
};
return (
Form validation with Trivule, React+Vite
Name
E-mail
Messages
Submit
);
}
export default ContactForm;
```
## How to Run
1. Clone the repository:
```bash
git clone https://github.com/devalade/trivule-react.git
cd trivule-react
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open your browser and navigate to `http://localhost:5173` to see the form in action.