GuestBell forms

Beautiful, lightweight react forms and form elements. Includes zero setup validation. Entirely written in typescript therefore typings are always valid and up to date.

Demo

Check out demo

or

Clone this repo and

``



npm install

npm start





Important note



This library is actively used in our startup called GuestBell. This is therefore production code which will be maintained an improved on regular basis. All help is much appreciated!

The reason why we created is most simmilar libraries out there utilize either jQuery or some other huge libraries. This is a litweight solution which will guarantee your website speed and small size.



Installation



Using npm:



npm install guestbell-forms --save





Quick start



Just import your components like this



import { Form, Text, Select, Submit, DynamicSubmit, IBaseValidator, Checkbox, Radio, RadioContainer } from 'guestbell-forms';





And use them in your react elements.



Usage



Check out this simple example:





	

		

							required={true}

				label="Username"

				value={this.state.name}

				onChange={this.handleNameChange} />

		

		

							required={true}

				label={'Gender'}

				values={[{ value: 'M', label: 'Male' }, { value: 'F', label: 'Female' }]}

				onChange={this.handleGenderChange}

				value={this.state.gender} />

		

	

	

		

							validators={["email"]}

				required={true}

				label="Email"

				value={this.state.email}

				onChange={this.handleEmailChange} />

		

		

							customValidators={[AgeValidator.instance]}

				label="Age (optional)"

				value={this.state.age}

				onChange={this.handleAgeChange} />

		

	

	

					className="btn btn-primary btn-lg"

			onClick={this.submitForm}>

				Submit





1. Notice there's no passing props around, yet the form validates perfectly and the submit button is enabled/disabled through magic or react :)

2. See how we support built-in validators (validators={["email"]}) and even custom validators (customValidators={[AgeValidator.instance]})

3. Custom validators are easy to work with, take a look at this AgeValidator



class AgeValidator implements IBaseValidator {

	public static instance = new AgeValidator();

	public Validate(value: string, isRequired: boolean, addError: (error: string) => void): boolean {

		let number = Number(value);

		if (!isNaN(number)) {

			if (number < 0) {

				addError('Not born yet?');

				return false;

			}

			if (number > 122) {

				addError('Older than Jeanne Calment? C\'mon');

				return false;

			}

			return true;

		}

		else {

			addError('Invalid age');

		}

		return false;

	}

}





Just a class with one method. We provide the static instance for simplicity.



4. All inputs work like typical react inputs. It's recommended to bind them with the value and the change handler.



Created and sponsored by



- GuestBell - Customer centric online POS for Hotels and short terms stays.



Contributing



1. Fork it!

2. Create your feature branch:

git checkout -b my-new-feature



3. Commit your changes:

git commit -am 'Add some feature'



4. Push to the branch:

git push origin my-new-feature`
5. Submit a pull request :D

License

MIT