Prospectus

Installation

Just install the dependency and start using

npm i prospectus or yarn add prospectus

How to import

After installing the dependency, just import the components you need

import Prospectus from "prospectus";

Usage

This example shows how to user prospectus to render a form and html from a object

import Prospectus from  "prospectus";
const formObject = {
	form: {
		//check bellow for more properties
	},
	elements: [
		//check bellow for more properties
    ]
}
<Prospectus
	data={formObject}
	renderForm={true}
/>

Get HTML code from Object

The example below shows how to collect/get the html code generated by the object. Still in this example it shows the functionality of not rendering the form visually, this can be useful for applications like editors that only need the generated code.

import Prospectus from "prospectus";
const formObject = {
  form: {
    //check bellow for more properties
  },
  elements: [
    //check bellow for more properties
  ]
};
export default class App extends Component {
  getFormHtml = html => {
    console.log(html);
  };
  render() {
    return (
      <div>
        <Prospectus
          data={formObject}
          renderToHTML={this.getFormHtml}
          renderForm={false}
        />
      </div>
    );
  }
}

Form Properties

The properties of the form are the basic attributes of a html form, these are not mandatory

import Prospectus from  "prospectus";
const formObject = {
	form: {
	    action: "https://example.com",
        method: "post",
        target: "_blank"
    }
    ...
}

Element Properties

The properties can be different, what is inside the "props" is only generic attributes of the html tags so you can add what you want, you just need to indicate the type of element. More examples of element below.

import Prospectus from  "prospectus";
const formObject = {
    ...
	elements: [
        {
          element: "text", //radio //select //button //textarea
          props: {
            type: "text",
            id: "name",
            name: "name",
            label: "What's your name?",
            className: "form-control",
            required: true
            //more generic input tag properties from pure html
          }
        }
    ]
}

License

MIT © vacom