├── .gitattributes
├── .gitignore
├── README.md
├── dist
    ├── index.d.ts
    ├── index.js
    ├── lib
    │   ├── handler.d.ts
    │   └── types.d.ts
    ├── react.cjs.development.js
    ├── react.cjs.development.js.map
    ├── react.cjs.production.min.js
    ├── react.cjs.production.min.js.map
    ├── react.esm.js
    └── react.esm.js.map
├── package.json
├── src
    ├── index.ts
    └── lib
    │   ├── handler.ts
    │   └── types.ts
├── tsconfig.json
├── tslint.json
└── yarn.lock


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Formcarry React
  2 | 
  3 | React library of [formcarry](https://formcarry.com).
  4 | 
  5 | ## Getting Started
  6 | 
  7 | Run this command to install with yarn:
  8 | 
  9 | ```
 10 | yarn add @formcarry/react
 11 | ```
 12 | 
 13 | or with npm:
 14 | 
 15 | ```
 16 | npm install --save @formcarry/react
 17 | ```
 18 | 
 19 | 
 20 | *You have to have React as a dependency in your project in order to use this library.*
 21 | 
 22 | Also this package uses [React Hooks](https://reactjs.org/docs/hooks-intro.html), therefore you have to use React >= 16.8.0
 23 | 
 24 | ### Example
 25 | 
 26 | A simple demonstration with React library:
 27 | 
 28 | ```jsx
 29 | import { useForm } from '@formcarry/react';
 30 | 
 31 | function MyFormcarry() {
 32 |   // Call the `useForm` hook in your function component
 33 |   const {state, submit} = useForm({
 34 |     id: 'Your-Form-ID-From-Formcarry'
 35 |   });
 36 | 
 37 |   // Success message
 38 |   if (state.submitted) {
 39 |     return <div>Thank you! We received your submission.</div>;
 40 |   }
 41 | 
 42 |   return (
 43 |     <form onSubmit={submit}>
 44 | 		<label htmlFor="name">Name</label>
 45 | 		<input id="name" type="text" name="text" />
 46 | 
 47 | 		<label htmlFor="surname">Surname</label>
 48 | 		<input id="surname" type="text" name="surname" />
 49 | 		
 50 | 		<label htmlFor="email">Email</label>
 51 | 		<input id="email" type="email" name="email" />
 52 | 		
 53 | 		<label htmlFor="message">Message</label>
 54 | 		<textarea id="message" name="message" />
 55 | 		
 56 | 		<button type="submit">Send</button>
 57 |     </form>
 58 |   );
 59 | }
 60 | ```
 61 | You have to use a `<form>` element and pass `submit` as the `onSubmit` handler.
 62 | 
 63 | ### Destructuring with different field name
 64 | We return `state` and `submit` from `useForm` by default, but you can rename it to whatever you want, like this:
 65 | 
 66 | ```jsx
 67 | import { useForm } from '@formcarry/react';
 68 | 
 69 | function MyFormcarry() {
 70 |   const {state: formcarryState, submit: formcarrySubmit} = useForm({
 71 | 	id: 'Your-Form-ID-From-Formcarry'
 72 |   });
 73 | 
 74 |   if (formcarryState.submitted) {
 75 |     return <div>Thank you! We received your submission.</div>;
 76 |   }
 77 | 
 78 |   return (
 79 |     <form onSubmit={formcarrySubmit}>
 80 | 		<label htmlFor="name">Name</label>
 81 | 		<input id="name" type="text" name="text" />
 82 | 
 83 | 		<label htmlFor="surname">Surname</label>
 84 | 		<input id="surname" type="text" name="surname" />
 85 | 		
 86 | 		<label htmlFor="email">Email</label>
 87 | 		<input id="email" type="email" name="email" />
 88 | 		
 89 | 		<label htmlFor="message">Message</label>
 90 | 		<textarea id="message" name="message" />
 91 | 		
 92 | 		<button type="submit">Send</button>
 93 |     </form>
 94 |   );
 95 | }
 96 | ```
 97 | 
 98 | 
 99 | ### Example with Extra Data
100 | 
101 | ```js
102 | import { useForm } from '@formcarry/react';
103 | 
104 | function MyFormcarry() {
105 |   // Call the `useForm` hook in your function component
106 |   const {state, submit} = useForm({
107 | 	id: 'Your-Form-ID-From-Formcarry',
108 | 	extraData: {
109 | 		// add whatever you want
110 | 		screenSize: `${window.screen.width}x${window.screen.height}`,
111 | 		language: window.navigator.language,
112 | 	}
113 |   });
114 | 
115 |   ...
116 | }
117 | ```
118 | 
119 | 
120 | You can pass those to `useForm`:
121 | 
122 | | Key         	| Description                                                   |
123 | | :-----------	| :------------------------------------------------------------ |
124 | | `id`			| Your Form ID, which you can get it from [formcarry](https://formcarry.com) |
125 | | `debug`		| Boolean, it prints out logs to the console, true by default |
126 | | `extraData`	| Accepts object, it will mix those object with form fields |
127 | 
128 | 
129 | 
130 | The `state` object contains the following:
131 | 
132 | | Key          | Description                                                   |
133 | | :----------- | :------------------------------------------------------------ |
134 | | `submitting` | A Boolean indicating whether the form is currently submitting |
135 | | `submitted`  | A Boolean indicating whether the form successfully submitted  |
136 | | `response`   | Returns formcarry successful response  |
137 | | `error`      | Returns formcarry error				                    |
138 | 


--------------------------------------------------------------------------------
/dist/index.d.ts:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Props, FormcarryResponse } from './lib/types'
 3 | declare function useForm(
 4 | 	props: Props,
 5 | ): {
 6 | 	state: {
 7 | 		error: any
 8 | 		response: FormcarryResponse | undefined
 9 | 		submitting: boolean
10 | 		submitted: boolean
11 | 	}
12 | 	submit: (event: React.FormEvent<HTMLFormElement>) => void
13 | }
14 | export { useForm }
15 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | 
3 | if (process.env.NODE_ENV === 'production') {
4 | 	module.exports = require('./react.cjs.production.min.js')
5 | } else {
6 | 	module.exports = require('./react.cjs.development.js')
7 | }
8 | 


--------------------------------------------------------------------------------
/dist/lib/handler.d.ts:
--------------------------------------------------------------------------------
1 | import { FormcarryResponse } from './types';
2 | export declare function errorHandler(err: FormcarryResponse): void;
3 | export declare function noIdHandler(): void;
4 | 


--------------------------------------------------------------------------------
/dist/lib/types.d.ts:
--------------------------------------------------------------------------------
 1 | export interface Props {
 2 |     id: string;
 3 |     debug?: boolean;
 4 |     extraData?: any;
 5 | }
 6 | export interface FormcarryResponse {
 7 |     code: number;
 8 |     status: string;
 9 |     title: string;
10 |     message: string;
11 |     redirect?: boolean;
12 |     referer?: string;
13 | }
14 | 


--------------------------------------------------------------------------------
/dist/react.cjs.development.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | Object.defineProperty(exports, '__esModule', { value: true })
  4 | 
  5 | var react = require('react')
  6 | 
  7 | var backgroundColor = '#262335'
  8 | var backgroundProperty = 'background-color: ' + backgroundColor
  9 | var yellow = '#FEDE5D'
 10 | var pink = '#D86FD4'
 11 | var orange = '#F88839'
 12 | var gray = '#E2E1E5'
 13 | var grayDarker = '#B3AEAE'
 14 | var turquoise = '#36F5F3'
 15 | var lightBlue = '#84C9F4'
 16 | function errorHandler(err) {
 17 | 	console.group('%c 🚨 Formcarry Error 🚨', 'background: #E44141; color: #fff')
 18 | 	console.table(err)
 19 | 	console.log(
 20 | 		'%cif you want to disable debugging, just set debug to false like:',
 21 | 		'color: #11C759',
 22 | 	)
 23 | 	console.log(
 24 | 		'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cdebug%c: %cfalse %c}%c);',
 25 | 		backgroundProperty + '; color: ' + yellow,
 26 | 		backgroundProperty + '; color: ' + pink,
 27 | 		backgroundProperty + '; color: ' + gray,
 28 | 		backgroundProperty + '; color: ' + turquoise,
 29 | 		backgroundProperty + '; color: ' + pink,
 30 | 		backgroundProperty + '; color: ' + turquoise,
 31 | 		backgroundProperty + '; color: ' + yellow,
 32 | 		backgroundProperty + '; color: ' + grayDarker,
 33 | 		backgroundProperty + '; color: ' + orange,
 34 | 		backgroundProperty + '; color: ' + lightBlue,
 35 | 		backgroundProperty + '; color: ' + pink,
 36 | 	)
 37 | 	console.groupEnd()
 38 | }
 39 | function noIdHandler() {
 40 | 	console.log(
 41 | 		'%c💥 Please set your form ID, you can get it from your dashboard: https://formcarry.com/profile/my-forms',
 42 | 		'background-color: #FCB56D; color: #000',
 43 | 	)
 44 | 	console.log(
 45 | 		'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cid%c: %c"Your Form ID" %c}%c);',
 46 | 		backgroundProperty + '; color: ' + yellow,
 47 | 		backgroundProperty + '; color: ' + pink,
 48 | 		backgroundProperty + '; color: ' + gray,
 49 | 		backgroundProperty + '; color: ' + turquoise,
 50 | 		backgroundProperty + '; color: ' + pink,
 51 | 		backgroundProperty + '; color: ' + turquoise,
 52 | 		backgroundProperty + '; color: ' + yellow,
 53 | 		backgroundProperty + '; color: ' + grayDarker,
 54 | 		backgroundProperty + '; color: ' + orange,
 55 | 		backgroundProperty + '; color: ' + lightBlue,
 56 | 		backgroundProperty + '; color: ' + pink,
 57 | 	)
 58 | }
 59 | 
 60 | function useForm(props) {
 61 | 	var id = props.id,
 62 | 		_props$debug = props.debug,
 63 | 		debug = _props$debug === void 0 ? true : _props$debug,
 64 | 		extraData = props.extraData
 65 | 	var _useState = react.useState(false),
 66 | 		submitted = _useState[0],
 67 | 		setSubmitted = _useState[1]
 68 | 	var _useState2 = react.useState(false),
 69 | 		submitting = _useState2[0],
 70 | 		setSubmitting = _useState2[1]
 71 | 	var _useState3 = react.useState(undefined),
 72 | 		error = _useState3[0],
 73 | 		setError = _useState3[1]
 74 | 	var _useState4 = react.useState(),
 75 | 		response = _useState4[0],
 76 | 		setResponse = _useState4[1]
 77 | 	react.useEffect(
 78 | 		function() {
 79 | 			if (error && debug) {
 80 | 				errorHandler(error)
 81 | 			}
 82 | 		},
 83 | 		[debug, error],
 84 | 	)
 85 | 	function submit(event) {
 86 | 		event.preventDefault()
 87 | 		if (!id) {
 88 | 			noIdHandler()
 89 | 			return
 90 | 		}
 91 | 		var data = new FormData(event.currentTarget)
 92 | 		if (typeof extraData === 'object') {
 93 | 			for (var item in extraData) {
 94 | 				if (extraData.hasOwnProperty(item)) {
 95 | 					data.append(item, extraData[item])
 96 | 				}
 97 | 			}
 98 | 		}
 99 | 		setSubmitted(false)
100 | 		setError(undefined)
101 | 		setResponse(undefined)
102 | 		setSubmitting(true)
103 | 		fetch('https://formcarry.com/s/' + id, {
104 | 			method: 'POST',
105 | 			headers: {
106 | 				Accept: 'application/json',
107 | 			},
108 | 			body: data,
109 | 		})
110 | 			.then(function(res) {
111 | 				return res.json()
112 | 			})
113 | 			.then(function(res) {
114 | 				if (res.code === 200) {
115 | 					setSubmitted(true)
116 | 					setResponse(res)
117 | 				} else {
118 | 					setError(res)
119 | 				}
120 | 			})
121 | 			['catch'](function(err) {
122 | 				setError(err)
123 | 			})
124 | 			['finally'](function() {
125 | 				setSubmitting(false)
126 | 			})
127 | 	}
128 | 	return {
129 | 		state: {
130 | 			error: error,
131 | 			response: response,
132 | 			submitting: submitting,
133 | 			submitted: submitted,
134 | 		},
135 | 		submit: submit,
136 | 	}
137 | }
138 | 
139 | exports.useForm = useForm
140 | //# sourceMappingURL=react.cjs.development.js.map
141 | 


--------------------------------------------------------------------------------
/dist/react.cjs.development.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"react.cjs.development.js","sources":["../src/lib/handler.ts","../src/index.ts"],"sourcesContent":["import { FormcarryResponse } from './types'\n\nconst backgroundColor = '#262335'\nconst backgroundProperty = `background-color: ${backgroundColor}`\nconst yellow = '#FEDE5D'\nconst pink = '#D86FD4'\nconst orange = '#F88839'\nconst gray = '#E2E1E5'\nconst grayDarker = '#B3AEAE'\nconst turquoise = '#36F5F3'\nconst lightBlue = '#84C9F4'\n\nexport function errorHandler(err: FormcarryResponse) {\n\tconsole.group('%c 🚨 Formcarry Error 🚨', 'background: #E44141; color: #fff')\n\tconsole.table(err)\n\tconsole.log(\n\t\t`%cif you want to disable debugging, just set debug to false like:`,\n\t\t'color: #11C759',\n\t)\n\tconsole.log(\n\t\t'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cdebug%c: %cfalse %c}%c);',\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${gray}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${grayDarker}`,\n\t\t`${backgroundProperty}; color: ${orange}`,\n\t\t`${backgroundProperty}; color: ${lightBlue}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t)\n\tconsole.groupEnd()\n}\n\nexport function noIdHandler() {\n\tconsole.log(\n\t\t'%c💥 Please set your form ID, you can get it from your dashboard: https://formcarry.com/profile/my-forms',\n\t\t'background-color: #FCB56D; color: #000',\n\t)\n\tconsole.log(\n\t\t'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cid%c: %c\"Your Form ID\" %c}%c);',\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${gray}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${grayDarker}`,\n\t\t`${backgroundProperty}; color: ${orange}`,\n\t\t`${backgroundProperty}; color: ${lightBlue}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t)\n}\n","import React, { useState, useEffect } from 'react'\nimport { Props, FormcarryResponse } from './lib/types'\nimport { errorHandler, noIdHandler } from './lib/handler'\n\nfunction useForm(props: Props) {\n\tconst { id, debug = true, extraData } = props\n\tconst [submitted, setSubmitted] = useState<boolean>(false)\n\tconst [submitting, setSubmitting] = useState<boolean>(false)\n\tconst [error, setError] = useState<any>(undefined)\n\tconst [response, setResponse] = useState<FormcarryResponse>()\n\n\tuseEffect(() => {\n\t\tif (error && debug) {\n\t\t\terrorHandler(error)\n\t\t}\n\t}, [debug, error])\n\n\tfunction submit(event: React.FormEvent<HTMLFormElement>) {\n\t\t// prevent redirection\n\t\tevent.preventDefault()\n\n\t\tif (!id) {\n\t\t\tnoIdHandler()\n\t\t\treturn\n\t\t}\n\n\t\tconst data = new FormData(event.currentTarget)\n\n\t\tif (typeof extraData === 'object') {\n\t\t\tfor (const item in extraData) {\n\t\t\t\tif (extraData.hasOwnProperty(item)) {\n\t\t\t\t\tdata.append(item, extraData[item])\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// reset states.\n\t\tsetSubmitted(false)\n\t\tsetError(undefined)\n\t\tsetResponse(undefined)\n\n\t\tsetSubmitting(true)\n\n\t\tfetch(`https://formcarry.com/s/${id}`, {\n\t\t\tmethod: 'POST',\n\t\t\theaders: { Accept: 'application/json' },\n\t\t\tbody: data,\n\t\t})\n\t\t\t.then(res => res.json())\n\t\t\t.then((res: FormcarryResponse) => {\n\t\t\t\tif (res.code === 200) {\n\t\t\t\t\tsetSubmitted(true)\n\t\t\t\t\tsetResponse(res)\n\t\t\t\t} else {\n\t\t\t\t\tsetError(res)\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(err => {\n\t\t\t\tsetError(err)\n\t\t\t})\n\t\t\t.finally(() => {\n\t\t\t\tsetSubmitting(false)\n\t\t\t})\n\t}\n\n\treturn { state: { error, response, submitting, submitted }, submit }\n}\n\nexport { useForm }\n"],"names":["backgroundColor","backgroundProperty","yellow","pink","orange","gray","grayDarker","turquoise","lightBlue","errorHandler","err","console","group","table","log","groupEnd","noIdHandler","useForm","props","id","debug","extraData","useState","submitted","setSubmitted","submitting","setSubmitting","undefined","error","setError","response","setResponse","useEffect","submit","event","preventDefault","data","FormData","currentTarget","item","hasOwnProperty","append","fetch","method","headers","Accept","body","then","res","json","code","state"],"mappings":"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"}


--------------------------------------------------------------------------------
/dist/react.cjs.production.min.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | Object.defineProperty(exports, '__esModule', { value: !0 })
  3 | var o = require('react'),
  4 | 	c = 'background-color: #262335',
  5 | 	r = '#D86FD4'
  6 | exports.useForm = function(e) {
  7 | 	var t = e.id,
  8 | 		l = e.debug,
  9 | 		n = void 0 === l || l,
 10 | 		s = e.extraData,
 11 | 		u = o.useState(!1),
 12 | 		a = u[0],
 13 | 		i = u[1],
 14 | 		f = o.useState(!1),
 15 | 		d = f[0],
 16 | 		F = f[1],
 17 | 		E = o.useState(void 0),
 18 | 		m = E[0],
 19 | 		b = E[1],
 20 | 		g = o.useState(),
 21 | 		p = g[0],
 22 | 		D = g[1]
 23 | 	return (
 24 | 		o.useEffect(
 25 | 			function() {
 26 | 				var o
 27 | 				m &&
 28 | 					n &&
 29 | 					((o = m),
 30 | 					console.group(
 31 | 						'%c 🚨 Formcarry Error 🚨',
 32 | 						'background: #E44141; color: #fff',
 33 | 					),
 34 | 					console.table(o),
 35 | 					console.log(
 36 | 						'%cif you want to disable debugging, just set debug to false like:',
 37 | 						'color: #11C759',
 38 | 					),
 39 | 					console.log(
 40 | 						'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cdebug%c: %cfalse %c}%c);',
 41 | 						c + '; color: #FEDE5D',
 42 | 						c + '; color: ' + r,
 43 | 						c + '; color: #E2E1E5',
 44 | 						c + '; color: #36F5F3',
 45 | 						c + '; color: ' + r,
 46 | 						c + '; color: #36F5F3',
 47 | 						c + '; color: #FEDE5D',
 48 | 						c + '; color: #B3AEAE',
 49 | 						c + '; color: #F88839',
 50 | 						c + '; color: #84C9F4',
 51 | 						c + '; color: ' + r,
 52 | 					),
 53 | 					console.groupEnd())
 54 | 			},
 55 | 			[n, m],
 56 | 		),
 57 | 		{
 58 | 			state: { error: m, response: p, submitting: d, submitted: a },
 59 | 			submit: function(o) {
 60 | 				if ((o.preventDefault(), !t))
 61 | 					return (
 62 | 						console.log(
 63 | 							'%c💥 Please set your form ID, you can get it from your dashboard: https://formcarry.com/profile/my-forms',
 64 | 							'background-color: #FCB56D; color: #000',
 65 | 						),
 66 | 						void console.log(
 67 | 							'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cid%c: %c"Your Form ID" %c}%c);',
 68 | 							c + '; color: #FEDE5D',
 69 | 							c + '; color: ' + r,
 70 | 							c + '; color: #E2E1E5',
 71 | 							c + '; color: #36F5F3',
 72 | 							c + '; color: ' + r,
 73 | 							c + '; color: #36F5F3',
 74 | 							c + '; color: #FEDE5D',
 75 | 							c + '; color: #B3AEAE',
 76 | 							c + '; color: #F88839',
 77 | 							c + '; color: #84C9F4',
 78 | 							c + '; color: ' + r,
 79 | 						)
 80 | 					)
 81 | 				var e = new FormData(o.currentTarget)
 82 | 				if ('object' == typeof s)
 83 | 					for (var l in s) s.hasOwnProperty(l) && e.append(l, s[l])
 84 | 				i(!1),
 85 | 					b(void 0),
 86 | 					D(void 0),
 87 | 					F(!0),
 88 | 					fetch('https://formcarry.com/s/' + t, {
 89 | 						method: 'POST',
 90 | 						headers: { Accept: 'application/json' },
 91 | 						body: e,
 92 | 					})
 93 | 						.then(function(o) {
 94 | 							return o.json()
 95 | 						})
 96 | 						.then(function(o) {
 97 | 							200 === o.code ? (i(!0), D(o)) : b(o)
 98 | 						})
 99 | 						.catch(function(o) {
100 | 							b(o)
101 | 						})
102 | 						.finally(function() {
103 | 							F(!1)
104 | 						})
105 | 			},
106 | 		}
107 | 	)
108 | }
109 | //# sourceMappingURL=react.cjs.production.min.js.map
110 | 


--------------------------------------------------------------------------------
/dist/react.cjs.production.min.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"react.cjs.production.min.js","sources":["../src/lib/handler.ts","../src/index.ts"],"sourcesContent":["import { FormcarryResponse } from './types'\n\nconst backgroundColor = '#262335'\nconst backgroundProperty = `background-color: ${backgroundColor}`\nconst yellow = '#FEDE5D'\nconst pink = '#D86FD4'\nconst orange = '#F88839'\nconst gray = '#E2E1E5'\nconst grayDarker = '#B3AEAE'\nconst turquoise = '#36F5F3'\nconst lightBlue = '#84C9F4'\n\nexport function errorHandler(err: FormcarryResponse) {\n\tconsole.group('%c 🚨 Formcarry Error 🚨', 'background: #E44141; color: #fff')\n\tconsole.table(err)\n\tconsole.log(\n\t\t`%cif you want to disable debugging, just set debug to false like:`,\n\t\t'color: #11C759',\n\t)\n\tconsole.log(\n\t\t'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cdebug%c: %cfalse %c}%c);',\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${gray}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${grayDarker}`,\n\t\t`${backgroundProperty}; color: ${orange}`,\n\t\t`${backgroundProperty}; color: ${lightBlue}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t)\n\tconsole.groupEnd()\n}\n\nexport function noIdHandler() {\n\tconsole.log(\n\t\t'%c💥 Please set your form ID, you can get it from your dashboard: https://formcarry.com/profile/my-forms',\n\t\t'background-color: #FCB56D; color: #000',\n\t)\n\tconsole.log(\n\t\t'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cid%c: %c\"Your Form ID\" %c}%c);',\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${gray}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${grayDarker}`,\n\t\t`${backgroundProperty}; color: ${orange}`,\n\t\t`${backgroundProperty}; color: ${lightBlue}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t)\n}\n","import React, { useState, useEffect } from 'react'\nimport { Props, FormcarryResponse } from './lib/types'\nimport { errorHandler, noIdHandler } from './lib/handler'\n\nfunction useForm(props: Props) {\n\tconst { id, debug = true, extraData } = props\n\tconst [submitted, setSubmitted] = useState<boolean>(false)\n\tconst [submitting, setSubmitting] = useState<boolean>(false)\n\tconst [error, setError] = useState<any>(undefined)\n\tconst [response, setResponse] = useState<FormcarryResponse>()\n\n\tuseEffect(() => {\n\t\tif (error && debug) {\n\t\t\terrorHandler(error)\n\t\t}\n\t}, [debug, error])\n\n\tfunction submit(event: React.FormEvent<HTMLFormElement>) {\n\t\t// prevent redirection\n\t\tevent.preventDefault()\n\n\t\tif (!id) {\n\t\t\tnoIdHandler()\n\t\t\treturn\n\t\t}\n\n\t\tconst data = new FormData(event.currentTarget)\n\n\t\tif (typeof extraData === 'object') {\n\t\t\tfor (const item in extraData) {\n\t\t\t\tif (extraData.hasOwnProperty(item)) {\n\t\t\t\t\tdata.append(item, extraData[item])\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// reset states.\n\t\tsetSubmitted(false)\n\t\tsetError(undefined)\n\t\tsetResponse(undefined)\n\n\t\tsetSubmitting(true)\n\n\t\tfetch(`https://formcarry.com/s/${id}`, {\n\t\t\tmethod: 'POST',\n\t\t\theaders: { Accept: 'application/json' },\n\t\t\tbody: data,\n\t\t})\n\t\t\t.then(res => res.json())\n\t\t\t.then((res: FormcarryResponse) => {\n\t\t\t\tif (res.code === 200) {\n\t\t\t\t\tsetSubmitted(true)\n\t\t\t\t\tsetResponse(res)\n\t\t\t\t} else {\n\t\t\t\t\tsetError(res)\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(err => {\n\t\t\t\tsetError(err)\n\t\t\t})\n\t\t\t.finally(() => {\n\t\t\t\tsetSubmitting(false)\n\t\t\t})\n\t}\n\n\treturn { state: { error, response, submitting, submitted }, submit }\n}\n\nexport { useForm }\n"],"names":["backgroundProperty","pink","props","id","_props$debug","debug","extraData","useState","submitted","setSubmitted","submitting","setSubmitting","undefined","error","setError","response","setResponse","useEffect","err","console","group","table","log","groupEnd","state","submit","event","preventDefault","data","FormData","currentTarget","item","hasOwnProperty","append","fetch","method","headers","Accept","body","then","res","json","code"],"mappings":"2FAGMA,8BAEAC,EAAO,0BCDb,SAAiBC,GAChB,IAAQC,EAAgCD,EAAhCC,GAAEC,EAA8BF,EAA5BG,MAAAA,gBAAcC,EAAcJ,EAAdI,YACQC,YAAkB,GAA7CC,OAAWC,SACkBF,YAAkB,GAA/CG,OAAYC,SACOJ,gBAAcK,GAAjCC,OAAOC,SACkBP,aAAzBQ,OAAUC,OAwDjB,OAtDAC,aAAU,eDCkBC,ECAvBL,GAASR,IDAca,ECCbL,EDAfM,QAAQC,MAAM,2BAA4B,oCAC1CD,QAAQE,MAAMH,GACdC,QAAQG,wEAEP,kBAEDH,QAAQG,IACP,2EACGtB,EAAAA,mBACAA,cAA8BC,EAC9BD,EAAAA,mBACAA,EAAAA,mBACAA,cAA8BC,EAC9BD,EAAAA,mBACAA,EAAAA,mBACAA,EAAAA,mBACAA,EAAAA,mBACAA,EAAAA,mBACAA,cAA8BC,GAElCkB,QAAQI,cClBL,CAAClB,EAAOQ,IAkDJ,CAAEW,MAAO,CAAEX,MAAAA,EAAOE,SAAAA,EAAUL,WAAAA,EAAYF,UAAAA,GAAaiB,OAhD5D,SAAgBC,GAIf,GAFAA,EAAMC,kBAEDxB,EAEJ,ODcFgB,QAAQG,IACP,2GACA,+CAEDH,QAAQG,IACP,iFACGtB,EAAAA,mBACAA,cAA8BC,EAC9BD,EAAAA,mBACAA,EAAAA,mBACAA,cAA8BC,EAC9BD,EAAAA,mBACAA,EAAAA,mBACAA,EAAAA,mBACAA,EAAAA,mBACAA,EAAAA,mBACAA,cAA8BC,GC3BjC,IAAM2B,EAAO,IAAIC,SAASH,EAAMI,eAEhC,GAAyB,iBAAdxB,EACV,IAAK,IAAMyB,KAAQzB,EACdA,EAAU0B,eAAeD,IAC5BH,EAAKK,OAAOF,EAAMzB,EAAUyB,IAM/BtB,GAAa,GACbK,OAASF,GACTI,OAAYJ,GAEZD,GAAc,GAEduB,iCAAiC/B,EAAM,CACtCgC,OAAQ,OACRC,QAAS,CAAEC,OAAQ,oBACnBC,KAAMV,IAELW,MAAK,SAAAC,GAAG,OAAIA,EAAIC,UAChBF,MAAK,SAACC,GACW,MAAbA,EAAIE,MACPjC,GAAa,GACbO,EAAYwB,IAEZ1B,EAAS0B,aAGJ,SAAAtB,GACNJ,EAASI,eAED,WACRP,GAAc"}


