react-google-forms-hooks
Advanced tools
Library to create forms using React backed by Google Forms.
Weekly downloads
Changelog
1.2.4
Full Changelog: https://github.com/francisconeves97/react-google-forms-hooks/compare/1.2.3...1.2.4
Readme
This library allows you to build a UI for your Google Forms using React. It provides a set of tools and hooks to give you a good experience while developing. It's build as a wrapper on top of react-hook-forms.
You can check an example form built using this library here: https://francisconeves97.github.io/react-google-forms-hooks/
You can also play around on the example on this CodeSandbox.
npm install --save react-google-forms-hooks
Use the googleFormsToJson
script to convert your google form into a json and save it into a file.
import { googleFormsToJson } from 'react-google-forms-hooks'
// can use both full and shortened form url
const result = await googleFormsToJson(
'https://docs.google.com/forms/d/e/1FAIpQLSe5U3qvg8WHs4nkU-e6h2RlAD7fKoCkou6HO2w2-tXYIA_F8g/viewform'
)
console.log(result.fields)
// will output the form fields in an appropriate structure
// [
// {
// label: 'Do you want to give some feedback?',
// type: 'LONG_ANSWER',
// id: '1864908950',
// required: false
// },
// ...
// ]
Pass the form object to the useGoogleForm
hook and wrap your form in a GoogleFormProvider
. Then you can build your custom components to render the form as beautiful as you like.
import { GoogleFormProvider, useGoogleForm, useShortAnswerInput } from 'react-google-forms-hooks'
import form from './form.json'
export default function ShortAnswerInput({ id }) {
const { register, label } = useShortAnswerInput(id)
return (
<div>
<p>{label}</p>
<input type='text' {...register()} />
</div>
)
}
const App = () => {
const methods = useGoogleForm({ form })
const onSubmit = async (data) => {
await methods.submitToGoogleForms(data)
}
return (
<GoogleFormProvider {...methods}>
<Form onSubmit={methods.handleSubmit(onSubmit)}>
<ShortAnswerInput id='1864908950' />
<button type='submit'>Submit</button>
</Form>
</GoogleFormProvider>
)
}
export default App
You can check a more complete example in the example folder.
submitToGoogleForm
export to create a server to handle form submissions. This way you can mitigate the CORS problem.data
from handleSubmit
and only submitToGoogleForms
on the last page.googleFormsToJson
script in build time.This library was born as a result of a side project I did and it is tailored towards my needs. If you have suggestions/improvements/ideas feel free to open issues or PRs. :rocket:
This library was largely inspired on the work done by @cybercase on the google-forms-html-exporter repo.
MIT © francisconeves97
Thanks goes to these wonderful people (emoji key):
Julián Gómez Sibecas 💻 | Dominic Garms 🤔 💻 | Kyle Philip Balisnomo 💻 🐛 | mikemajara 💻 🤔 | Daniel Ferenc Balogh 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!