React UI Loader

Introduction

Welcome to React UI Loader, a powerful and versatile npm package crafted with TypeScript, React, and CSS to simplify the integration of customisable lightweight shimmers and loaders into your web applications. In the dynamic world of web development, creating loaders and shimmers that seamlessly integrate with your app's design can be a time-consuming task. React UI Loader comes to the rescue, offering a comprehensive solution that streamlines the process of adding loading indicators, making your application not only visually appealing but also providing a smoother user experience.

Motivation

The motive behind React UI Loader is to empower developers by eliminating the need for building loaders and shimmers from scratch. We understand the importance of maintaining a polished and responsive user interface, and that's why we have created a package that allows you to effortlessly incorporate customisable loading elements into your React applications. With React UI Loader, you can focus more on building the core functionality of your app, while we take care of the visual aspects, providing a polished and professional touch.

Key Features:

1. Customisation: React UI Loader offers a wide range of customization options, allowing you to tailor the appearance of loaders and shimmers to match your app's design seamlessly. Adjust colors, sizes, and animations with ease.

2. Lightweight: We believe in keeping things simple and efficient. React UI Loader is designed to be lightweight, ensuring that your application's performance remains unaffected while still delivering a visually engaging loading experience.

3. Versatility: Whether you need a shimmer effect for content placeholders or a loader for asynchronous operations, React UI Loader has got you covered. With multiple pre-built forms and styles, you can choose the loading indicator that suits your specific use case.

4. Ease of Integration: Integration is a breeze with React UI Loader. Thanks to TypeScript and React, you benefit from a type-safe and component-based approach, making the implementation process smooth and intuitive.

By choosing React UI Loader, you not only save valuable development time but also enhance the overall user experience of your application. Say goodbye to the hassle of creating loaders and shimmers manually, and let React UI Loader take your React app's visual appeal to the next level.

Installation

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate non ipsam, placeat neque eligendi tempore rem maxime dolor laborum ratione molestiae dolore explicabo animi culpa enim beatae totam iste. Minus!

npm install react-ui-loader

pnpm add react-ui-loader

yarn add react-ui-loader

Loader

Loader helps you add loader while you carry out async processess, it is responsive and easily customisable. We can use it by importing it at top of our component and passing the required prop show.

import TextLoader from "react-ui-loader"

export default function MyApp() {
    return (
        <TextLoader show={true} />
    )
}

Loader Props

Prop Name	Datatype	Required	Default Value	Description
show	boolean	yes	true	Determines whether to hide or show loader
bgColor	string	no	black	Takes hex values of color as input to determine background color of loading screen
widthValue	string or number	no	100vw	Determines the width of loading screen
heightValue	string or number	no	100vh	Determines the height of loading screen
zIndexing	number	no	1	Determines the z-index for loading screen
backgroundOpacity	number	no	1	Determines the opacity of background in Loader
justifycontent	string	no	center	Determines the horizontal position of loader icon, loader text and loader image according to flex properties
alignitems	string	no	center	Determines the vertical position of loader icon, loader text and loader image according to flex properties
loaderText	string	no	Loading...	Takes input as the text we want to display on loading screen
textColor	string	no	white	Takes input as the color of the text you want to display on loading screen
fontSizeValue	string	no	18px	Takes input as the font size of the text you want to display on loading screen
fontWeightValue	number	no	400	Takes input as the font weight of the text you want to display on loading screen
loaderColor	string	no	white	Takes string as input to determine the color of loader
loader	boolean	no	false	Determines wheteher to show the loader or not
loaderStyle	string	no	Circular	Determines the style of the loader
loaderSize	string	no	medium	Determines the size of the loader
textAnimate	boolean	no	false	Determines if we want to give an animation to the loading text
logo	boolean	no	false	Determines if we want to show the logo or not
logoHeight	string	no	48px	Determines the height of logo in loading screen
logoWidth	string	no	48px	Determines the width of logo in loading screen
logoAnimate	boolean	no	false	Determines if we want to give an animation to the logo
children	ReactNode	no	null	Takes ReactNode as input to determine the logo in the loader
row	boolean	no	true	Arrange loader icon, loader text and loader image in a row or column

Shimmer

Shimmer helps you add shimeer while you carry out async processess, it is responsive and easily customisable. We can use it by importing it in our component and passing the required prop show.

import ProfileShimmer from "react-ui-loader"

export default function MyApp() {
    return (
        <ProfileShimmer show={true} />
    )
}

Shimmer Props

Prop Name	Datatype	Required	Default Value	Description
show	boolean	yes	true	Determines whether to hide or show shimmer
profilePositionCenter	boolean	no	false	Determines if profile picture must be in center or not
profileShape	string	no	circle	Determines the shape of profile picure
profileDimension	string	no	200px	Determines the size of profile picure
coverHeight	string	no	25%	Determines the height of cover picure
coverWidth	string	no	100%	Determines the width of cover picure
showCover	boolean	no	true	Determines the whether to hide or display the cover picure
showProfile	boolean	no	true	Determines the whether to hide or display the profile picure
showLines	boolean	no	true	Determines the whether to hide or display the lines
numberOfLines	number	no	10	Determines the total number of lines to display
numberOfCards	number	no	10	Determines the total number of Cards to display
showCards	boolean	no	true	Determines the whether to hide or display the cards
cardHeight	string	no	420px	Determines the height of cards
cardWidth	string	no	420px	Determines the width of cards
backgroundColor	string	no	white	Determines the color of background
color	string	no	gray	Determines the color of components
shimmerColor	string	no	white	Determines the color of shimmer effect
lineHeight	string	no	10px	Determines the height of lines in shimmer
lineWidth	string	no	98%	Determines the width of lines in shimmer
shimmerHeight	string	no	fit-content	Determines the height of shimmer component
shimmerWidth	string	no	100%	Determines the width of shimmer component