React18 Loaders

React18 Loaders is a comprehensive library designed to unlock the full potential of React 18 server components. It provides customizable loading animation components and a fullscreen loader container, seamlessly integrating with React and Next.js.

✅ Fully Treeshakable (import from react18-loaders/client/loader-container)

✅ Fully TypeScript Supported

✅ Leverages the power of React 18 Server components

✅ Compatible with all React 18 build systems/tools/frameworks

✅ Documented with Typedoc (Docs)

✅ Examples for Next.js, Vite, and Remix

Please consider starring this repository and sharing it with your friends.

Getting Started

Installation

pnpm add react18-loaders

or

npm install react18-loaders

or

yarn add react18-loaders

Want Lite Version?

pnpm add react18-loaders-lite

or

npm install react18-loaders-lite

or

yarn add react18-loaders-lite

You need r18gs as a peer-dependency

Import Styles

You can import styles globally or within specific components.

/* globals.css */
@import "react18-loaders/dist";

// layout.tsx
import "react18-loaders/dist/index.css";

For selective imports:

/* globals.css */
@import "react18-loaders/dist/client"; /** required if you are using LoaderContainer */
@import "react18-loaders/dist/server/bars/bars1";

Usage

Using loaders is straightforward.

import { Bars1 } from "react18-loaders/dist/server/bars/bars1";

export default function MyComponent() {
  return someCondition ? <Bars1 /> : <>Something else...</>;
}

For detailed API and options, refer to the API documentation.

Using LoaderContainer

LoaderContainer is a fullscreen component. You can add this component directly in your layout and then use useLoader hook to toggle its visibility.

// layout.tsx
<LoaderContainer />
     ...

// some other page or component
import { useLoader } from "react18-loaders/dist/hooks";

export default MyComponent() {
    const { setLoading } = useLoader();
    useCallback(()=>{
        setLoading(true);
        ...do some work
        setLoading(false);
    }, [])
    ...
}

License

This library is licensed under the MPL-2.0 open-source license.

This package also serves as an example demonstrating how to build and publish a React.js library compatible with React Server Components.

Please consider enrolling in our courses or sponsoring our work.

with 💖 by Mayank Kumar Chaudhari