Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fetchforms/fetch-forms-react
The react client for Fetch Forms
https://github.com/fetchforms/fetch-forms-react
form form-builder form-validation forms react
Last synced: about 1 month ago
JSON representation
The react client for Fetch Forms
- Host: GitHub
- URL: https://github.com/fetchforms/fetch-forms-react
- Owner: fetchforms
- License: mit
- Created: 2021-11-11T17:39:19.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-07T23:23:20.000Z (almost 3 years ago)
- Last Synced: 2024-12-16T09:35:18.670Z (about 1 month ago)
- Topics: form, form-builder, form-validation, forms, react
- Language: JavaScript
- Homepage: https://fetchforms.io
- Size: 1.45 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fetch Forms for React
### What is Fetch Forms?
Fetch Forms is a headless forms builder designed to help developers build forms and connect data.
## Documentation
- [Full code examples](https://github.com/fetchforms/react-example-app)
- [Doc Overview](https://www.fetchforms.io/docs/overview)
- [The Fetch Form object](https://www.fetchforms.io/docs/fetch-form-object)
- [Storing forms in source code](www.fetchforms.io/docs/source-code-forms)
### Add the package to your app
```sh
npm install @fetchforms/react
```
```sh
yarn add @fetchforms/react
```
### Quick start
Using the `` component is the fastest way to see Fetch Forms in action. This component will handle client-side validation, data parsing, and saving to the cloud if your form has `cloudSave` set.
```jsx
import { FetchForm } from "@fetchforms/react";
const MyFetchForm = () => {
const onSubmit = async (values) => {
console.log('values', values);
};
const onLoad = async (values) => {
console.log('values', values);
};
return (
);
};
```
### Using hooks
The `useFetchForms` hook allows you to display your forms in more complex layouts. See the [custom form example](https://github.com/fetchforms/react-example-app/tree/main/src/examples) to see an implementation using Ant.Design form element.
```jsx
import { useFetchForms } from "@fetchforms/react";
const CustomFormLayout = () => {
const [fetchForm, loading, error] = useFetchForms('FORM_SLUG');
const onFinish = (values) => {
console.log('values', values);
// To show an error on the form, return a message as a string.
};
return (
<>
{error &&
Error: {error}}
{loading ? (
Loading...
) : (
fetchForm && (
{fetchForm.formItems.map((item, i) => {
if(item.fieldType === 'select') {
return (
{item.label}
{item.options.map((opt) => (
{opt.label}
))}
);
} else if (item.fieldType === 'checkbox') {
return (
{item.label}
);
{/* ...other field types */}
} else {
return (
{item.label}
);
}
})}
{fetchForm.submitText}
)
)}
>
)
}
```