FormsyReactBootstrap

FormsyReactBootstrap serves as a middleware between formsy-react and react-bootstrap. 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