React-Effortless-Form

Create an effortless, styled form in a few lines!

Live demos in progress, coming soon...

Features include:

• Easy inputs
• Create a styled form container
• Labels, Button and Wrappers
• More inputs coming soon!

Installation and Usage

The easiest way to install is with npm

npm i react-effortless-form

With React Hooks

import {Form, EmailInput, Wrapper, Label, PasswordInput, SubmitButton} from 'react-effortless-form';
import {useState} from "react";

const App = () => {

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    return (
        <div
            style={{
                backgroundImage: 'url(https://wallpaperaccess.com/full/6854780.jpg)',
                backgroundSize: '50%',
                width: '100vw',
                height: '100vh',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center'
            }}
        >
            <Form
            >
                <Label
                    style={{
                        fontSize: 50,
                        fontWeight: 'bold',
                    }}
                >
                    Login
                </Label>
                <Wrapper>
                    <EmailInput
                        onChange={(val) => setEmail(val)}
                        size={2}
                    />
                    <PasswordInput
                        onChamge={(val) => setPassword(val)}
                        size={2}
                    />
                </Wrapper>
                <SubmitButton
                    style={{width: '300px', textAlign: 'center'}}
                    submitMessage='Log In'
                    onSubmit={() => console.log({email: email, password: password})}
                />
            </Form>
        </div>
    );
}

export default App;

Props

Form

Prop	Type	Default	isRequired	Description
containerColor	color	'white'	no	Given a form a container is created with a plain color
containerSize	object (width: string, height: string)	width:'50%' height: '75%'	no	Sets the size for the form container
boxShadow	bool	true	no	Whether there is a shadow below the container or not

TextInput

Prop	Type	Default	isRequired	Description
textLabel	string	-	yes	Sets the label for the input (username, fullname, etc.)
labelColor	color	'white'	no	Sets the color for the label when not selected
textInputColor	color	'white'	no	Sets the color for the input text and the cursor
errorColor	color	'red'	no	Sets the color for when the field is not valid
successColor	color	'green'	no	Sets the color for when the field is valid
onChange	function	-	yes	The function to set what happens when the input is changed
regexValidation	regex	/\w+/	no	Regex to validate field and change color
inputType	['number','text','password']	'text'	no	Sets the input type for keyboard and how it is shown
minLength	number	0	no	Minimum length required for the field for validation
maxLength	number	255	no	Maximum length required for the field for validation
size	[1,2,3]	1	no	Sets the input size

EmailInput

It contains the same props as TextInput except the regexValidation is for email validation and textLabel is now called emailLabel, it is not required and the default value is 'Email'

PasswordInput

It contains the same props as TextInput except the inputType is 'password' and the textLabel is now passwordLabel, it is not required, and the default value is 'Password'

SubmitButton

Prop	Type	Default	isRequired	Description
submitText	string	'Submit'	no	The text for the button
submitButtonColor	color	'black'	no	The background color of the button
submitButtonTextColor	color	'white'	no	The color of the button text
className	string	'submit-button-class'	no	Sets the classname for styling the button
style	object	{}	no	Styling the button with inline react styles

Label

Prop	Type	Default	isRequired	Description
submitTextvlaue	string	''	no	The text for the label
className	string	''	no	Sets the classname for styling the label
style	object	{}	no	Styling the label with inline react styles

License

MIT Licensed. Copyright (c) 2022 Federico Pochat