--------------------------------------------------------------------------------
/dist/react.esm.js:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react'
  2 | 
  3 | var backgroundColor = '#262335'
  4 | var backgroundProperty = 'background-color: ' + backgroundColor
  5 | var yellow = '#FEDE5D'
  6 | var pink = '#D86FD4'
  7 | var orange = '#F88839'
  8 | var gray = '#E2E1E5'
  9 | var grayDarker = '#B3AEAE'
 10 | var turquoise = '#36F5F3'
 11 | var lightBlue = '#84C9F4'
 12 | function errorHandler(err) {
 13 | 	console.group('%c 🚨 Formcarry Error 🚨', 'background: #E44141; color: #fff')
 14 | 	console.table(err)
 15 | 	console.log(
 16 | 		'%cif you want to disable debugging, just set debug to false like:',
 17 | 		'color: #11C759',
 18 | 	)
 19 | 	console.log(
 20 | 		'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cdebug%c: %cfalse %c}%c);',
 21 | 		backgroundProperty + '; color: ' + yellow,
 22 | 		backgroundProperty + '; color: ' + pink,
 23 | 		backgroundProperty + '; color: ' + gray,
 24 | 		backgroundProperty + '; color: ' + turquoise,
 25 | 		backgroundProperty + '; color: ' + pink,
 26 | 		backgroundProperty + '; color: ' + turquoise,
 27 | 		backgroundProperty + '; color: ' + yellow,
 28 | 		backgroundProperty + '; color: ' + grayDarker,
 29 | 		backgroundProperty + '; color: ' + orange,
 30 | 		backgroundProperty + '; color: ' + lightBlue,
 31 | 		backgroundProperty + '; color: ' + pink,
 32 | 	)
 33 | 	console.groupEnd()
 34 | }
 35 | function noIdHandler() {
 36 | 	console.log(
 37 | 		'%c💥 Please set your form ID, you can get it from your dashboard: https://formcarry.com/profile/my-forms',
 38 | 		'background-color: #FCB56D; color: #000',
 39 | 	)
 40 | 	console.log(
 41 | 		'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cid%c: %c"Your Form ID" %c}%c);',
 42 | 		backgroundProperty + '; color: ' + yellow,
 43 | 		backgroundProperty + '; color: ' + pink,
 44 | 		backgroundProperty + '; color: ' + gray,
 45 | 		backgroundProperty + '; color: ' + turquoise,
 46 | 		backgroundProperty + '; color: ' + pink,
 47 | 		backgroundProperty + '; color: ' + turquoise,
 48 | 		backgroundProperty + '; color: ' + yellow,
 49 | 		backgroundProperty + '; color: ' + grayDarker,
 50 | 		backgroundProperty + '; color: ' + orange,
 51 | 		backgroundProperty + '; color: ' + lightBlue,
 52 | 		backgroundProperty + '; color: ' + pink,
 53 | 	)
 54 | }
 55 | 
 56 | function useForm(props) {
 57 | 	var id = props.id,
 58 | 		_props$debug = props.debug,
 59 | 		debug = _props$debug === void 0 ? true : _props$debug,
 60 | 		extraData = props.extraData
 61 | 	var _useState = useState(false),
 62 | 		submitted = _useState[0],
 63 | 		setSubmitted = _useState[1]
 64 | 	var _useState2 = useState(false),
 65 | 		submitting = _useState2[0],
 66 | 		setSubmitting = _useState2[1]
 67 | 	var _useState3 = useState(undefined),
 68 | 		error = _useState3[0],
 69 | 		setError = _useState3[1]
 70 | 	var _useState4 = useState(),
 71 | 		response = _useState4[0],
 72 | 		setResponse = _useState4[1]
 73 | 	useEffect(
 74 | 		function() {
 75 | 			if (error && debug) {
 76 | 				errorHandler(error)
 77 | 			}
 78 | 		},
 79 | 		[debug, error],
 80 | 	)
 81 | 	function submit(event) {
 82 | 		event.preventDefault()
 83 | 		if (!id) {
 84 | 			noIdHandler()
 85 | 			return
 86 | 		}
 87 | 		var data = new FormData(event.currentTarget)
 88 | 		if (typeof extraData === 'object') {
 89 | 			for (var item in extraData) {
 90 | 				if (extraData.hasOwnProperty(item)) {
 91 | 					data.append(item, extraData[item])
 92 | 				}
 93 | 			}
 94 | 		}
 95 | 		setSubmitted(false)
 96 | 		setError(undefined)
 97 | 		setResponse(undefined)
 98 | 		setSubmitting(true)
 99 | 		fetch('https://formcarry.com/s/' + id, {
100 | 			method: 'POST',
101 | 			headers: {
102 | 				Accept: 'application/json',
103 | 			},
104 | 			body: data,
105 | 		})
106 | 			.then(function(res) {
107 | 				return res.json()
108 | 			})
109 | 			.then(function(res) {
110 | 				if (res.code === 200) {
111 | 					setSubmitted(true)
112 | 					setResponse(res)
113 | 				} else {
114 | 					setError(res)
115 | 				}
116 | 			})
117 | 			['catch'](function(err) {
118 | 				setError(err)
119 | 			})
120 | 			['finally'](function() {
121 | 				setSubmitting(false)
122 | 			})
123 | 	}
124 | 	return {
125 | 		state: {
126 | 			error: error,
127 | 			response: response,
128 | 			submitting: submitting,
129 | 			submitted: submitted,
130 | 		},
131 | 		submit: submit,
132 | 	}
133 | }
134 | 
135 | export { useForm }
136 | //# sourceMappingURL=react.esm.js.map
137 | 


