Skip to content

Commit da728e6

Browse files
mayank1513mayank1513
committed
Apply changesets and update CHANGELOG [skip ci]
1 parent 81950f7 commit da728e6

File tree

1 file changed

+63
-77
lines changed

1 file changed

+63
-77
lines changed

‎lib/README.md‎

Lines changed: 63 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,116 @@
1-
# Create R18 Turborepo <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/>
1+
# Create React18 Turborepo <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/>
22

3-
[![test](https://github.com/react18-tools/create-r18-turborepo/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/create-r18-turborepo/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/create-r18-turborepo/maintainability) [![codecov](https://codecov.io/gh/react18-tools/create-r18-turborepo/graph/badge.svg)](https://codecov.io/gh/react18-tools/create-r18-turborepo) [![Version](https://img.shields.io/npm/v/create-r18-turborepo.svg?colorB=green)](https://www.npmjs.com/package/create-r18-turborepo) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/create-r18-turborepo.svg)](https://www.npmjs.com/package/create-r18-turborepo) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/create-r18-turborepo) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
3+
[![test](https://github.com/react18-tools/create-r18-turborepo/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/create-r18-turborepo/actions/workflows/test.yml)
4+
[![Maintainability](https://qlty.sh/gh/react18-tools/projects/create-r18-turborepo/maintainability.svg)](https://qlty.sh/gh/react18-tools/projects/create-r18-turborepo)
5+
[![codecov](https://codecov.io/gh/react18-tools/create-r18-turborepo/graph/badge.svg)](https://codecov.io/gh/react18-tools/create-r18-turborepo)
6+
[![Version](https://img.shields.io/npm/v/create-r18-turborepo.svg?colorB=green)](https://www.npmjs.com/package/create-r18-turborepo)
7+
[![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/create-r18-turborepo.svg)](https://www.npmjs.com/package/create-r18-turborepo)
8+
![npm bundle size](https://img.shields.io/bundlephobia/minzip/create-r18-turborepo)
49

5-
Create R18 Turborepo 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.
10+
🚀 **Bootstrap your next Turborepo project in seconds** — powered by [react18-tools/turborepo-template](https://github.com/react18-tools/turborepo-template).
11+
This CLI wraps `create-turbo` and automatically runs `pnpm rebrand` to set up your project for immediate development.
612

7-
✅ Fully Treeshakable (import from `create-r18-turborepo/client/loader-container`)
13+
---
814

9-
✅ Fully TypeScript Supported
15+
## ✨ Features
1016

11-
✅ Leverages the power of React 18 Server components
17+
- 📦 One-liner project creation (`pnpm create r18 my-app`)
18+
- 👨‍💻 Interactive mode — prompts for project name if not provided
19+
- 🎨 Auto-runs `pnpm rebrand` to customize boilerplate naming
20+
- ⚡ Works with **pnpm** by default
21+
- 🔗 Built on top of official `create-turbo` flow
1222

13-
✅ Compatible with all React 18 build systems/tools/frameworks
23+
---
1424

15-
✅ Documented with [Typedoc](https://react18-tools.github.io/create-r18-turborepo) ([Docs](https://react18-tools.github.io/create-r18-turborepo))
25+
## 📦 Installation
1626

17-
✅ Examples for Next.js, and Vite
27+
Run with `pnpx` or `pnpm create` — no need to install globally.
1828

19-
> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Star [this repository](https://github.com/react18-tools/create-r18-turborepo) and share it with your friends.
20-
21-
## Getting Started
22-
23-
### Installation
29+
### Canonical package (recommended)
2430

2531
```bash
26-
pnpm add create-r18-turborepo
32+
pnpx create-r18-turborepo-template my-app
2733
```
2834

29-
**_or_**
35+
### Short aliases (same package, same version)
3036

3137
```bash
32-
npm install create-r18-turborepo
38+
pnpm create r18 my-app
39+
pnpx create-r18 my-app
40+
pnpx create-r18-turbo my-app
41+
pnpx turborepo-template-init my-app
3342
```
3443

35-
**_or_**
44+
👉 For docs and issues, always refer to **`create-r18-turborepo-template`**.
3645

37-
```bash
38-
yarn add create-r18-turborepo
39-
```
46+
---
47+
48+
## 🚀 Usage
4049

41-
## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/create-r18-turborepo-lite)](https://www.npmjs.com/package/create-r18-turborepo-lite) [![Version](https://img.shields.io/npm/v/create-r18-turborepo-lite.svg?colorB=green)](https://www.npmjs.com/package/create-r18-turborepo-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/create-r18-turborepo-lite.svg)](https://www.npmjs.com/package/create-r18-turborepo-lite)
50+
### Create a project with a name
4251

4352
```bash
44-
pnpm add create-r18-turborepo-lite
53+
pnpm create r18 my-app
4554
```
4655

47-
**or**
56+
### Interactive (prompts for name)
4857

4958
```bash
50-
npm install create-r18-turborepo-lite
59+
pnpm create r18
5160
```
5261

53-
**or**
62+
👉 If you press Enter without typing, it defaults to:
5463

55-
```bash
56-
yarn add create-r18-turborepo-lite
64+
```
65+
react18-tools-turborepo-template
5766
```
5867

59-
> You need `r18gs` as a peer-dependency
60-
61-
### Import Styles
68+
---
6269

63-
You can import styles globally or within specific components.
70+
## 🔧 What it does
6471

65-
```css
66-
/* globals.css */
67-
@import "create-r18-turborepo/dist";
68-
```
72+
1. Runs `create-turbo` with the **react18-tools/turborepo-template** example.
73+
2. Uses **pnpm** as the package manager.
74+
3. Creates the project folder with your chosen name.
75+
4. Runs `pnpm rebrand` inside the project to customize boilerplate.
6976

70-
```tsx
71-
// layout.tsx
72-
import "create-r18-turborepo/dist/index.css";
73-
```
77+
---
7478

75-
For selective imports:
79+
## 🛠 Example
7680

77-
```css
78-
/* globals.css */
79-
@import "create-r18-turborepo/dist/client"; /** required if you are using LoaderContainer */
80-
@import "create-r18-turborepo/dist/server/bars/bars1";
81+
```bash
82+
pnpm create r18 turbo-demo
8183
```
8284

83-
### Usage
85+
Output:
8486

85-
Using loaders is straightforward.
87+
```
88+
🔨 Creating turborepo project: turbo-demo
89+
...
90+
🚀 Rebranding project in turbo-demo
91+
✅ Done! Your project is ready in: /path/to/turbo-demo
92+
```
8693

87-
```tsx
88-
import { Bars1 } from "create-r18-turborepo/dist/server/bars/bars1";
94+
---
8995

90-
export default function MyComponent() {
91-
return someCondition ? <Bars1 /> : <>Something else...</>;
92-
}
93-
```
96+
## 📚 Related
9497

95-
For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/create-r18-turborepo).
98+
- [Turborepo Docs](https://turbo.build/repo/docs)
99+
- [react18-tools/turborepo-template](https://github.com/react18-tools/turborepo-template)
96100

97-
**Using LoaderContainer**
101+
---
98102

99-
`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
103+
## 🤝 Contributing
100104

101-
```tsx
102-
// layout.tsx
103-
<LoaderContainer />
104-
...
105-
```
105+
PRs and feedback are welcome!
106+
If you use this tool at your company, please consider [starring the template repo](https://github.com/react18-tools/turborepo-template) ⭐
106107

107-
```tsx
108-
// some other page or component
109-
import { useLoader } from "create-r18-turborepo/dist/hooks";
110-
111-
export default MyComponent() {
112-
const { setLoading } = useLoader();
113-
useCallback(()=>{
114-
setLoading(true);
115-
...do some work
116-
setLoading(false);
117-
}, [])
118-
...
119-
}
120-
```
108+
---
121109

122110
## License
123111

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

126-
127-
128114
> <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.
129115
130116
<hr />

0 commit comments

Comments
 (0)