10 Best React Loading Component for Your App

10 Best React Loading Component for Your App

If you are unable to shorten the process, you should at least try to make the wait pleasant for your users. Here are 10 react loading components for your react.js application

While instant feedback from an app or website is best, sometimes your product won't be able to adhere to speed guidelines. The slow response may be due to poor internet connection or the operation process may take a long time. For such cases, the designer must reassure the user that:
The application is working according to their requirements and the actual process is still active.

If you are unable to shorten the process, you should at least try to make the wait pleasant for your users. Here are 10 react loading components for your react.js application

1. Create React Content Loader

Have you heard about react-content-loader? It's a SVG component to create placeholder loading, like Facebook cards loading or also known as skeleton UI. So now you can use this online tool to create your own loader easily. You just need to draw using the canvas or code using the live editing!

View Demo: https://danilowoz.com/create-content-loader/

Github: https://github.com/danilowoz/create-content-loader

Download Link: https://github.com/danilowoz/create-content-loader/archive/master.zip

2. react-loading

React-Loading is a React-based Loading animation component library includes many exquisite and beautiful loading components. It will effectively relieve the user's anxiety when you give loading dynamics tips at the appropriate place and moment in your project. This component library supports on-demand loading, so pick a favorite Loading component now to enrich your project

View Demo: http://139.196.82.33:8080/iframe.html?id=demo--demo

Github: https://github.com/sixiaodong123/react-loading

Download Link: https://github.com/sixiaodong123/react-loading/archive/master.zip

3. react-simple-infinite-loading

Someone pointed out the React implementation of the list was a bit complex. I figure out it was possible to write an abstraction for this particular case. Here it is!

This component aims to stay easy to use. If your use case needs more options I recommend using directly awesome libraries from Brian Vaughn listed in dependencies section.

View Demo: https://codesandbox.io/s/magical-shockley-vhkz8

Github: https://github.com/frinyvonnick/react-simple-infinite-loading

Download Link: https://github.com/frinyvonnick/react-simple-infinite-loading/archive/master.zip

4. react-pure-loaders

React Pure Loaders is a package that disponibilizes loaders for your Project. Those loaders are used as components, using color and a loading variables as properties.

The component expects the to receive the color as a string with the hexadecimal code and the loading as a boolean, that is true by default.

View Demo: https://reactpureloaders.io/

Github: https://github.com/jameswlane/react-pure-loaders

Download Link: https://github.com/jameswlane/react-pure-loaders

5. react-loadcon

React component to manipulate the favicon, as a loading or progress indicator, for now. The idea of "Favicon as DOM" is under construction.

View Demo: https://foreseaz.github.io/react-loadcon/

Github: https://github.com/foreseaz/react-loadcon

Download Link: https://github.com/foreseaz/react-loadcon/archive/master.zip

6. React Nested Loader

The easiest way to manage loaders/errors inside a button. NOT an UI lib.

  • Manage loading/error state of nested views/buttons triggering async actions
  • Not an UI lib, you provide the UI. Works with ReactNative.
  • No boilerplate at all, no need to use setState/Redux

View Demo: https://codesandbox.io/s/w640yv5p9w

Github: https://github.com/slorber/react-nested-loader

Download Link: https://github.com/slorber/react-nested-loader/archive/master.zip

7. react-wait

react-wait is a React Hook helps to manage multiple loading states on the page without any conflict. It's based on a very simple idea that manages an Array of multiple loading states. The built-in loader component listens its registered loader and immediately become loading state.

View Demo: https://codesandbox.io/s/y3w5v5lk0j

Github: http://github.com/f/react-wait

Download Link: https://reactjsexample.com/complex-loader-management-hook-for-react/

8. React Redux Loading Bar

A React component that provides Loading Bar (aka Progress Bar) for long running tasks.

