Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-google-forms-hooks
Advanced tools
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 💻 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
Library to create forms using React backed by Google Forms.
The npm package react-google-forms-hooks receives a total of 482 weekly downloads. As such, react-google-forms-hooks popularity was classified as not popular.
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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.