You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"description": "Star [this repository](https://github.com/react18-tools/turborepo-template/) for easy access and to show your support",
7
-
"columnId": "column-todo"
8
-
},
9
-
"gbzyhx0FwFfzRoE-iqVeu": {
10
-
"id": "gbzyhx0FwFfzRoE-iqVeu",
11
-
"description": "🌟 **Update `sripts/rebrand.config.json` if required.**",
12
-
"columnId": "column-todo"
13
-
},
14
-
"Y5__aEZl3Pbxp7r90HKpV": {
15
-
"id": "Y5__aEZl3Pbxp7r90HKpV",
16
-
"description": "Install `pnpm` using `npm i -g pnpm`",
17
-
"columnId": "column-todo"
18
-
},
19
-
"jcpymbi71e702p7n6fwvZ": {
20
-
"id": "jcpymbi71e702p7n6fwvZ",
21
-
"description": "Close this Kanban Board tab and install dependencies using `pnpm`\n - Run `pnpm i` to install dependencies; the `rebrand` script will automatically rebrand the repo, adjust workflows, and create a commit",
22
-
"columnId": "column-todo"
23
-
},
24
-
"jdZxwLymOo7w2eZeNpvsN": {
25
-
"id": "jdZxwLymOo7w2eZeNpvsN",
26
-
"description": "Run `yarn plop`, and follow prompts to generate server or client components for your library",
27
-
"columnId": "column-todo"
28
-
},
29
-
"RX4J5v4y5IOe_ucf8pMRT": {
30
-
"id": "RX4J5v4y5IOe_ucf8pMRT",
31
-
"description": "🌟 Enable [private vulnerability reporting](https://github.com/react18-tools/react-markdown-autolink/security) (For public repo - do this after updating visibility to public)",
32
-
"columnId": "column-todo"
33
-
},
34
-
"EdPbrbJLllUHfZmCS80f7": {
35
-
"id": "EdPbrbJLllUHfZmCS80f7",
36
-
"description": "Set up `CodeCov`\n - Visit Codecov and set up your repo\n - Create [repository secret]((https://github.com/react18-tools/react-markdown-autolink/settings/secrets/actions)) for `CODECOV_TOKEN`",
37
-
"columnId": "column-todo"
38
-
},
39
-
"MLLUsAhCKaKxvEXFY0HSq": {
40
-
"id": "MLLUsAhCKaKxvEXFY0HSq",
41
-
"description": "Set up `CodeClimate`\n - Visit CodeClimate and set up your repo\n - Create [repository secret] for `CC_TEST_REPORTER_ID`\n - Add `*.test.*` to ignore patterns on the website\n - Update Code Climate badge",
42
-
"columnId": "column-todo"
43
-
},
44
-
"gMYfaAh2RABMP8uZRQgNx": {
45
-
"id": "gMYfaAh2RABMP8uZRQgNx",
46
-
"description": "Add `NPM_AUTH_TOKEN` to repository secrets to automate package publishing\n - Log in to your [`npm` account](https://www.npmjs.com/login) and create an automation token\n - Create a new repository secret `NPM_AUTH_TOKEN`",
47
-
"columnId": "column-todo"
48
-
},
49
-
"_BfuX7quWBANpDK1bI7YM": {
50
-
"id": "_BfuX7quWBANpDK1bI7YM",
51
-
"description": "Update description in `lib/package.json`",
52
-
"columnId": "column-todo"
53
-
},
54
-
"dC7QDBLH8BmHUfaYmIt81": {
55
-
"id": "dC7QDBLH8BmHUfaYmIt81",
56
-
"description": "(Optional) Add Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/)",
57
-
"columnId": "column-todo"
58
-
},
59
-
"P_NrSJQ8m91Odgz8E1fS6": {
60
-
"id": "P_NrSJQ8m91Odgz8E1fS6",
61
-
"description": "Create your library and update examples",
62
-
"columnId": "column-todo"
63
-
},
64
4
"1dRWJhy45E1Rq5wZAmPHt": {
65
5
"id": "1dRWJhy45E1Rq5wZAmPHt",
66
6
"description": "Update README as required",
67
7
"columnId": "column-todo"
68
-
},
69
-
"5vS1JNXoMhDl5IBljwh2v": {
70
-
"id": "5vS1JNXoMhDl5IBljwh2v",
71
-
"description": "Set up GitHub pages to deploy docs\n - Go to [repo settings](https://github.com/react18-tools/react-markdown-autolink/settings/pages) -> pages (On the left panel); Select deploy from a branch; Then Select `main` and `/docs`",
72
-
"columnId": "column-todo"
73
-
},
74
-
"55DAZwduwTvlaxaJC8hlX": {
75
-
"id": "55DAZwduwTvlaxaJC8hlX",
76
-
"description": "(Optional) Set up [Deepsource](https://app.deepsource.com/login) for static code analysis",
77
-
"columnId": "column-todo"
78
-
},
79
-
"FDFqCQvLm2mUlnTJ3Gna5": {
80
-
"id": "FDFqCQvLm2mUlnTJ3Gna5",
81
-
"description": "Push your changes/Create PR and see your library being automatically tested and published",
82
-
"columnId": "column-todo"
83
-
},
84
-
"O1qAByMoxhHOR-a_guL91": {
85
-
"id": "O1qAByMoxhHOR-a_guL91",
86
-
"description": "Optionally deploy your examples to Vercel.",
87
-
"columnId": "column-todo"
88
-
},
89
-
"0499BqWDwJ5cxqtC9Nr82": {
90
-
"id": "0499BqWDwJ5cxqtC9Nr82",
91
-
"description": "Feel free to star this template, contribute, and/or sponsor the [`terborepo-template`](https://github.com/react18-tools/turborepo-template) project or my [other open-source work](https://github.com/sponsors/mayank1513)",
92
-
"columnId": "column-todo"
93
-
},
94
-
"IjuAtNquJ4-Ut874rHKIW": {
95
-
"id": "IjuAtNquJ4-Ut874rHKIW",
96
-
"description": "You can also fork the [`terborepo-template`](https://github.com/react18-tools/turborepo-template/fork) and add your package to `scripts/featured.json`\n - If approved, your package will be automatically added to FEATURED.md and also published on the home page of this repo.",
97
-
"columnId": "column-todo"
98
-
},
99
-
"_JiH9RZLmUF5nxD7lBC5B": {
100
-
"id": "_JiH9RZLmUF5nxD7lBC5B",
101
-
"description": "Create a new GitHub repository using this template.\n - Click the `Use this template` button at the top right -> `Create a new repository`\n - Click `Create repository` and wait for the setup workflow to finish rebranding your repo.",
102
-
"columnId": "column-done"
103
-
},
104
-
"t5d22lVYbF7GuQHzv6DRO": {
105
-
"id": "t5d22lVYbF7GuQHzv6DRO",
106
-
"description": "Install and set up Node.js and your IDE (VSCode recommended)",
107
-
"columnId": "column-done"
108
-
},
109
-
"wkDDELNeOfYSVmWI1eWu0": {
110
-
"id": "wkDDELNeOfYSVmWI1eWu0",
111
-
"description": "Install the recommended VSCode extensions:\n - [Trello Kanban](https://marketplace.visualstudio.com/items?itemName=mayank1513.trello-kanban-task-board)",
112
-
"columnId": "column-done"
113
-
},
114
-
"J5lp9I5d12B4tpGKawaqF": {
115
-
"id": "J5lp9I5d12B4tpGKawaqF",
116
-
"description": "Run `node scripts/rebrand.js` to rebrand this repo.",
React Markdown Autolink 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.
5
+
## Automatically Detect and Add Hyperlinks to Your Markdown Content
6
6
7
-
✅ Fully Treeshakable (import from `react-markdown-autolink/client/loader-container`)
7
+
A highly lightweight utility that automatically detects and makes links clickable in Markdown rendered by `react-markdown` or other markdown renderers.
8
8
9
-
✅ Fully TypeScript Supported
9
+
### Key Features
10
10
11
-
✅ Leverages the power of React 18 Server components
11
+
✅ **Automatic Link Detection**: Automatically detects URLs and makes them clickable in your Markdown content.
12
12
13
-
✅ Compatible with all React 18 build systems/tools/frameworks
13
+
✅ **Lightweight**: Minimal overhead, ensuring fast and efficient performance.
14
14
15
-
✅ Documented with [Typedoc](https://react18-tools.github.io/react-markdown-autolink) ([Docs](https://react18-tools.github.io/react-markdown-autolink))
15
+
✅ **Seamless Integration**: Easily integrates with `react-markdown` and other React, Vue, web components, or any other framework/library supporting markdown.
16
16
17
-
✅ Examples for Next.js, Vite, and Remix
17
+
✅ **TypeScript First**: Built with TypeScript, ensuring type safety and developer-friendly experience.
18
18
19
19
> <imgsrc="https://github.com/react18-tools/react-markdown-autolink/blob/main/popper.png?raw=true"style="height: 20px"/> Please consider starring [this repository](https://github.com/react18-tools/react-markdown-autolink) and sharing it with your friends.
20
20
@@ -23,99 +23,33 @@ React Markdown Autolink is a comprehensive library designed to unlock the full p
23
23
### Installation
24
24
25
25
```bash
26
-
$ pnpm add react-markdown-autolink
26
+
pnpm add react-markdown-autolink
27
27
```
28
28
29
29
**_or_**
30
30
31
31
```bash
32
-
$ npm install react-markdown-autolink
32
+
npm install react-markdown-autolink
33
33
```
34
34
35
35
**_or_**
36
36
37
37
```bash
38
-
$ yarn add react-markdown-autolink
38
+
yarn add react-markdown-autolink
39
39
```
40
40
41
-
## Want Lite Version? [](https://www.npmjs.com/package/react-markdown-autolink-lite)[](https://www.npmjs.com/package/react-markdown-autolink-lite)[](https://www.npmjs.com/package/react-markdown-autolink-lite)
41
+
## Usage
42
42
43
-
```bash
44
-
$ pnpm add react-markdown-autolink-lite
45
-
```
46
-
47
-
**or**
48
-
49
-
```bash
50
-
$ npm install react-markdown-autolink-lite
51
-
```
52
-
53
-
**or**
54
-
55
-
```bash
56
-
$ yarn add react-markdown-autolink-lite
57
-
```
58
-
59
-
> You need `r18gs` as a peer-dependency
60
-
61
-
### Import Styles
62
-
63
-
You can import styles globally or within specific components.
For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/react-markdown-autolink).
96
-
97
-
**Using LoaderContainer**
98
-
99
-
`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
100
-
101
-
```tsx
102
-
// layout.tsx
103
-
<LoaderContainer />
104
-
...
105
-
```
47
+
const md =`## Automatically Detect and Add Hyperlinks to Your Markdown Content
0 commit comments