Cmation-formsbuilder NPM

Forms Input Controller for CMATION™

More information coming soon.\ This project really only works if you use bootstrap 5 on your react app.\ I made this package because I use this on all projects I create.\

If you want a simple way to create forms with React & bootstrap 5, this is the package for you.\

Installation

npm install cmation-formsbuilder

Sizing

I use bootstrap form-control sizing here so adding the attribute

inputSize="lg"

would make the input field large.

inputSize="sm"

would make the input field small.\ Not specifying a size will make the field size medium / normal.

Usage

Text Input Field

import { FormInput } from 'cmation-formsbuilder';

let errors = [];
errors.name = "This field is required";
    
<FormInput 
    type="text"
    name="email"
    label="Email"
    placeholder="Enter your email"
    value={name}
    floatingLabel={true}
    onChange={value => setEmail(value)}
    error={errors.name}
/>

<FormInput 
    type="text"
    name="email"
    label="Email"
    inputSize="lg"
    placeholder="Enter your email"
    value={name}
    onChange={value => setEmail(value)}
    error={errors.name}
/>
<FormInput 
    type="text"
    name="email"
    label="Email"
    placeholder="Enter your email"
    value={name}
    onChange={value => setEmail(value)}
    error={errors.name}
/>
<FormInput 
    type="text"
    name="email"
    label="Email"
    inputSize="sm"
    placeholder="Enter your email"
    value={name}
    onChange={value => setEmail(value)}
    error={errors.name}
/>

Textarea Input Field

<FormInput 
    type="textarea"
    name="message"
    label="Message"
    placeholder="Type your message here"
    value={name}
    onChange={value => setMessage(value)}
    error={errors.name}
/>

Toggle

acts like a boolean filed 1 or 0 / true or false

<FormInput
    type="toggle"
    label="Active"
    name="active"
    value={active}
    hideBorder={true}
    onChange={(value) => setActive(value)}
/>

Example React Component

I am only including the return statement to keep the example short. This is a sample sign in component.

return (
    <div className="card">
        <div className="card-body">
            <div className="m-sm-4">
                <div className="text-center">
                    <h1 className="h2">sign in</h1>
                    <p className="lead">Sign in to the website</p>
                    {errorMessage && (
                        <div
                            className="alert alert-danger alert-dismissible fade show"
                            role="alert"
                        >
                            <div className="alert-message">{errorMessage}</div>
                        </div>
                    )}
                </div>
                <form onSubmit={(e) => e.preventDefault()}>
                    <FormInput
                        type="email"
                        id="username"
                        label="Email"
                        name="username"
                        inputSize="lg"
                        value={username}
                        hideBorder={true}
                        floatingLabel={true}
                        placeholder="Enter your email"
                        autoComplete="username"
                        onChange={(value) => setUsername(value)}
                        error={errors.username}
                    />
                    <FormInput
                        type="password"
                        id="password"
                        label="Password"
                        name="password"
                        inputSize="lg"
                        floatingLabel={true}
                        value={password}
                        hideBorder={true}
                        hideMeter={true}
                        placeholder="Enter your password"
                        autoComplete="current-password"
                        onChange={(value) => setPassword(value)}
                        error={errors.password}
                    />
                    <div className="row">
                        <div className="col-6 text-end mt-3">
                            <button className="btn btn-primary" onClick={onSubmit}>
                                <i className="fas fa-unlock-alt" /> Sign in
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
);