conjure-form v0.0.1

Conjure Forms

More Flexible Google Forms for React.js

Use Conjure Forms to add easy, flexible, and beautiful surveys to your React.js project. Conjure Forms are highly customizable and support features like conditional question rendering and arrays of questions. When a user is done filling out the form, you can grab their answers as a well defined JSON object.

How To Use

1. Install The NPM Package

1. Run npm install conjure-form to install the component to your project.

2. Import Conjure Form Into Your Component

Add the following import statements at the top of your React Component. 1. import ConjureFormController from 'conjure-form'; 2. import conjure-form/build/main.css;

3. Generate The Conjure Form You Want To Use

1. Go to the Conjure Form Maker and create a form.
2. Save that form to a JSON file in your React project.
3. Import that file into your component, ie: import __formJSON from './form.json';

4. Initialize The Conjure Form In Your Component

In your component's constructor, add the following code: 1. let rerender = function() { this.forceUpdate() }.bind(this); 2. let form = new ConjureFormController(__formJSON, rerender); 3. this.state = { conjureForm: form };

This will load your form from JSON into the ConjureForm class. It is now ready to render / be used.

Note: You need to pass a rerender function into the ConjureForm's constructor so that it can trigger a rerender from React when a user inputs data into the form. This is because ConjureFormController is not a React component, so changes within it will not be rerendered automatically.

5. Render The Conjure Form

In your Component's render function's JSX, add the following code: 1. <div>{this.state.conjureForm.renderForm()}</div>

This will render the ConjureForm and fill 100% of the height / width of the div the form is in. The user will be able to fill out the form now.

6. Grab The Form Results

1. Inside the component, call this.state.conjureForm.getFormResults(); to return the current output of the form with user inputted answers. This will be a JS object with the same structure as when you followed step 3 to generate the ConjureForm.

ConjureFormController Functions