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: 2 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 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-18T18:04:20.000Z (over 1 year ago)
• Last Synced: 2024-10-29T23:07:40.238Z (3 months 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				                    |