Skip to content

GopherLabsLtd/react-eureka-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Eureka npm npm

A minimalistic form wizard component for React

See Demo

Installation

npm install --save react-eureka

How to Use:

import React, { Component } from 'react';

import { EurekaForm } from 'react-eureka';

class EurekaDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      current: -1,
      values: {},
      formSubmitted: false
    };
  }
  
  _onSubmit = () => this.setState({...this.state, formSubmitted: true})

  render() {
    const { formSubmitted, values } = this.state;

    return (
      <div>
        {!formSubmitted &&
          <EurekaForm autoFocus
            onSubmit={this._onSubmit}
            onUpdate={(state) => this.setState(state)}>
            <span type='name'>
              What's your name
            </span>

            <span type='email'>
              Hello <b>{values.name}</b>, and your email?
            </span>

            <span type='tel'>
              Phone Number?
            </span>
          </EurekaForm>
        }

        {formSubmitted &&
          <div className="submit-message">
            Thank you for your response!
          </div>
        }
      </div>
    );
  }
}

export default EurekaDemo;

Props

name type example
id string "my-custom-id"
className string "my-custom-class my-2nd-class"
questions array [{ key: "email", title: "What's your email?", inputType: "email" }, { key: "address", title: "Where do you live?", }]
autoFocus boolean true
onUpdate function (state) => this.setState(state);
onSubmit function ({values}) => console.log("Make API calls!");

onSubmit()

will get you back an object with your answers, if you gave keys to your questions (see below how to do that), they will be named, if not they will come back as eureka-question-${i}

there are 2 APIs you can use (you can actually use both, but we don't recomend it), in the questions API you pass your questions as a JSON object. in the React children API you pass the components you want to display as your questions.

questions API

const questions = [{
      key: "email", // how you want your answered to be named in the values object
      title: "What's your email?", // the text you want displayed
      inputType: "email" // this is pristinely passed as the HTML form type,
                         // used for validation and error messages
}, {
      key: "address",
      title: "Where do you live?"
}]
<EurekaForm questions={questions} onSubmit={doStuff}/>

React children API

Note: The type prop sets both the HTML form type and the key in the values object

<EurekaForm onSubmit={doStuff}>
      <span type='name'>
        What's your name
      </span>
      <span type='email'>
        Hello <b>{values.name}</b>, and your email?
      </span>
      <span type='tel'>
        Phone Number?
      </span>
</EurekaForm>

Credits

The implementation of the component is based on the work of Mary Lou from Tympanus

Logo is made by Patrick Morrison