Skip to content

Commit 3ae3cb3

Browse files
mayank1513mayank1513
committed
Apply changesets and update CHANGELOG
1 parent 3a1df08 commit 3ae3cb3

File tree

1 file changed

+20
-86
lines changed

1 file changed

+20
-86
lines changed

‎lib/README.md

Lines changed: 20 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
# React Markdown Autolink <img src="https://github.com/react18-tools/react-markdown-autolink/blob/main/popper.png?raw=true" style="height: 40px"/>
22

3-
[![test](https://github.com/react18-tools/react-markdown-autolink/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react-markdown-autolink/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/react-markdown-autolink/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react-markdown-autolink/graph/badge.svg)](https://codecov.io/gh/react18-tools/react-markdown-autolink) [![Version](https://img.shields.io/npm/v/react-markdown-autolink.svg?colorB=green)](https://www.npmjs.com/package/react-markdown-autolink) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react-markdown-autolink.svg)](https://www.npmjs.com/package/react-markdown-autolink) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-markdown-autolink) [![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/react-markdown-autolink/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react-markdown-autolink/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/5ba946f4d45271583a1f/maintainability)](https://codeclimate.com/github/react18-tools/react-markdown-autolink/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react-markdown-autolink/graph/badge.svg)](https://codecov.io/gh/react18-tools/react-markdown-autolink) [![Version](https://img.shields.io/npm/v/react-markdown-autolink.svg?colorB=green)](https://www.npmjs.com/package/react-markdown-autolink) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react-markdown-autolink.svg)](https://www.npmjs.com/package/react-markdown-autolink) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-markdown-autolink) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
44

5-
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
66

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.
88

9-
✅ Fully TypeScript Supported
9+
### Key Features
1010

11-
✅ Leverages the power of React 18 Server components
11+
✅ **Automatic Link Detection**: Automatically detects URLs and makes them clickable in your Markdown content.
1212

13-
✅ Compatible with all React 18 build systems/tools/frameworks
13+
✅ **Lightweight**: Minimal overhead, ensuring fast and efficient performance.
1414

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.
1616

17-
✅ Examples for Next.js, Vite, and Remix
17+
✅ **TypeScript First**: Built with TypeScript, ensuring type safety and developer-friendly experience.
1818

1919
> <img src="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.
2020
@@ -23,99 +23,33 @@ React Markdown Autolink is a comprehensive library designed to unlock the full p
2323
### Installation
2424

2525
```bash
26-
$ pnpm add react-markdown-autolink
26+
pnpm add react-markdown-autolink
2727
```
2828

2929
**_or_**
3030

3131
```bash
32-
$ npm install react-markdown-autolink
32+
npm install react-markdown-autolink
3333
```
3434

3535
**_or_**
3636

3737
```bash
38-
$ yarn add react-markdown-autolink
38+
yarn add react-markdown-autolink
3939
```
4040

41-
## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-markdown-autolink-lite)](https://www.npmjs.com/package/react-markdown-autolink-lite) [![Version](https://img.shields.io/npm/v/react-markdown-autolink-lite.svg?colorB=green)](https://www.npmjs.com/package/react-markdown-autolink-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react-markdown-autolink-lite.svg)](https://www.npmjs.com/package/react-markdown-autolink-lite)
41+
## Usage
4242

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.
64-
65-
```css
66-
/* globals.css */
67-
@import "react-markdown-autolink/dist";
68-
```
43+
```ts
44+
import Markdown from "react-markdown";
45+
import { autoLinkMd } from "react-markdown-autolink";
6946

70-
```tsx
71-
// layout.tsx
72-
import "react-markdown-autolink/dist/index.css";
73-
```
74-
75-
For selective imports:
76-
77-
```css
78-
/* globals.css */
79-
@import "react-markdown-autolink/dist/client"; /** required if you are using LoaderContainer */
80-
@import "react-markdown-autolink/dist/server/bars/bars1";
81-
```
82-
83-
### Usage
84-
85-
Using loaders is straightforward.
86-
87-
```tsx
88-
import { Bars1 } from "react-markdown-autolink/dist/server/bars/bars1";
89-
90-
export default function MyComponent() {
91-
return someCondition ? <Bars1 /> : <>Something else...</>;
92-
}
93-
```
94-
95-
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
48+
https://github.com/react18-tools/react-markdown-autolink
49+
`;
10650

107-
```tsx
108-
// some other page or component
109-
import { useLoader } from "react-markdown-autolink/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-
...
51+
export default function Page(): JSX.Element {
52+
return <Markdown>{autoLinkMd(md)}</Markdown>;
11953
}
12054
```
12155

0 commit comments

Comments
 (0)