prospectus v0.0.3
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