Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-google-forms-hooks

Package Overview
Dependencies
4
Maintainers
1
Versions
11
Issues
File Explorer

Advanced tools

react-google-forms-hooks

Library to create forms using React backed by Google Forms.

    1.2.4latest

Version published
Maintainers
1
Yearly downloads
5,336

Weekly downloads

Changelog

Source

1.2.4

What's Changed

  • Fix parsing of forms with special characters by @francisconeves97 in https://github.com/francisconeves97/react-google-forms-hooks/pull/26
  • docs: add DanielOrtel as a contributor for bug by @allcontributors in https://github.com/francisconeves97/react-google-forms-hooks/pull/27

Full Changelog: https://github.com/francisconeves97/react-google-forms-hooks/compare/1.2.3...1.2.4

Readme

Source

React Google Forms Hooks

All Contributors

Description

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.

Live demo

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.

Install

npm install --save react-google-forms-hooks

Usage

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.

Caveats

  • Right now there is no observability on errors when submitting a form. See this comment on the code.
  • You can use the submitToGoogleForm export to create a server to handle form submissions. This way you can mitigate the CORS problem.
  • No support for multi page, sections, images and other Google Forms functionalities. However you can build your React form with multiple pages, by saving the data from handleSubmit and only submitToGoogleForms on the last page.
  • The list of supported inputs doesn't feature every input from Google Forms. Supported inputs: Short Answer, Long Answer, Checkbox, Radio, Dropdown, Linear, Radio Grid, Checkbox Grid
  • Because of CORS you have to run the googleFormsToJson script in build time.

Contributing

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:

Credits

This library was largely inspired on the work done by @cybercase on the google-forms-html-exporter repo.

License

MIT © francisconeves97

Contributors ✨

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!

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc