docs: change demo to 2 cols

.prettierrc

@@ -12,7 +12,8 @@
     {
       "files": ["*.md"],
       "options": {
-        "embeddedLanguageFormatting": "off"
+        "embeddedLanguageFormatting": "off",
+        "proseWrap": "preserve"
       }
     }
   ]

docs/blog/dom.en-US.md

@@ -2,6 +2,8 @@
 title: Hooks of DOM specification
 order: 2
 toc: content
+demo:
+  cols: 2
 ---
 
 Most of the DOM Hooks will receive the `target` parameter, which indicates the element to be processed.

docs/blog/dom.zh-CN.md

@@ -2,6 +2,8 @@
 title: DOM 类 Hooks 使用规范
 order: 2
 toc: content
+demo:
+  cols: 2
 ---
 
 ahooks 大部分 DOM 类 Hooks 都会接收 `target` 参数，表示要处理的元素。

docs/blog/function.en-US.md

@@ -2,6 +2,8 @@
 title: ahooks function specification
 order: 1
 toc: content
+demo:
+  cols: 2
 ---
 
 ahooks tries its best to help everyone avoid the closure problem by specially processing the input and output functions.

docs/blog/function.zh-CN.md

@@ -2,6 +2,8 @@
 title: ahooks 输入输出函数处理规范
 order: 1
 toc: content
+demo:
+  cols: 2
 ---
 
 ahooks 通过对输入输出函数做特殊处理，尽力帮助大家避免闭包问题。

docs/blog/hmr.en-US.md

@@ -2,6 +2,8 @@
 title: React Hooks & react-refresh（HMR）
 order: 3
 toc: content
+demo:
+  cols: 2
 ---
 
 ## What is react-refresh?

docs/blog/hmr.zh-CN.md

@@ -2,6 +2,8 @@
 title: React Hooks & react-refresh（HMR）
 order: 3
 toc: content
+demo:
+  cols: 2
 ---
 
 ## 什么是 react-refresh

docs/blog/ssr.en-US.md

@@ -2,6 +2,8 @@
 title: React Hooks & SSR
 order: 4
 toc: content
+demo:
+  cols: 2
 ---
 
 Server-Side Rendering refers to the page processing technology where the HTML structure of the page is spliced on the server side. Generally used to solve SEO problems and speed up the first screen.

docs/blog/ssr.zh-CN.md

@@ -2,6 +2,8 @@
 title: React Hooks & SSR
 order: 4
 toc: content
+demo:
+  cols: 2
 ---
 
 服务端渲染（Server-Side Rendering），是指由服务侧完成页面的 HTML 结构拼接的页面处理技术。一般用于解决 SEO 问题和首屏加载速度问题。

docs/blog/strict.en-US.md

@@ -2,6 +2,8 @@
 title: React Hooks & strict mode
 order: 5
 toc: content
+demo:
+  cols: 2
 ---
 
 ## What is strict mode

docs/blog/strict.zh-CN.md

@@ -2,6 +2,8 @@
 title: React Hooks & strict mode
 order: 5
 toc: content
+demo:
+  cols: 2
 ---
 
 ## 什么是严格模式

docs/guide/index.en-US.md

@@ -2,6 +2,8 @@
 title: Getting Started
 order: 1
 toc: content
+demo:
+  cols: 2
 ---
 
 ahooks, pronounced [eɪ hʊks], is a high-quality and reliable React Hooks library. In the current React project development process, a set of easy-to-use React Hooks library is indispensable, hope ahooks can be your choice.

docs/guide/index.zh-CN.md

@@ -2,6 +2,8 @@
 title: 快速上手
 order: 1
 toc: content
+demo:
+  cols: 2
 ---
 
 ahooks，发音 [eɪ hʊks]，是一套高质量可靠的 React Hooks 库。在当前 React 项目研发过程中，一套好用的 React Hooks 库是必不可少的，希望 ahooks 能成为您的选择。

docs/guide/upgrade.en-US.md

@@ -2,6 +2,8 @@
 title: v2 to v3
 order: 1
 toc: content
+demo:
+  cols: 2
 ---
 
 Compared with the ahooks v2 version, the changes in the ahooks v3 version mainly include:

docs/guide/upgrade.zh-CN.md

@@ -2,6 +2,8 @@
 title: v2 to v3
 order: 1
 toc: content
+demo:
+  cols: 2
 ---
 
 相较于 ahooks v2 版本，ahooks v3 版本的变更主要包括：

packages/hooks/src/useAntdTable/index.en-US.md

@@ -6,6 +6,8 @@ group:
   order: 2
 order: 1
 toc: content
+demo:
+  cols: 2
 ---
 
 # useAntdTable

packages/hooks/src/useAntdTable/index.zh-CN.md

@@ -6,6 +6,8 @@ group:
   order: 2
 order: 1
 toc: content
+demo:
+  cols: 2
 ---
 
 # useAntdTable

