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