mohithg/react-typeform

Typeform/ Full Screen Form component for React

react-typeform

Description

Renders each component at a time with a next button, and when all components are traversed then all components are shown at once for review with a submit button.

Installation

npm install react-typeform --save

Setup for typeform

Component.jsx

<div>
  ...Your individual component here
</div>

Properties

children (Required)

The individual components to be shown one by one

onSubmit

Function that executes when submit button is clicked

submitBtnText

Text to be displayed for submit button Default: Submit

submitBtnClass

Classname for submit button

nextBtnText

Text to be displayed for next button Default: Next

nextBtnClass

Classname for next button

nextBtnOnClick

Function that executes when next button is clicked

backBtnText

Text to be displayed for back button Default: Back

backBtnClass

Classname for back button

backBtnOnClick

Function that executes when back button is clicked

showReviewView

Boolean that sets whether to show a review view as the final step Default: true

Example

import React from 'react';
import TypeForm from 'react-typeform';

class TypeFormComponent extends React.Component {

  submit() {
    // Call your submit function here
  }

  render() {
    return(
      {/** You can wrap this into your favourite form
        * But use the onSubmit function to call function that executes on click
        */}
      <TypeForm
        onSubmit={this.submit}
      >
        <Component1 />
        <Component2 />
        ...
      </TypeForm>
      );
  }
}

export default TypeFormComponent;

License

MIT

react-typeform's Issues

[React Native] Can this package work in React Native?

Does this package work in React Native?

Cannot read property 'element' of undefined

Hi!

I can't get this to work.
Keep getting this error just for importing the module:

Uncaught TypeError: Cannot read property 'element' of undefined.

app.js:

class FormSubscribe extends React.Component {
  constructor(props) {
    super(props);
  }

  /**
   * Handles form submition
   */
  submit(event) {
    ...
  }

  render() {
    return (
      <TypeForm onSubmit={this.submit}>
        <Input type="text" label="Nome" name="name" required/>
      </TypeForm>
    )
  }
}

component.js

export class Input extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div className="form-group">
        <label>{this.props.label} {this.props.required ? <span>*</span> : ''}</label>
        <input className="form-control" type={this.props.type} name={this.props.name} value={this.props.value} required={this.props.required}/>
      </div>
    )
  }
}

Where the prop tfStyle comes anyway?
If you can provided a full example it would be great!

Thanks!

Animation support

Could you please layout roadmap for animated flow ?

Definitely Typed

Does it have something like @types/react-Typeform?

back button support?

Hi,

Wondering if you'd consider supporting a native back button with all the support the next button has? It'd be really useful for these types of forms. I might have to fork and make one myself for now or create a PR sometime.

thanks!

Write tests for react-typeform

Need to write unit tests and functionality tests to ensure stability

Does not function as per example

Anyone else have luck?

I tried integrating it into an existing app and it wasn't functioning properly.