https://github.com/peterkottas/guestbell-forms

Beautiful react forms with built-in validation
https://github.com/peterkottas/guestbell-forms

form-validation forms input-validation lightweight material-design material-ui react

Last synced: about 2 months ago
JSON representation

Beautiful react forms with built-in validation

• Host: GitHub
• URL: https://github.com/peterkottas/guestbell-forms
• Owner: PeterKottas
• License: mit
• Created: 2017-08-05T14:48:28.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-10-24T16:24:34.000Z (3 months ago)
• Last Synced: 2024-10-25T13:34:59.055Z (3 months ago)
• Topics: form-validation, forms, input-validation, lightweight, material-design, material-ui, react
• Language: TypeScript
• Size: 27.3 MB
• Stars: 15
• Watchers: 4
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://peterkottas.github.io/guestbell-forms)

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:

```

	


		


			

		

		


			

		

	

	


		


			

		

		


			

		

	

	


		

				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](https://guestbell.com/) - 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