React18 Loaders
    Preparing search index...

    React18 Loaders

    React18 Loaders

    test Maintainability codecov Version Downloads npm bundle size Gitpod ready-to-code

    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, and Vite

    Star this repository and share it with your friends.

    pnpm add react18-loaders
    

    or

    npm install react18-loaders
    

    or

    yarn add react18-loaders
    
    pnpm add react18-loaders-lite
    

    or

    npm install react18-loaders-lite
    

    or

    yarn add react18-loaders-lite
    

    You need r18gs as a peer-dependency

    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";

    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);
    }, [])
    ...
    }

    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 enroll in our courses or sponsor our work.


    with 💖 by Mayank Kumar Chaudhari