npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-sembra-library-staging

v1.0.3

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

11

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

    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

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

  • 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