A dynamic form for React styled with bootstrap
npm install react-bootstrap-formreact-bootstrap-form is a dynamic form for react with validation and data
posting support with customizable input components.
$ npm install --save react-bootstrap-form
Then with a module bundler like webpack that supports either CommonJS or ES2015
modules, import the Form:
javascript
// Using an ES6 transpiler, like babel
import Form, { ValidationError, TextInput } from 'react-router';// Not using an ES6 transpiler
var Form = require('react-bootstrap-form');
var ValidationError = require('react-bootstrap-form').ValidationError;
`Usage
The simplest use case
javascript
import React from 'react';
import { render } from 'react-dom';
import Form from 'react-bootstrap-form';// Define your form attributes
const attributes = [
{ type: "Text", name: "username", required: true, label: "Username" },
{ type: "Date", name: "dob", required: true, label: "Date of Birth"},
{ type: "TextArea", name: "description", label: "Description" }
];
// Render the form within your UI
class App extends React.Component {
render() {
return
}
}render(
`
The data is posted as a JSON object with the values provided. In this example
it could be
{ username: "...", dob: "yyyy-mm-dd", description: "......" }
Customizing the Form
Alternatively you can use
to define a input and Fieldset
for other input elements. The Form connects with only specially built
input components like ,DateInput, RadioInput, etc which are
mapped with type prop in the Input. Check out the documentation to
find out how to build your own components that connects with the Form
automatically.`javascript
import React from 'react';
import { render } from 'react-dom';
import Form, { Input, Fieldset } from 'react-bootstrap-form'; render(
,document.body);
``