# FormsyReactBootstrap

FormsyReactBootstrap serves as a middleware between [formsy-react](https://github.com/christianalfoni/formsy-react) and [react-bootstrap](https://react-bootstrap.github.io/).
It allows an easy, fast and highly customizable creations of forms all in JSX.

## Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. Annd documentation to see how to use the project.

## Prerequisities

For using FormsyReactBootstrap we will assume you already have a react with babel environment set-up. If it's already the case, then all you will need are formsy-react and react-bootstrap alongside all their dependencies.

```
npm install --save formsy-react react-bootstrap
```

## Installing

Simply install the npm package

```
npm install --save formsy-react-bootstrap
```

## Layout creation

You can easily reuse your form designs by creating layout for FormsyReactBootstrap, nothing is easier than to create a new one. You can look at the default exemple in the src to get an idea of how to create one yourself.

A layout need to contains 6 files. One file for each form elements (Checkbox, Input, RadioGroup, Select and Textarea ) and one index.js file whose sole purpose is to regroup the 5 elements in a single import.

### index.js

You can basically use the same index.js template for all of your layout.

```
var Layout = {};

Layout.Checkbox = require('./Checkbox');
Layout.Input = require('./Input');
Layout.RadioGroup = require('./RadioGroup');
Layout.Select = require('./Select');
Layout.Textarea = require('./Textarea');

module.exports = Layout;
```

### Form elements

These files are react component overloading the render method of the form element. So simply create a standard react component with a render method.

You can easily access your element by accessing the props named element :

```
let element = this.props.element;
```

Once you have that, simply wrap the element methods around the design you want.

#### Element methods

```
element.renderElement()
```
Return the element itself. (Input, Select, Textarea etc )


```
element.getValidationState()
```
Return one of: 'success', 'warning', 'error'.

```
element.showRequired()
```
Return true if the element is required.

```
element.getLabel()
```

Return label of the element

```
element.getRowLabel()
```

Specific to checkbox, return the label used to describe the group of checkbox as an all. While label is used for a specific checkbox.


```
element.getErrorMessage()
```

Return an error message when an element is invalid.


### Demo

You can find exemple of usage of FormsyReactBootstrap inside that github repository, simply head up to the demo folder.

## Versioning

Current version 1.1