packages/hooks/src/useAsyncEffect/demo/demo2.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { useState } from 'react';
+import { Input } from 'antd';
 import { useAsyncEffect } from 'ahooks';
 
 function mockCheck(val: string): Promise<boolean> {
@@ -33,7 +34,7 @@ export default () => {
 
   return (
     <div>
-      <input
+      <Input
         value={value}
         onChange={(e) => {
           setValue(e.target.value);

packages/hooks/src/useAsyncEffect/index.en-US.md

@@ -6,6 +6,8 @@ group:
   order: 5
 order: 3
 toc: content
+demo:
+  cols: 2
 ---
 
 # useAsyncEffect
@@ -14,12 +16,7 @@ useEffect support async function.
 
 ## 代码演示
 
-### Default usage
-
 <code src="./demo/demo1.tsx"></code>
-
-### Break off
-
 <code src="./demo/demo2.tsx"></code>
 
 ## API

packages/hooks/src/useAsyncEffect/index.zh-CN.md

@@ -6,6 +6,8 @@ group:
   order: 5
 order: 3
 toc: content
+demo:
+  cols: 2
 ---
 
 # useAsyncEffect
@@ -14,12 +16,7 @@ useEffect 支持异步函数。
 
 ## 代码演示
 
-### 基础用法
-
 <code src="./demo/demo1.tsx"></code>
-
-### 中断执行
-
 <code src="./demo/demo2.tsx"></code>
 
 ## API

packages/hooks/src/useBoolean/demo/demo1.tsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { Button, Space } from 'antd';
 import { useBoolean } from 'ahooks';
 
 export default () => {
@@ -15,17 +16,11 @@ export default () => {
   return (
     <div>
       <p>Effects：{JSON.stringify(state)}</p>
-      <p>
-        <button type="button" onClick={toggle}>
-          Toggle
-        </button>
-        <button type="button" onClick={setFalse} style={{ margin: '0 16px' }}>
-          Set false
-        </button>
-        <button type="button" onClick={setTrue}>
-          Set true
-        </button>
-      </p>
+      <Space>
+        <Button onClick={toggle}>Toggle</Button>
+        <Button onClick={setFalse}>Set false</Button>
+        <Button onClick={setTrue}>Set true</Button>
+      </Space>
     </div>
   );
 };

packages/hooks/src/useBoolean/index.en-US.md

@@ -6,6 +6,8 @@ group:
   order: 4
 order: 2
 toc: content
+demo:
+  cols: 2
 ---
 
 # useBoolean
@@ -14,8 +16,6 @@ A hook that elegantly manages boolean state.
 
 ## Examples
 
-### Default usage
-
 <code src="./demo/demo1.tsx"></code>
 
 ## API

packages/hooks/src/useBoolean/index.zh-CN.md

@@ -6,6 +6,8 @@ group:
   order: 4
 order: 2
 toc: content
+demo:
+  cols: 2
 ---
 
 # useBoolean
@@ -14,8 +16,6 @@ toc: content
 
 ## 代码演示
 
-### 基础用法
-
 <code src="./demo/demo1.tsx"></code>
 
 ## API

packages/hooks/src/useClickAway/demo/demo1.tsx

@@ -7,20 +7,20 @@
  */
 
 import React, { useState, useRef } from 'react';
+import { Button } from 'antd';
 import { useClickAway } from 'ahooks';
 
 export default () => {
   const [counter, setCounter] = useState(0);
   const ref = useRef<HTMLButtonElement>(null);
+
   useClickAway(() => {
     setCounter((s) => s + 1);
   }, ref);
 
   return (
     <div>
-      <button ref={ref} type="button">
-        box
-      </button>
+      <Button ref={ref}>box</Button>
       <p>counter: {counter}</p>
     </div>
   );

packages/hooks/src/useClickAway/demo/demo2.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { useState } from 'react';
+import { Button } from 'antd';
 import { useClickAway } from 'ahooks';
 
 export default () => {
@@ -21,9 +22,7 @@ export default () => {
 
   return (
     <div>
-      <button type="button" id="use-click-away-button">
-        box
-      </button>
+      <Button id="use-click-away-button">box</Button>
       <p>counter: {counter}</p>
     </div>
   );

packages/hooks/src/useClickAway/demo/demo3.tsx

@@ -7,24 +7,24 @@
  */
 
 import React, { useState, useRef } from 'react';
+import { Button, Space } from 'antd';
 import { useClickAway } from 'ahooks';
 
 export default () => {
   const [counter, setCounter] = useState(0);
   const ref1 = useRef(null);
   const ref2 = useRef(null);
+
   useClickAway(() => {
     setCounter((s) => s + 1);
   }, [ref1, ref2]);
 
   return (
     <div>
-      <button type="button" ref={ref1}>
-        box1
-      </button>
-      <button type="button" ref={ref2} style={{ marginLeft: 16 }}>
-        box2
-      </button>
+      <Space>
+        <Button ref={ref1}>box1</Button>
+        <Button ref={ref2}>box2</Button>
+      </Space>
       <p>counter: {counter}</p>
     </div>
   );

packages/hooks/src/useClickAway/demo/demo4.tsx

@@ -7,11 +7,13 @@
  */
 
 import React, { useState, useRef } from 'react';
+import { Button } from 'antd';
 import { useClickAway } from 'ahooks';
 
 export default () => {
   const [counter, setCounter] = useState(0);
   const ref = useRef<HTMLButtonElement>(null);
+
   useClickAway(
     () => {
       setCounter((s) => s + 1);
@@ -22,9 +24,7 @@ export default () => {
 
   return (
     <div>
-      <button ref={ref} type="button">
-        box
-      </button>
+      <Button ref={ref}>box</Button>
       <p>counter: {counter}</p>
     </div>
   );