https://github.com/formcarry/formcarry-react
React library of https://formcarry.com
https://github.com/formcarry/formcarry-react
api-service forms react-hooks reactjs
Last synced: 9 months ago
JSON representation
React library of https://formcarry.com
- Host: GitHub
- URL: https://github.com/formcarry/formcarry-react
- Owner: formcarry
- Created: 2020-01-08T18:38:29.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-18T18:04:20.000Z (over 2 years ago)
- Last Synced: 2024-10-29T23:07:40.238Z (about 1 year ago)
- Topics: api-service, forms, react-hooks, reactjs
- Language: TypeScript
- Homepage:
- Size: 995 KB
- Stars: 17
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Formcarry React
React library of [formcarry](https://formcarry.com).
## Getting Started
Run this command to install with yarn:
```
yarn add @formcarry/react
```
or with npm:
```
npm install --save @formcarry/react
```
*You have to have React as a dependency in your project in order to use this library.*
Also this package uses [React Hooks](https://reactjs.org/docs/hooks-intro.html), therefore you have to use React >= 16.8.0
### Example
A simple demonstration with React library:
```jsx
import { useForm } from '@formcarry/react';
function MyFormcarry() {
// Call the `useForm` hook in your function component
const {state, submit} = useForm({
id: 'Your-Form-ID-From-Formcarry'
});
// Success message
if (state.submitted) {
return
Thank you! We received your submission.;
}
return (
Name
Surname
Email
Message
Send
);
}
```
You have to use a `` element and pass `submit` as the `onSubmit` handler.
### Destructuring with different field name
We return `state` and `submit` from `useForm` by default, but you can rename it to whatever you want, like this:
```jsx
import { useForm } from '@formcarry/react';
function MyFormcarry() {
const {state: formcarryState, submit: formcarrySubmit} = useForm({
id: 'Your-Form-ID-From-Formcarry'
});
if (formcarryState.submitted) {
return
Thank you! We received your submission.;
}
return (
Name
Surname
Email
Message
Send
);
}
```
### Example with Extra Data
```js
import { useForm } from '@formcarry/react';
function MyFormcarry() {
// Call the `useForm` hook in your function component
const {state, submit} = useForm({
id: 'Your-Form-ID-From-Formcarry',
extraData: {
// add whatever you want
screenSize: `${window.screen.width}x${window.screen.height}`,
language: window.navigator.language,
}
});
...
}
```
You can pass those to `useForm`:
| Key | Description |
| :----------- | :------------------------------------------------------------ |
| `id` | Your Form ID, which you can get it from [formcarry](https://formcarry.com) |
| `debug` | Boolean, it prints out logs to the console, true by default |
| `extraData` | Accepts object, it will mix those object with form fields |
The `state` object contains the following:
| Key | Description |
| :----------- | :------------------------------------------------------------ |
| `submitting` | A Boolean indicating whether the form is currently submitting |
| `submitted` | A Boolean indicating whether the form successfully submitted |
| `response` | Returns formcarry successful response |
| `error` | Returns formcarry error |