Merge pull request #67 from react18-tools/md-docs

Md docs

Author: mayank1513

docs/.nojekyll

@@ -1 +0,0 @@
-TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

docs/README.md

@@ -0,0 +1,136 @@
+**React18 Loaders**
+
+***
+
+# React18 Loaders <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/>
+
+[![test](https://github.com/react18-tools/turborepo-template/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/turborepo-template/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/turborepo-template/maintainability) [![codecov](https://codecov.io/gh/react18-tools/turborepo-template/graph/badge.svg)](https://codecov.io/gh/react18-tools/turborepo-template) [![Version](https://img.shields.io/npm/v/react18-loaders.svg?colorB=green)](https://www.npmjs.com/package/react18-loaders) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react18-loaders.svg)](https://www.npmjs.com/package/react18-loaders) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react18-loaders) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
+
+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](https://react18-tools.github.io/turborepo-template) ([Docs](https://react18-tools.github.io/turborepo-template))
+
+✅ Examples for Next.js, and Vite
+
+> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Star [this repository](https://github.com/react18-tools/turborepo-template) and share it with your friends.
+
+## Getting Started
+
+### Installation
+
+```bash
+pnpm add react18-loaders
+```
+
+**_or_**
+
+```bash
+npm install react18-loaders
+```
+
+**_or_**
+
+```bash
+yarn add react18-loaders
+```
+
+## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react18-loaders-lite)](https://www.npmjs.com/package/react18-loaders-lite) [![Version](https://img.shields.io/npm/v/react18-loaders-lite.svg?colorB=green)](https://www.npmjs.com/package/react18-loaders-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react18-loaders-lite.svg)](https://www.npmjs.com/package/react18-loaders-lite)
+
+```bash
+pnpm add react18-loaders-lite
+```
+
+**or**
+
+```bash
+npm install react18-loaders-lite
+```
+
+**or**
+
+```bash
+yarn add react18-loaders-lite
+```
+
+> You need `r18gs` as a peer-dependency
+
+### Import Styles
+
+You can import styles globally or within specific components.
+
+```css
+/* globals.css */
+@import "react18-loaders/dist";
+```
+
+```tsx
+// layout.tsx
+import "react18-loaders/dist/index.css";
+```
+
+For selective imports:
+
+```css
+/* 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.
+
+```tsx
+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](https://react18-tools.github.io/turborepo-template).
+
+**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.
+
+```tsx
+// layout.tsx
+<LoaderContainer />
+	 ...
+```
+
+```tsx
+// 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.
+
+> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Please enroll in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsor](https://github.com/sponsors/mayank1513) our work.
+
+<hr />
+
+<p align="center" style="text-align:center">with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p>