
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
react-google-forms-hooks
Advanced tools
Library to create forms using React backed by Google Forms.
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!
FAQs
Library to create forms using React backed by Google Forms.
We found that react-google-forms-hooks demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.