A set of Universal React Components that can be plug and played in any project.

Inspiration:

A common API for

1. creation
2. validation
3. error handling across any form library and across any material library

Why to create a new component for every project and to bind with a form library every single time. Decide which form library to use and then just mention which UI library to use. Everything else will be provided by this library.

You can build 70% of your forms with this and style it with custom styling.

How to customize any components ?

1. Name, label, options (in case of select / checkbox) should be provided by default.
2. By default it will have out of box styling.
3. Want to overwrite ? Simply pass the props which you would have passed to the actual components.

Currently it supports

UI libraries

1. Material UI
2. Semantic UI
3. AntDesign UI
4. Bootstrap UI
5. BluePrint UI

Form Libraries

1. Redux Form

So how does this works ?

// Importing necessary libsimportReact,{Component}from'react';import{reduxForm}from'redux-form';// Import components from required libraryimport{InputText,InputPassword,InputSelect,InputSwitch}from'../../Root/SemanticUI_ReduxForm/Components';// Importing additional components from other UI libimport{InputDateTimePicker,}from'../../Root/AntDesignUI_ReduxForm/Components';// Importing additional components from other UI libimport{InputRangeSlider,}from'../../Root/RangeSlider_ReduxForm/Components';import{genderOptions}from'./mockData';importFormfrom'../../Root/Common/ReduxFormBinders/Form.js';// Validations Passedimport{validationConfig}from'./validation';// Basic styles and overwritting stylesimport{styles,formLayoutStyle,customizedDateStyle,subsctiptionStyles,}from'./styles';constApp=(props)=>(<divstyle={formLayoutStyle}><Form{...props}styles={styles}validations={validationConfig}><InputTextname="name"label="Name"/><InputTextname="email"label="Email"/><InputPasswordname="password"label="Password"/><InputDateTimePickername="dob"label="Date Of Birth"style={customizedDateStyle}/><InputSelectname="gender"label="Gender"options={genderOptions}/><InputSwitchname="subscription"label="Subscription"style={subsctiptionStyles}/><InputRangeSlidername="size"label="Size Range"min={10}max={20}/><button>Submit</button></Form></div>)exportdefaultreduxForm({})(App);

How validations work ?

importisRequiredfrom'../../Root/Common/Validations/isRequired';importminLengthfrom'../../Root/Common/Validations/minLength';importmaxLengthfrom'../../Root/Common/Validations/maxLength';importisEmailfrom'../../Root/Common/Validations/isEmail';exportconstvalidationConfig={name: {validations: [isRequired('Text input is required'),minLength(5),maxLength(15)],},email: {validations: [isRequired('Email is required'),isEmail()]},password: {validations: [isRequired('Password is required',minLength(6))]},dob: {validations: [isRequired('Date of Birth is Required')]},gender: {validations: [isRequired('Password is required')]},size: {validations: [isRequired('Size Range should be selected')]}};

For more Try out SimpleSignup folder inside Examples.