Consists of:

  • React component — displays loading bar and simulates progress
  • Redux reducer — manages loading bar's part of the store
  • (optional) Redux middleware — automatically shows and hides Loading Bar for actions with promises

View Demo: https://mironov.github.io/react-redux-loading-bar/

Github: http://github.com/mironov/react-redux-loading-bar

Download Link: https://github.com/mironov/react-redux-loading-bar/archive/master.zip

9. Material UI Image

Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.

View Demo: https://mui.wertarbyte.com/#material-ui-image

Github: http://github.com/TeamWertarbyte/material-ui-image

Download Link: https://github.com/TeamWertarbyte/material-ui-image/archive/master.zip

10. React Lazy Load Image Component

React Component to lazy load images and other components/elements. Includes a HOC to track window scroll position to improve performance.

React Component to lazy load images and components using a HOC to track window scroll position.

View Demo: https://www.albertjuhe.com/react-lazy-load-image-component/

Github: http://github.com/Aljullu/react-lazy-load-image-component

Download Link: https://github.com/Aljullu/react-lazy-load-image-component/archive/master.zip

Hire React Js Developer from Expert React JS Development Company

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

Are you looking to hire React JS developer from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team of expert React JS developers, you can hire them on an hourly, weekly or monthly basis for the successful completion of your dream project.

4 Best React Navbar Component for Your App

4 Best React Navbar Component for Your App

React navbar is a horizontal navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

React navbar is a horizontal navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

Here are 4 React navbar component that will help your application. Enjoy!

1. React Scrolling NavBar

This Repo is not actively maintained! Please do not use in professional environment!

This is a React navbar component based on react-scroll. While this component is good, it doesn't support mobile well, especially when there are many items in navbar. That's why we need another navbar design for more responsiveness, mobile friendliness.

Github: https://github.com/lijunray/react-scrolling-nav

Download Link: https://github.com/lijunray/react-scrolling-nav/archive/master.zip

2. react-responsive-navbar

Navbar component that moves the navbar items to a dropdown, if they do not fit in the content area.

View Demo: https://opuscapita.github.io/react-responsive-navbar/

Github: http://github.com/OpusCapita/react-responsive-navbar

Download Link: https://github.com/OpusCapita/react-responsive-navbar/archive/master.zip

3. react-navbar

React.js component rendering a translatable menu bar with Twitter Bootstrap Navbar HTML markup. For example, for a menu structure like the that:

Github: https://github.com/ikr/react-navbar

Download Link: https://github.com/ikr/react-navbar/archive/master.zip

4. NavbarNative

A fully customizable Navbar component for React-Native.

It works for both iOS and Android!

View Demo:

Github: https://github.com/redbaron76/navbar-native

Download Link: https://github.com/redbaron76/navbar-native/archive/master.zip

How to Create a Timeline Component with React.js and CSS

How to Create a Timeline Component with React.js and CSS

How to Create a Timeline Component with ReactJS and CSS. In this React.js and CSS tutorial we're going to use ReactJS to create a wonderful Timeline Component. Also, we're going to use CSS to add some magic on top to make it look beautiful!

These days I've been working on a new page for my website. I wanted to have a Timeline to showcase some of my professional accomplishments over the years.

