react-sembra-library-dev
v1.0.16
Published
React-reusable-componets was created with SembraCare in mind. The benefits of using this library include maintaining streamlined and consistent UI elements/components across all SembraCare applications and applets.
Downloads
34
Readme
React Sembra Components
Introduction
React-reusable-componets was created with SembraCare in mind. The benefits of using this library include maintaining streamlined and consistent UI elements/components across all SembraCare applications and applets.
- Reusable Components NPM Link: https://www.npmjs.com/package/react-sembra-library
Getting Started
To install reusable components, run the following command:
npm install react-sembra-library
This command installs the reusable components library.
After installation, developers will have access to the following Sembra Components:
- Header
- Loader
- Footer
- Submit Button
- Login Page
Coming soon:
- Signup
- Reset Password
- Verify Account
To use these components, import them as destructured variables. Here’s an example:
import { Header, Footer } from "react-sembra-library";
We import the components as destructured variables to allow selective importation of only the components needed for a particular file. This approach helps in reducing the bundle size and improves the maintainability of the code.
Component List
1. Header
Header Visual Representation
Pre Auth Header
Post Auth Header Including User Menu (Collapsed) and Page Title
Post Auth Header Including User Menu (Expanded) and Page Title
Header Component Example
https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Layouts/header.jsx
Header Props
src
:String
A URL or React component representing the logo
alt
:String
Alt text to display if logo image does not render.
pageTitle
:String
The title of the page to be displayed within the header. We recommend not using this prop for pre-authorization pages, as those components have titles built into the component itself.
navLinks
:Array
An array of objects representing the navigation links. If no navItems are defined, the navMenu will be excluded. This is particularly useful for pre-authorization pages where the navigation menu is unnecessary, as all pre-authorization navigation is included in the page's main content.
Each object should have the following properties:
name
:String
The display text for the link.
url
:String
The URL to navigate to when the link is clicked.
targetBlank
:Boolean
Indicates whether to open the link in a new window.
Example:
const navItems = [ { name: "Home", href: "https://www.sembracare.com/", targetBlank: false, }, { name: "About", href: "https://www.nhl.com/hurricanes/", targetBlank: false, }, { name: "Contact", href: "https://homechoicenc.com/", targetBlank: true, }, ];
accessibilityProps
:Object
Customizations for accessibility. This object can include any accessibility settings required by the consuming project.
hamburgerStyle
:Object
Customizations for the hamburger style. This object can include any styles required by the consuming project.
Example:
const hamburgerMenuStyle = { color: "#0000c2", height: "1.5rem", width: "1.5rem", cursor: "pointer", };
Header Usage Example
Here's an example of how to use the Header component in your application:
import React from "react"; import { Header } from "react-sembra-library"; const logoUrl = "https://example.com/logo.png"; function App() { const [pageTitle, setPageTitle] = useState(null); const navItems = [ { name: "Home", href: "https://www.sembracare.com/", targetBlank: false }, { name: "About", href: "https://www.nhl.com/hurricanes/", targetBlank: false, }, { name: "Contact", href: "https://homechoicenc.com/", targetBlank: true, }, ]; const hamburgerMenuStyle = { color: "#0000c2", height: "1.5rem", width: "1.5rem", cursor: "pointer", }; useEffect(() => { let newPageTitle = ""; switch (route) { case "/": break; case "/welcome": newPageTitle = "Welcome"; break; default: newPageTitle = "Page Not Found"; } setPageTitle(newPageTitle); }, [route]); return ( <> <Header src={Logo} alt="Alt text here" navItems={pageTitle ? navItems : null} hamburgerMenuStyle={hamburgerMenuStyle} pageTitle={pageTitle} /> {/_ Rest of your application _/} </> ); }
2. Footer
"Powered by Sembracare" Logo is hardcoded into the footer. No props, No customization options at this time.
Footer Visual Representation
Footer Component Example
https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Layouts/footer.jsx
Footer Props
None
Footer Usage Example
Here's an example of how to use the Footer component in your application:
import React from "react"; import { Footer } from "react-sembra-library"; function App() { return ( <> {/_ Rest of your application _/} <Footer /> </> ); }
3. Loaders (small, medium, large and full-page)
Loader Visual Representation
Small, Medium and Large Loaders
Full Page Loader
Loader Component Example
https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Loader/loader.jsx
Loader Props
fullPageLoader
:Boolean
Indicates if the loader is a full-page loader. This is intended to be used while the main request is being fulfilled. This prop is only required if true.
loaderSize
:String
Specifies the desired size of the loader. Accepts values "sm" (small), "md" (medium), and "lg" (large). This prop is required if fullPageLoader is not being used.
Loader Usage Example
Here's an example of how to use the Loader component in your application:
// When decaring full page load is true import React from "react"; import { Loader } from "react-sembra-library"; function App() { return ( <> <Loader fullPageLoader={true} /> {/_ Rest of your application _/} </> ); } // When full page load is not being used import React from "react"; import { Loader } from "react-sembra-library"; function App() { return ( <> <Loader loaderSize={"sm"} /> {/_ Rest of your application _/} </> ); }
4. Submit Button
Includes optional features such as loading indicators and disabled states. This component enhances the user experience by offering visual feedback during form submission and ensuring that the submission process is seamless and intuitive.
Submit Button Visual Representation
Static Submit Button
Submitting Submit Button
Submit Button Component Example
https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Buttons/submitButton.jsx
Submit Button Props
onClick
:Function
Function to be invoked on button click
label
:String
The text to be displayed on the button.
hasLoader
:Boolean
Indicates whether the consuming project/component wishes to include a loader within the submit button to provide additional visual feedback that the form is currently submitting.
loaderSize
:String
Specifies the size of the loader when hasLoader is true. Accepts the value "sm". This prop is required only when hasLoader is true.
isSubmitting
:Boolean
Indicates whether the form is currently being submitted.
accessibilityProps
:Object
Customizations for accessibility. This object can include any accessibility settings required by the consuming project.
Submit Button Usage Example
Here's an example of how to use the SubmitButton component in your application:
import React from "react"; import { SubmitButton } from "react-sembra-library"; function App() { const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = async (e) => { // Simulating submit functionality setIsSubmitting(true); setTimeout(() => { setIsSubmitting(false); }, 3000); }; return ( <> <SubmitButton onClick={handleSubmit} label="Login" hasLoader={true} loaderSize="sm" isSubmitting={isSubmitting} accessibilityProps={{ tabIndex: "0", "aria-label": "Submit Form", }} /> {/_ Rest of your application _/} </> ); }
5. Login Page
Login Component Visual Representation
Login Component Example
https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Auth/login.jsx
Login Props
isSubmitting
:Boolean
Indicates whether the form is currently in the process of being submitted. This prop is passed to the SubmitButton component and is useful for disabling the submit button and optionally showing a loader on the submit button during the submission process.
handleLoginSubmit
:Function
A function containing additional submit actions, passed via props from the consuming project. This function is invoked within the Login component's submit process only if the login credentials are accepted.
realm
:String
A string that specifies the realm to which the consuming project belongs.
More details about how realms work will be added after a clarification meeting.
hasShakeFeature
:Boolean
Indicates whether the consuming project wants to include the optional shake feature. This feature was created to provide an additional visual cue to inform users of input/submit errors that need to be corrected before the form can be submitted. You can conditionally use the shake feature to shake the screen when the window width is below a certain size for mobile use. Additionally, you can choose to include or exclude the shake feature as needed.
Example:
hasShakeFeature={window.innerWidth < 540 ? true : false}
Login Component Usage Example
Here's an example of how to use the Login component in your application:
import React from "react"; import { Login } from "react-sembra-library"; function App() { const [isSubmitting, setIsSubmitting] = useState(false); const [isPageLoading, setIsPageLoading] = useState(false); const handleLoginSubmit = () => { // Simulating submit functionality setIsSubmitting(true); setTimeout(() => { setIsSubmitting(false); setIsPageLoading(true); setTimeout(() => { setIsPageLoading(false); // Handle routing/redirect }, 2000); }, 3000); }; return ( <> <Login isSubmitting={isSubmitting} handleLoginSubmit={handleLoginSubmit} realm={"SembraCash"} hasShakeFeature={window.innerWidth < 540 ? true : false} /> {/_ Rest of your application _/} </> ); }
Additional Componenets Coming Soon
6. Signup Page
7. Forgot/Reset Password
8. Verify Profile
Integration
- Tips for seamless integration with existing project style or design systems
Best Practices
- Tips form maintaining and updating library
- Tips for opimizing performance and ensuring accessibility
Additional Resources
- Test Project/Additional Documentation: https://github.com/sembracare-dev/React_Component_And_SembraStyles_Example_Project