React Front-end Components Library

This React component library is aimed at developers to spend less time writing code and more time building a fantastic User experience.

Storybook

Demo Link

Install

Install cos-fec-library with npm

  npm install cos-fec-library

Usage/Examples

The most basic use of the Login component:

import { Login } from "cos-fec-library/dist/components/Login";
import "cos-fec-library/dist/index.css";

function App() {
    return (
        <Login
            formTitle="Sign In Form"
            userNameType="email"
            loginBtnLabel="Sigin"
            onSubmit={onSubmitFunction}
            usernamePlaceholder="Enter Username"
            passwordPlaceholder="Enter Password"
        />
    );
}

Login Props

| Props | Description | Default | | ------------------- | :-----------------: | --------------: | | formTitle | string | "Login Form" | | userNameLabel | string | "User Name" | | userNameType | "string" or "email" | "string" | | emailError | string | "Invalid Email" | | loginBtnLabel | string | "Login" | | onSubmit | Required. func | - | | usernamePlaceholder | string | - | | passwordPlaceholder | string | - |

You can also pass child components such as GoogleLogin or LinkedInLogin into the Login component.

import { Login } from "cos-fec-library/dist/components/Login";
import "cos-fec-library/dist/index.css";
import GoogleLogin from "react-google-login";

function App() {
    <Login onSubmit={onSubmitFunction}>
        <GoogleLogin
            className="google-signin"
            clientId={clientId}
            onFailure={onFailureCallback}
            onSuccess={onSuccessCallback}
            cookiePolicy={"single_host_origin"}
        />
    </Login>;
}

For more details see the Login Story