I did it for a couple of reasons:

  1. My future self will look back one day and say: "Wow... I remember the day when I did that! How happy I was to achieve that goal!". Our success is a journey, not a destination and I want to write down every goal that I achieve along the way
  2. It might attract more clients (we'll see how this goes 😄)
  3. In my opinion it is a different kind of portfolio. A unique portfolio, maybe? 😜

Nevertheless... Let's build something now!

In the picture above you can see what we're going to build today using React! Before we start let's break down the steps we need to take:

  1. Create the data that we'll need
  2. Create the TimelineItem component - each individual timeline entry
  3. Create a Timeline container - it will take the data and pass it down to the TimelineItems
  4. Style everything
Create the data

Before we move to actually create the React components we need to know exactly how the data is going to look so we can plan out the DOM structure.

For this Timeline app we're going to need an array of objects. We will call this array: timelineData.

Let's see how it might look:

[
    {
        text: 'Wrote my first blog post ever on Medium',
        date: 'March 03 2017',
        category: {
            tag: 'medium',
            color: '#018f69'
        },
        link: {
            url:
                'https://medium.com/@popflorin1705/javascript-coding-challenge-1-6d9c712963d2',
            text: 'Read more'
        }
    },
    {
        // Another object with data
    }
];

The properties are pretty straightforward, right? I used similar data to what I have on my timeline page, so we can say that this is production ready! 😆

Next, we'll build the TimelineItem component. This will use the data from the object above:

The TimelineItem component
const TimelineItem = ({ data }) => (
    <div className="timeline-item">
        <div className="timeline-item-content">
            <span className="tag" style={{ background: data.category.color }}>
                {data.category.tag}
            </span>
            <time>{data.date}</time>
            <p>{data.text}</p>
            {data.link && (
                <a
                    href={data.link.url}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    {data.link.text}
                </a>
            )}
            <span className="circle" />
        </div>
    </div>
);

We have the following tags:

  1. .timeline-item div - used as a wrapper. This div will have half the width of it's parent's width (50%) and every other .timeline-item div will be placed to the right side using the :nth-child(odd) selector
  2. .timeline-item-content div - another wrapper (more on why we need this in the styling section)
  3. .tag span - this tag will have a custom background color depending on the category
  4. the time/date and the text
  5. link - we will need to check this to see if a link is provided because we might not always want to have one
  6. .circle span - this tag will be used to place a circle on the middle line/bar

Note: Everything will make much more sense when we get to the CSS/styling part, but before that let's create the Timeline component:

The Timeline container

This component will basically map over the array and for each object it will create a TimelineItem component. We also add a small check to make sure that there is at least one element in the array:

import timelineData from '_path_to_file_';

const Timeline = () =>
    timelineData.length > 0 && (
        <div className="timeline-container">
            {timelineData.map((data, idx) => (
                <TimelineItem data={data} key={idx} />
            ))}
        </div>
    );

As mentioned above, the timelineData is the array of objects containing all the required information. In my case I stored this array in a file and I imported it here, but you can take this from your own database or from an API endpoint, it's up to you.

The CSS

Note that most of the wrappers will be flexbox containers because we can play around easier with their positioning. Let's start with the .timeline-container CSS:

.timeline-container {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 40px 0;
}

.timeline-container::after {
    background-color: #e17b77;
    content: '';
    position: absolute;
    left: calc(50% - 2px);
    width: 4px;
    height: 100%;
}

We're using the ::after selector to create that red line/bar in the middle of the .timeline-container. Using the calc() function we can position the line exactly in the middle by subtracting half of it's size (2px) from 50%. We need to do this because by default the left property positions it according to the left edge of an element and not the middle.

Now, let's move to the .timeline-item wrapper.

Below you can see an example of how these are positioned within their parent (the .timeline-container).

As you can see, every other wrapper goes to the right, and the inner wrapper (the .timeline-item-content) is taking less space - space given by the p tag which is inside it (mostly). Let's see the CSS for this:

.timeline-item {
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
    position: relative;
    margin: 10px 0;
    width: 50%;
}

.timeline-item:nth-child(odd) {
    align-self: flex-end;
    justify-content: flex-start;
    padding-left: 30px;
    padding-right: 0;
}

The key to this is that we use the :nth-child(odd) selector and we set the align-self property to flex-end which means: "Go to the right as much as you can"!

Because these wrappers are 50% in width, you can see that two of them take up the whole width. From now on, every time we want to style differently something in the right side, we'll have to use this approach.

Next, the .timeline-item-content wrapper:

.timeline-item-content {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 15px;
    position: relative;
    width: 400px;
    max-width: 70%;
    text-align: right;
}

.timeline-item-content::after {
    content: ' ';
    background-color: #fff;
    box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
    position: absolute;
    right: -7.5px;
    top: calc(50% - 7.5px);
    transform: rotate(45deg);
    width: 15px;
    height: 15px;
}

.timeline-item:nth-child(odd) .timeline-item-content {
    text-align: left;
    align-items: flex-start;
}

.timeline-item:nth-child(odd) .timeline-item-content::after {
    right: auto;
    left: -7.5px;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
}

We have a few things going on:

  1. This wrapper has a fixed width and also a max-width. This is because we want it to have some boundaries, meaning that if there are only a few words, we want the box to be at least 400px wide, but if there is a lot of text, it shouldn't take up the full space (the 50% from the .timeline-item wrapper) but the text should move on to the next line -> this is the reason we used this second wrapper: .timeline-item-content
  2. The text-align and align-items properties are used to push the inner elements to the left or to the right, depending on the parent
  3. The small arrow that points to the middle line is given by the styles applied on the ::after selector. Basically it is a box with a box-shadow applied on it that is rotated 45deg
  4. As mentioned above, we style the right side by selecting the parent with the :nth-child(odd) selector

Next up, all the inner elements:

.timeline-item-content .tag {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    top: 5px;
    left: 5px;
    letter-spacing: 1px;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
}

.timeline-item:nth-child(odd) .timeline-item-content .tag {
    left: auto;
    right: 5px;
}

.timeline-item-content time {
    color: #777;
    font-size: 12px;
    font-weight: bold;
}

.timeline-item-content p {
    font-size: 16px;
    line-height: 24px;
    margin: 15px 0;
    max-width: 250px;
}

.timeline-item-content a {
    font-size: 14px;
    font-weight: bold;
}

.timeline-item-content a::after {
    content: ' ►';
    font-size: 12px;
}

.timeline-item-content .circle {
    background-color: #fff;
    border: 3px solid #e17b77;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 10px);
    right: -40px;
    width: 20px;
    height: 20px;
    z-index: 100;
}

.timeline-item:nth-child(odd) .timeline-item-content .circle {
    right: auto;
    left: -40px;
}

Few things to note here:

  1. As you might have guessed, the .tag is positioned absolute because we want to keep it in the top left (or right) corner no matter what size is the box
  2. We want to add a small caret after the a tag to highlight that it is a link
  3. We create a .circle and position it on top of the middle line/bar directly in front of the arrow

We're almost done! 😄 The only thing that's left to do is to add the CSS to make everything responsive across all screen sizes:

@media only screen and (max-width: 1023px) {
    .timeline-item-content {
        max-width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .timeline-item-content,
    .timeline-item:nth-child(odd) .timeline-item-content {
        padding: 15px 10px;
        text-align: center;
        align-items: center;
    }

    .timeline-item-content .tag {
        width: calc(100% - 10px);
        text-align: center;
    }

    .timeline-item-content time {
        margin-top: 20px;
    }

    .timeline-item-content a {
        text-decoration: underline;
    }

    .timeline-item-content a::after {
        display: none;
    }
}

We have two media queries:

  1. On small laptop screen sizes - max-width: 1023px - we want to allow the .timeline-item-content to go across the entire width of it's parent because the screen is smaller and otherwise it would look squeezed

  2. On phones - max-width: 767px

    • set the .tag to be full width (and for that we don't need to forget to subtract 10px from the total of 100% - this is because we have it positioned at left: 5px, so we remove double of this amount)
    • center all the text and push it down from the top just a little bit
    • remove the caret on the link and add an underline - looks better on mobile 😉

Aaaand... We're done!

Conclusion

As I mentioned, this component is on my Timeline page. Check it out to see it in action! 😄

If there is something that you didn't understand from this article, make sure you contact me and I'll be happy to answer your questions!

Happy Coding! 😇