diff --git a/.changeset/chilly-socks-act.md b/.changeset/chilly-socks-act.md
new file mode 100644
index 000000000..970880975
--- /dev/null
+++ b/.changeset/chilly-socks-act.md
@@ -0,0 +1,6 @@
+---
+"@suspensive/react-query": patch
+"@suspensive/react": patch
+---
+
+docs(docusaurus): add npm2yarn plugin
diff --git a/packages/react-query/README.ko.md b/packages/react-query/README.ko.md
index c774bd311..2377936a6 100644
--- a/packages/react-query/README.ko.md
+++ b/packages/react-query/README.ko.md
@@ -10,14 +10,6 @@
@suspensive/react-query 는 npm에 있습니다. 최신 안정버전을 설치하기 위해 아래 커맨드를 실행하세요
-```shell
+```shell npm2yarn
npm install @suspensive/react-query
```
-
-```shell
-pnpm add @suspensive/react-query
-```
-
-```shell
-yarn add @suspensive/react-query
-```
diff --git a/packages/react-query/README.md b/packages/react-query/README.md
index c3926e5e4..ab7aba0cb 100644
--- a/packages/react-query/README.md
+++ b/packages/react-query/README.md
@@ -10,14 +10,6 @@
@suspensive/react-query lives in npm. To install the latest stable version, run the following command
-```shell
+```shell npm2yarn
npm install @suspensive/react-query
```
-
-```shell
-pnpm add @suspensive/react-query
-```
-
-```shell
-yarn add @suspensive/react-query
-```
diff --git a/packages/react-query/src/QueryErrorResetBoundary.en.mdx b/packages/react-query/src/QueryErrorResetBoundary.en.mdx
index 812ef5595..1bfd432de 100644
--- a/packages/react-query/src/QueryErrorResetBoundary.en.mdx
+++ b/packages/react-query/src/QueryErrorResetBoundary.en.mdx
@@ -49,18 +49,10 @@ const Example = () => (
Below apis (QueryErrorBoundary, QueryAsyncBoundary) have peerDependency on @suspensive/react's ErrorBoundary, AsyncBoundary.
So if you want to use these, you must install @suspensive/react first.
-```shell
+```shell npm2yarn
npm install @suspensive/react @suspensive/react-query
```
-```shell
-pnpm add @suspensive/react @suspensive/react-query
-```
-
-```shell
-yarn add @suspensive/react @suspensive/react-query
-```
-
@suspensive/react-query provide QueryErrorBoundary, QueryAsyncBoundary to reduce repeating implementation like using QueryErrorResetBoundary + ErrorBoundary, QueryErrorResetBoundary + AsyncBoundary.
## QueryErrorBoundary
diff --git a/packages/react-query/src/QueryErrorResetBoundary.ko.mdx b/packages/react-query/src/QueryErrorResetBoundary.ko.mdx
index 0d053203e..a82d41f56 100644
--- a/packages/react-query/src/QueryErrorResetBoundary.ko.mdx
+++ b/packages/react-query/src/QueryErrorResetBoundary.ko.mdx
@@ -49,18 +49,10 @@ const Example = () => (
아래 api(QueryErrorBoundary, QueryAsyncBoundary)는 @suspensive/react의 ErrorBoundary, AsyncBoundary에 peerDependency를 갖습니다.
따라서 이를 사용하려면 먼저 @suspensive/react를 설치해야 합니다.
-```shell
+```shell npm2yarn
npm install @suspensive/react @suspensive/react-query
```
-```shell
-pnpm add @suspensive/react @suspensive/react-query
-```
-
-```shell
-yarn add @suspensive/react @suspensive/react-query
-```
-
@suspensive/react-query는 QueryErrorResetBoundary + ErrorBoundary, QueryErrorResetBoundary + AsyncBoundary와 같은 반복되는 구현을 줄이기 위해 QueryErrorBoundary, QueryAsyncBoundary를 제공합니다.
## QueryErrorBoundary
diff --git a/packages/react/README.ko.md b/packages/react/README.ko.md
index 031cb5b47..4995a9c98 100644
--- a/packages/react/README.ko.md
+++ b/packages/react/README.ko.md
@@ -10,14 +10,6 @@
@suspensive/react 는 npm에 있습니다. 최신 안정버전을 설치하기 위해 아래 커맨드를 실행하세요
-```shell
+```shell npm2yarn
npm install @suspensive/react
```
-
-```shell
-pnpm add @suspensive/react
-```
-
-```shell
-yarn add @suspensive/react
-```
diff --git a/packages/react/README.md b/packages/react/README.md
index 654a61ed3..a3276e8f6 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -10,14 +10,6 @@
@suspensive/react lives in npm. To install the latest stable version, run the following command
-```shell
+```shell npm2yarn
npm install @suspensive/react
```
-
-```shell
-pnpm add @suspensive/react
-```
-
-```shell
-yarn add @suspensive/react
-```
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bcbf20d72..75489e90e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -239,6 +239,9 @@ importers:
'@docusaurus/preset-classic':
specifier: 2.4.1
version: 2.4.1(@algolia/client-search@4.18.0)(@types/react@18.2.0)(esbuild@0.18.17)(eslint@8.42.0)(react-dom@17.0.2)(react@17.0.2)(typescript@5.2.2)
+ '@docusaurus/remark-plugin-npm2yarn':
+ specifier: ^2.4.3
+ version: 2.4.3
'@mdx-js/react':
specifier: ^1.6.22
version: 1.6.22(react@17.0.2)
@@ -2639,6 +2642,15 @@ packages:
prop-types: 15.8.1
react: 17.0.2
+ /@docusaurus/remark-plugin-npm2yarn@2.4.3:
+ resolution: {integrity: sha512-gBSzRPls2Nc1M+X8hTXLUJQ8mk+pTet7CGeTtgV02Hsk1G22yHYoCBW3r1aIqR27mVUHW9O5X4AN/Dt8x8Ifkg==}
+ engines: {node: '>=16.14'}
+ dependencies:
+ npm-to-yarn: 2.1.0
+ tslib: 2.5.2
+ unist-util-visit: 2.0.3
+ dev: false
+
/@docusaurus/theme-classic@2.4.1(esbuild@0.18.17)(eslint@8.42.0)(react-dom@17.0.2)(react@17.0.2)(typescript@5.2.2):
resolution: {integrity: sha512-Rz0wKUa+LTW1PLXmwnf8mn85EBzaGSt6qamqtmnh9Hflkc+EqiYMhtUJeLdV+wsgYq4aG0ANc+bpUDpsUhdnwg==}
engines: {node: '>=16.14'}
@@ -10399,6 +10411,11 @@ packages:
path-key: 4.0.0
dev: true
+ /npm-to-yarn@2.1.0:
+ resolution: {integrity: sha512-2C1IgJLdJngq1bSER7K7CGFszRr9s2rijEwvENPEgI0eK9xlD3tNwDc0UJnRj7FIT2aydWm72jB88uVswAhXHA==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ dev: false
+
/nprogress@0.2.0:
resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
diff --git a/websites/docs/docusaurus.config.js b/websites/docs/docusaurus.config.js
index 0d8868159..3cafa92a7 100644
--- a/websites/docs/docusaurus.config.js
+++ b/websites/docs/docusaurus.config.js
@@ -57,6 +57,15 @@ const config = {
: defaultUrl
return editUrl
},
+ remarkPlugins: [
+ [
+ require('@docusaurus/remark-plugin-npm2yarn'),
+ {
+ sync: true,
+ converters: ['pnpm', 'yarn'],
+ },
+ ],
+ ],
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
diff --git a/websites/docs/intro/installation.en.md b/websites/docs/intro/installation.en.md
index a5a88cc9e..b1514aba0 100644
--- a/websites/docs/intro/installation.en.md
+++ b/websites/docs/intro/installation.en.md
@@ -3,26 +3,8 @@ sidebar_position: 3
title: Installation
---
-### npm
-
The Suspensive package lives in npm. To install the latest stable version, run the following command
-```shell
+```shell npm2yarn
npm install @suspensive/react
```
-
-### pnpm
-
-Or if you're using pnpm:
-
-```shell
-pnpm add @suspensive/react
-```
-
-### yarn
-
-Or if you're using yarn:
-
-```shell
-yarn add @suspensive/react
-```
diff --git a/websites/docs/intro/installation.ko.md b/websites/docs/intro/installation.ko.md
index d8e518860..546eefb25 100644
--- a/websites/docs/intro/installation.ko.md
+++ b/websites/docs/intro/installation.ko.md
@@ -3,26 +3,8 @@ sidebar_position: 3
title: 설치하기
---
-### npm
-
@suspensive/react는 npm에 있습니다. 최신 안정버전을 설치하기 위해 아래 커맨드를 실행하세요
-```shell
+```shell npm2yarn
npm install @suspensive/react
```
-
-### pnpm
-
-혹은 pnpm을 사용한다면:
-
-```shell
-pnpm add @suspensive/react
-```
-
-### yarn
-
-혹은 yarn을 사용한다면:
-
-```shell
-yarn add @suspensive/react
-```
diff --git a/websites/docs/package.json b/websites/docs/package.json
index 51d0e0e1e..fb7c7eddf 100644
--- a/websites/docs/package.json
+++ b/websites/docs/package.json
@@ -36,6 +36,7 @@
"dependencies": {
"@docusaurus/core": "2.4.1",
"@docusaurus/preset-classic": "2.4.1",
+ "@docusaurus/remark-plugin-npm2yarn": "^2.4.3",
"@mdx-js/react": "^1.6.22",
"clsx": "^1.2.1",
"prism-react-renderer": "^1.3.5",