--------------------------------------------------------------------------------
/dist/react.esm.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"react.esm.js","sources":["../src/lib/handler.ts","../src/index.ts"],"sourcesContent":["import { FormcarryResponse } from './types'\n\nconst backgroundColor = '#262335'\nconst backgroundProperty = `background-color: ${backgroundColor}`\nconst yellow = '#FEDE5D'\nconst pink = '#D86FD4'\nconst orange = '#F88839'\nconst gray = '#E2E1E5'\nconst grayDarker = '#B3AEAE'\nconst turquoise = '#36F5F3'\nconst lightBlue = '#84C9F4'\n\nexport function errorHandler(err: FormcarryResponse) {\n\tconsole.group('%c 🚨 Formcarry Error 🚨', 'background: #E44141; color: #fff')\n\tconsole.table(err)\n\tconsole.log(\n\t\t`%cif you want to disable debugging, just set debug to false like:`,\n\t\t'color: #11C759',\n\t)\n\tconsole.log(\n\t\t'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cdebug%c: %cfalse %c}%c);',\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${gray}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${grayDarker}`,\n\t\t`${backgroundProperty}; color: ${orange}`,\n\t\t`${backgroundProperty}; color: ${lightBlue}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t)\n\tconsole.groupEnd()\n}\n\nexport function noIdHandler() {\n\tconsole.log(\n\t\t'%c💥 Please set your form ID, you can get it from your dashboard: https://formcarry.com/profile/my-forms',\n\t\t'background-color: #FCB56D; color: #000',\n\t)\n\tconsole.log(\n\t\t'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cid%c: %c\"Your Form ID\" %c}%c);',\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${gray}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t\t`${backgroundProperty}; color: ${turquoise}`,\n\t\t`${backgroundProperty}; color: ${yellow}`,\n\t\t`${backgroundProperty}; color: ${grayDarker}`,\n\t\t`${backgroundProperty}; color: ${orange}`,\n\t\t`${backgroundProperty}; color: ${lightBlue}`,\n\t\t`${backgroundProperty}; color: ${pink}`,\n\t)\n}\n","import React, { useState, useEffect } from 'react'\nimport { Props, FormcarryResponse } from './lib/types'\nimport { errorHandler, noIdHandler } from './lib/handler'\n\nfunction useForm(props: Props) {\n\tconst { id, debug = true, extraData } = props\n\tconst [submitted, setSubmitted] = useState<boolean>(false)\n\tconst [submitting, setSubmitting] = useState<boolean>(false)\n\tconst [error, setError] = useState<any>(undefined)\n\tconst [response, setResponse] = useState<FormcarryResponse>()\n\n\tuseEffect(() => {\n\t\tif (error && debug) {\n\t\t\terrorHandler(error)\n\t\t}\n\t}, [debug, error])\n\n\tfunction submit(event: React.FormEvent<HTMLFormElement>) {\n\t\t// prevent redirection\n\t\tevent.preventDefault()\n\n\t\tif (!id) {\n\t\t\tnoIdHandler()\n\t\t\treturn\n\t\t}\n\n\t\tconst data = new FormData(event.currentTarget)\n\n\t\tif (typeof extraData === 'object') {\n\t\t\tfor (const item in extraData) {\n\t\t\t\tif (extraData.hasOwnProperty(item)) {\n\t\t\t\t\tdata.append(item, extraData[item])\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// reset states.\n\t\tsetSubmitted(false)\n\t\tsetError(undefined)\n\t\tsetResponse(undefined)\n\n\t\tsetSubmitting(true)\n\n\t\tfetch(`https://formcarry.com/s/${id}`, {\n\t\t\tmethod: 'POST',\n\t\t\theaders: { Accept: 'application/json' },\n\t\t\tbody: data,\n\t\t})\n\t\t\t.then(res => res.json())\n\t\t\t.then((res: FormcarryResponse) => {\n\t\t\t\tif (res.code === 200) {\n\t\t\t\t\tsetSubmitted(true)\n\t\t\t\t\tsetResponse(res)\n\t\t\t\t} else {\n\t\t\t\t\tsetError(res)\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(err => {\n\t\t\t\tsetError(err)\n\t\t\t})\n\t\t\t.finally(() => {\n\t\t\t\tsetSubmitting(false)\n\t\t\t})\n\t}\n\n\treturn { state: { error, response, submitting, submitted }, submit }\n}\n\nexport { useForm }\n"],"names":["backgroundColor","backgroundProperty","yellow","pink","orange","gray","grayDarker","turquoise","lightBlue","errorHandler","err","console","group","table","log","groupEnd","noIdHandler","useForm","props","id","debug","extraData","useState","submitted","setSubmitted","submitting","setSubmitting","undefined","error","setError","response","setResponse","useEffect","submit","event","preventDefault","data","FormData","currentTarget","item","hasOwnProperty","append","fetch","method","headers","Accept","body","then","res","json","code","state"],"mappings":"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"}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "@formcarry/react",
 3 | 	"version": "1.0.4",
 4 | 	"description": "React Hooks library for Formcarry | formcarry.com",
 5 | 	"main": "dist/index.js",
 6 | 	"types": "dist/index.d.ts",
 7 | 	"module": "dist/react.esm.js",
 8 | 	"scripts": {
 9 | 		"build": "tsdx build",
10 | 		"fmt": "prettier --write './**/*.{js,jsx,ts,tsx,css,scss,md,json,yml}'",
11 | 		"lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}' --fix --format verbose --project tsconfig.json"
12 | 	},
13 | 	"bugs": {
14 | 		"url": "https://github.com/formcarry/formcarry-react/issues"
15 | 	},
16 | 	"repository": {
17 | 		"type": "git",
18 | 		"url": "https://github.com/formcarry/formcarry-react.git"
19 | 	},
20 | 	"license": "MIT",
21 | 	"keywords": [],
22 | 	"author": "Teijal Inc.",
23 | 	"eslintConfig": {
24 | 		"extends": "react-app"
25 | 	},
26 | 	"prettier": {
27 | 		"trailingComma": "all",
28 | 		"tabWidth": 2,
29 | 		"semi": false,
30 | 		"singleQuote": true,
31 | 		"useTabs": true,
32 | 		"arrowParens": "avoid"
33 | 	},
34 | 	"husky": {
35 | 		"hooks": {
36 | 			"pre-commit": "yarn build && lint-staged"
37 | 		}
38 | 	},
39 | 	"lint-staged": {
40 | 		"src/**/*.{ts,tsx}": [
41 | 			"tslint -c tslint.json --fix --format verbose --project tsconfig.json",
42 | 			"prettier --write",
43 | 			"git add"
44 | 		],
45 | 		"src/*.{ts,tsx}": [
46 | 			"tslint -c tslint.json --fix --format verbose --project tsconfig.json",
47 | 			"prettier --write",
48 | 			"git add"
49 | 		],
50 | 		"*.{js,jsx,ts,tsx,css,scss,md,json,yml}": [
51 | 			"prettier --write",
52 | 			"git add"
53 | 		]
54 | 	},
55 | 	"devDependencies": {
56 | 		"@types/node": "^12.0.0",
57 | 		"@types/react": "^16.9.0",
58 | 		"@types/react-dom": "^16.9.0",
59 | 		"husky": "^4.0.1",
60 | 		"lint-staged": "^9.5.0",
61 | 		"prettier": "^1.19.1",
62 | 		"tslib": "^1.10.0",
63 | 		"tslint": "^5.20.1",
64 | 		"tslint-config-prettier": "^1.18.0",
65 | 		"tslint-react": "^4.1.0",
66 | 		"typescript": "^3.7.4",
67 | 		"tsdx": "^0.14.1"
68 | 	},
69 | 	"peerDependencies": {
70 | 		"react": ">= 16.8.0",
71 | 		"react-dom": ">= 16.8.0"
72 | 	}
73 | }
74 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react'
 2 | import { Props, FormcarryResponse } from './lib/types'
 3 | import { errorHandler, noIdHandler } from './lib/handler'
 4 | 
 5 | function useForm(props: Props) {
 6 | 	const { id, debug = true, extraData } = props
 7 | 	const [submitted, setSubmitted] = useState<boolean>(false)
 8 | 	const [submitting, setSubmitting] = useState<boolean>(false)
 9 | 	const [error, setError] = useState<any>(undefined)
10 | 	const [response, setResponse] = useState<FormcarryResponse>()
11 | 
12 | 	useEffect(() => {
13 | 		if (error && debug) {
14 | 			errorHandler(error)
15 | 		}
16 | 	}, [debug, error])
17 | 
18 | 	function submit(event: React.FormEvent<HTMLFormElement>) {
19 | 		// prevent redirection
20 | 		event.preventDefault()
21 | 
22 | 		if (!id) {
23 | 			noIdHandler()
24 | 			return
25 | 		}
26 | 
27 | 		const data = new FormData(event.currentTarget)
28 | 
29 | 		if (typeof extraData === 'object') {
30 | 			for (const item in extraData) {
31 | 				if (extraData.hasOwnProperty(item)) {
32 | 					data.append(item, extraData[item])
33 | 				}
34 | 			}
35 | 		}
36 | 
37 | 		// reset states.
38 | 		setSubmitted(false)
39 | 		setError(undefined)
40 | 		setResponse(undefined)
41 | 
42 | 		setSubmitting(true)
43 | 
44 | 		fetch(`https://formcarry.com/s/${id}`, {
45 | 			method: 'POST',
46 | 			headers: { Accept: 'application/json' },
47 | 			body: data,
48 | 		})
49 | 			.then(res => res.json())
50 | 			.then((res: FormcarryResponse) => {
51 | 				if (res.code === 200) {
52 | 					setSubmitted(true)
53 | 					setResponse(res)
54 | 				} else {
55 | 					setError(res)
56 | 				}
57 | 			})
58 | 			.catch(err => {
59 | 				setError(err)
60 | 			})
61 | 			.finally(() => {
62 | 				setSubmitting(false)
63 | 			})
64 | 	}
65 | 
66 | 	return { state: { error, response, submitting, submitted }, submit }
67 | }
68 | 
69 | export { useForm }
70 | 


