feat: add useTitle hook

packages/hooks/src/useTitle/__tests__/index.test.ts

@@ -0,0 +1,15 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useTitle from '../index';
+
+const setUp = (title: string = 'Page Title') => renderHook(() => useTitle(title));
+
+describe('useTitle', () => {
+  it('should be defined', () => {
+    expect(useTitle).toBeDefined();
+  });
+
+  it('test on methods', async () => {
+    const { result } = setUp();
+    expect(result.current).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,20 @@
+/**
+ * title: Default usage
+ * desc: sets title of the page.
+ *
+ * title.zh-CN: 默认用法
+ * desc.zh-CN: 设置页面标题
+ */
+
+import React from 'react';
+import { useTitle } from 'ahooks';
+
+export default () => {
+  useTitle('Page Title');
+
+  return (
+    <div>
+      <p>sets title of the page.</p>
+    </div>
+  );
+};

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

@@ -0,0 +1,39 @@
+---
+title: useTitle
+nav:
+  title: Hooks
+  path: /hooks
+group:
+  title: State
+  path: /state
+  order: 11
+legacy: /state/use-boolean
+---
+
+# useTitle
+
+A hook that sets title of the page.
+
+## Examples
+
+### Default usage
+
+<code src="./demo/demo1.tsx" />
+
+## API
+
+```javascript
+useTitle(value: string, options?: object);
+```
+
+### Params
+
+| Property | Description                                 | Type                   | Default |
+|---------|----------------------------------------------|------------------------|--------|
+| value | set a title value  | string |       |
+
+### Options
+
+| Property | Description                  | Type   | Default |
+|----------|------------------------------|--------|---------|
+| restoreOnUnmount | Restore the title | boolean | false |

packages/hooks/src/useTitle/index.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+
+export interface Options {
+  restoreOnUnmount?: boolean;
+}
+
+const DEFAULT_OPTIONS: Options = {
+  restoreOnUnmount: false,
+};
+
+export default function useTitle(title: string, options: Options = DEFAULT_OPTIONS) {
+  const titleRef = useRef(document.title);
+
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
+
+  useEffect(() => {
+    return () => {
+      if (options && options.restoreOnUnmount) {
+        document.title = titleRef.current;
+      }
+    };
+  }, []);
+}

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

@@ -0,0 +1,38 @@
+---
+title: useTitle
+nav:
+  title: Hooks
+  path: /hooks
+group:
+  title: State
+  path: /state
+  order: 11
+legacy: /zh-CN/state/use-title
+---
+
+# useTitle
+
+用于设置页面标题的 Hook。
+
+## 代码演示
+
+<code src="./demo/demo1.tsx" />
+
+## API
+
+```javascript
+useTitle(value: string, options?: object);
+```
+
+### Params
+
+| 参数    | 说明                                         | 类型                   | 默认值 |
+|---------|----------------------------------------------|------------------------|--------|
+| value | 页面标题  | string  |       |
+
+
+### Options
+
+| 参数  | 说明                     | 类型   | 默认值 |
+|-------|--------------------------|--------|--------|
+| restoreOnUnmount | 恢复页面标题 | boolean | false |