react-hcard-builder

v2.2 updates

1. remove dependency on bootstrap
2. bugfixing for IE (forgot to add polyfill before)

Installation

npm install --save react-hcard-builder

Demo site

A Demo site is shipped in the source project, once downloaded the source file, you can run

cd example
npm install
npm start

Features

Basic Features

• Live review: As the form is filled out, the preview is automatically updated :white_check_mark:
• Submit callback: provide react-hcard-build a submit callback, and that callback will get invoke once all form infomration is captured and validated :white_check_mark:
• Image preview: pick and preview your own avatar, and the avatar file is passed back to your callback along with other form data :white_check_mark:
• Responsive: white_check_mark:
• Vendor prefixing via webpack autoprefix :white_check_mark:
  • Internet Explorer 10+ :white_check_mark:
  • Latest Chrome :white_check_mark:
  • Latest Firefox :white_check_mark:

Bonus Features

• Inspired by Redux-form, I decided to implement a decent form validation system in this project. If you are familiar with redux-form, the validation code should be familiar to you :white_check_mark:

How to run the project

I structured this project the same as redux-form. I also provide an example/demo project to show how to use it.

import HCardBuilder from 'react-hcard-builder'
import 'react-hcard-builder/dist/styles.css'

//build a onSubit callback, and pass it to react-hcard-builder. 
//The callback will get called once hCard information is captured and validated
const MyComponent = props=>{
    const onFormSubmit = formData => {
        alert(JSON.stringify(formData))
    }
    return <HCardBuilder onSubmit={onFormSubmit} />
}

TODO

• there is no unit test , which is obviously a problem. I just don't have time to finish it
• react-hcard-builder doesn't take in initial form values as parameters, which would be a nice feature to have