--------------------------------------------------------------------------------
/src/lib/handler.ts:
--------------------------------------------------------------------------------
 1 | import { FormcarryResponse } from './types'
 2 | 
 3 | const backgroundColor = '#262335'
 4 | const backgroundProperty = `background-color: ${backgroundColor}`
 5 | const yellow = '#FEDE5D'
 6 | const pink = '#D86FD4'
 7 | const orange = '#F88839'
 8 | const gray = '#E2E1E5'
 9 | const grayDarker = '#B3AEAE'
10 | const turquoise = '#36F5F3'
11 | const lightBlue = '#84C9F4'
12 | 
13 | export function errorHandler(err: FormcarryResponse) {
14 | 	console.group('%c 🚨 Formcarry Error 🚨', 'background: #E44141; color: #fff')
15 | 	console.table(err)
16 | 	console.log(
17 | 		`%cif you want to disable debugging, just set debug to false like:`,
18 | 		'color: #11C759',
19 | 	)
20 | 	console.log(
21 | 		'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cdebug%c: %cfalse %c}%c);',
22 | 		`${backgroundProperty}; color: ${yellow}`,
23 | 		`${backgroundProperty}; color: ${pink}`,
24 | 		`${backgroundProperty}; color: ${gray}`,
25 | 		`${backgroundProperty}; color: ${turquoise}`,
26 | 		`${backgroundProperty}; color: ${pink}`,
27 | 		`${backgroundProperty}; color: ${turquoise}`,
28 | 		`${backgroundProperty}; color: ${yellow}`,
29 | 		`${backgroundProperty}; color: ${grayDarker}`,
30 | 		`${backgroundProperty}; color: ${orange}`,
31 | 		`${backgroundProperty}; color: ${lightBlue}`,
32 | 		`${backgroundProperty}; color: ${pink}`,
33 | 	)
34 | 	console.groupEnd()
35 | }
36 | 
37 | export function noIdHandler() {
38 | 	console.log(
39 | 		'%c💥 Please set your form ID, you can get it from your dashboard: https://formcarry.com/profile/my-forms',
40 | 		'background-color: #FCB56D; color: #000',
41 | 	)
42 | 	console.log(
43 | 		'%cconst %c{state, submit} %c= %cuseForm%c(%c{ %cid%c: %c"Your Form ID" %c}%c);',
44 | 		`${backgroundProperty}; color: ${yellow}`,
45 | 		`${backgroundProperty}; color: ${pink}`,
46 | 		`${backgroundProperty}; color: ${gray}`,
47 | 		`${backgroundProperty}; color: ${turquoise}`,
48 | 		`${backgroundProperty}; color: ${pink}`,
49 | 		`${backgroundProperty}; color: ${turquoise}`,
50 | 		`${backgroundProperty}; color: ${yellow}`,
51 | 		`${backgroundProperty}; color: ${grayDarker}`,
52 | 		`${backgroundProperty}; color: ${orange}`,
53 | 		`${backgroundProperty}; color: ${lightBlue}`,
54 | 		`${backgroundProperty}; color: ${pink}`,
55 | 	)
56 | }
57 | 


