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
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