Optional
rgb: [number, number, number]React Mouse Trail 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 react-mouse-trail/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.
+
$ pnpm add react-mouse-trail
+
+
+or
+$ npm install react-mouse-trail
+
+
+or
+$ yarn add react-mouse-trail
+
+
+$ pnpm add react-mouse-trail-lite
+
+
+or
+$ npm install react-mouse-trail-lite
+
+
+or
+$ yarn add react-mouse-trail-lite
+
+
+++You need
+r18gs
as a peer-dependency
You can import styles globally or within specific components.
+/* globals.css */
@import "react-mouse-trail/dist";
+
+
+// layout.tsx
import "react-mouse-trail/dist/index.css";
+
+
+For selective imports:
+/* globals.css */
@import "react-mouse-trail/dist/client"; /** required if you are using LoaderContainer */
@import "react-mouse-trail/dist/server/bars/bars1";
+
+
+Using loaders is straightforward.
+import { Bars1 } from "react-mouse-trail/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 "react-mouse-trail/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.
+++Please consider enrolling in our courses or sponsoring our work.
+
with 💖 by Mayank Kumar Chaudhari
Example
+ +