--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
 1 | export interface Props {
 2 | 	id: string
 3 | 	debug?: boolean
 4 | 	extraData?: any
 5 | }
 6 | 
 7 | export interface FormcarryResponse {
 8 | 	code: number
 9 | 	status: string
10 | 	title: string
11 | 	message: string
12 | 	redirect?: boolean
13 | 	referer?: string
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	// see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
 3 | 	"include": ["src", "types"],
 4 | 	"compilerOptions": {
 5 | 		"module": "esnext",
 6 | 		"lib": ["dom", "esnext"],
 7 | 		"importHelpers": true,
 8 | 		// output .d.ts declaration files for consumers
 9 | 		"declaration": true,
10 | 		// output .js.map sourcemap files for consumers
11 | 		"sourceMap": true,
12 | 		// match output dir to input dir. e.g. dist/index instead of dist/src/index
13 | 		"rootDir": "./src",
14 | 		// stricter type-checking for stronger correctness. Recommended by TS
15 | 		"strict": true,
16 | 		// linter checks for common issues
17 | 		"noImplicitReturns": true,
18 | 		"noFallthroughCasesInSwitch": true,
19 | 		// noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
20 | 		"noUnusedParameters": true,
21 | 		// use Node's module resolution algorithm, instead of the legacy TS one
22 | 		"moduleResolution": "node",
23 | 		// transpile JSX to React.createElement
24 | 		"jsx": "react",
25 | 		// interop between ESM and CJS modules. Recommended by TS
26 | 		"esModuleInterop": true,
27 | 		// significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
28 | 		"skipLibCheck": true,
29 | 		// error out if import and file system have a casing mismatch. Recommended by TS
30 | 		"forceConsistentCasingInFileNames": true,
31 | 		// `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
32 | 		"noEmit": true,
33 | 		// remove comments.
34 | 		"removeComments": true
35 | 	}
36 | }
37 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"defaultSeverity": "error",
 3 | 	"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
 4 | 	"jsRules": {},
 5 | 	"rules": {
 6 | 		"no-unused-variable": [
 7 | 			true,
 8 | 			{
 9 | 				"ignore-pattern": "^_"
10 | 			}
11 | 		],
12 | 		"jsx-no-lambda": false,
13 | 		"jsx-boolean-value": false,
14 | 		"jsx-no-multiline-js": false,
15 | 		"indent": [true, "tabs", 2],
16 | 		"arrow-parens": [true, "ban-single-arg-parens"],
17 | 		"semicolon": [true, "never"],
18 | 		"trailing-comma": [
19 | 			true,
20 | 			{
21 | 				"multiline": {
22 | 					"objects": "always",
23 | 					"arrays": "always",
24 | 					"functions": "always",
25 | 					"typeLiterals": "ignore"
26 | 				},
27 | 				"singleline": "never",
28 | 				"esSpecCompliant": true
29 | 			}
30 | 		],
31 | 		"interface-name": [false],
32 | 		"no-console": [false],
33 | 		"quotemark": [true, "single", "jsx-double"],
34 | 		"ordered-imports": [
35 | 			true,
36 | 			{
37 | 				"import-sources-order": "any",
38 | 				"named-imports-order": "any"
39 | 			}
40 | 		],
41 | 		"object-literal-sort-keys": false,
42 | 		"eofline": false,
43 | 		"no-var-requires": false
44 | 	},
45 | 	"rulesDirectory": [],
46 | 	"linterOptions": {
47 | 		"exclude": ["src/generated/**/*"]
48 | 	}
49 | }
50 | 


--------------------------------------------------------------------------------