Nuclear Package Magnet

    This package has been deprecated

    Author message:

    Package contains bugs that will not be fixed. Usage not recommended

    react-google-forms

    1.0.3 • Public • Published

    React with Google Forms (RGF)

    React component to use Google Forms in a React app.

    Table of Contents

    Description

    Google Forms is great free option for creating forms and for data collecting purposes. It can be used to make surveys, quizzes or event registration sheets. It can be shared by sending a link. However, if you want to use Google Forms on your React app, the default option is embedding it with an HTML <iframe> element which doesn't let you customize the form's style to better fit the style of your app.

    This React component gets your Google Form using Google Form Restyler based on the form's URL and turns it into a fully customizable HTML <form>.

    Live Example

    Coming soon..

    Usage

    Creating the Google Form

    1. Navigate to Google Forms and login with your Google account. If you don't have a Google account, create one here.
    2. Create a new Google Form. Although RGF supports different types of inputs, only use text type answers in the Google Form you create.

    Getting the Form URL

    1. On the edit view of your Google Form, click the "Send" button in the top right corner and select the "<>" icon.
    2. Take the src parameter out of the iframe element. This is the URL you will need later and should look something like this:

    https://docs.google.com/forms/d/e/..../viewform?embedded=true

    RGF Package Installation

    On the command line, cd to the root of your project and run:

    npm install react-google-forms

    Adding the RGF Component to Your App

    Import the component:

    import RGF from 'react-google-forms'

    Usa it like any normal React component:

    <RGF config={formConfig} />

    Congfiguring the Component

    You must provide a config object as a prop to the RGF component. The object can have the following properties:

    Key isRequired Type Description Default value
    formURL true String Url to your Google Form. See Getting the form URL. undefined
    loadingText false String(/JSX), Text or JSX (e.g. custom spinner) to render while getting the form from Google Forms. 'Loading'
    inputs true Array Array of Objects describing the inputs in your Google Form. See Configuring inputs. undefined
    submitButtonText false String Text to be shown in the Submit button. 'Submit'
    submitButtonAttributes false Object Any additional HTML to be assigned to the submit button undefined
    redirectURL true String URL where to redirect onSubmit undefined
    dev false Boolean Use development mode or production mode true
    attributes false Object Any additional HTML attributes to be assigned to the form element. undefined

    Configuring Inputs

    The config object requires an inputs array describing the answer fields in your Google Form. The array should contain an object for each Google Forms answer field.

    Key isRequired Type Description
    type true String Type of the input. Supported types: checkbox/radio/select/text/textarea.
    options See description Array Names/labels of the options. See Configuring input options. Required for checkbox/radio/select.
    attributes false Object Any additional HTML attributes to be assigned to the input element.

    Configuring Input Options

    The inputs array requires an options array describing the different options for certain input types. The array should contain an object for each option.

    Key isRequired Type Description Default value
    text true String Text to be shown next to radio/checkbox or in the select menu undefined
    labelPosition false String Position of the label for radio/checkbox. Either 'left' or 'right'. 'left'
    attributes false Object Any additional HTML attributes to be assigned to input options. undefined

    Contributing

    If you have encountered an error or have a suggestion on how to improve the code, please submit an issue.

    If you're able to make the changes by yourself, feel free to do so and submit a pull request.

    License

    Licensed under the MIT License.

    Install

    npm i react-google-forms

    DownloadsWeekly Downloads

    30

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    22.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • jnsjknn