docs(utils): add docs

pages/zh-cn/components/use-body-scroll.mdx

@@ -0,0 +1,60 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Button, Spacer, Utils, Text, Link } from 'components'
+
+export const meta = {
+  title: '锁定滚动 useBodyScroll',
+  group: '工具包',
+}
+
+## Use body scroll / 工具包
+
+禁用 `Body` 或其他任何元素的滚动，这在显示弹窗或菜单时非常有帮助。
+
+这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
+
+<Spacer y={1.5} />
+
+### 引入工具
+
+```jsx
+import { Utils } from '@zeit-ui/react'
+const { useBodyScroll } = Utils
+```
+
+<Playground
+  desc="点击按钮以锁定滚动."
+  scope={{ Button, Spacer, Utils, Text }}
+  code={`
+() => {
+  const { useBodyScroll } = Utils
+  const [hidden, setHidden] = useBodyScroll()
+  return (
+    <>
+      <Text small b type={hidden ? 'error' : 'default'}>{hidden ? '已禁用滚动。' : '当前可以滚动。'}</Text>
+      <Spacer y={.75} />
+      <Button size="small" type="success" auto onClick={() => setHidden(true)}>禁用滚动</Button>
+      <Spacer y={.5} />
+      <Button size="small" type="secondary" auto onClick={() => setHidden(false)}>重置</Button>
+    </>
+  )
+}
+`} />
+
+<Attributes edit="/pages/zh-cn/components/use-body-scroll.mdx">
+<Attributes.Title>useBodyScroll</Attributes.Title>
+
+```ts
+type BodyScrollOptions = {
+  scrollLayer: boolean  //  指定元素内部是否需要滚动
+}
+
+const useBodyScroll = (
+  elementRef?: RefObject<HTMLElement> | null,
+  options?: BodyScrollOptions,
+) => [boolean, Dispatch<SetStateAction<boolean>>]
+
+```
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>

pages/zh-cn/components/use-click-away.mdx

@@ -0,0 +1,53 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Utils, Link, Card } from 'components'
+
+export const meta = {
+  title: '点击他处 useClickAway',
+  group: '工具包',
+}
+
+## Use click away / 点击他处触发事件
+
+检测点击事件是否在元素之外。
+
+这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
+
+<Spacer y={1.5} />
+
+### 引入工具
+
+```jsx
+import { Utils } from '@zeit-ui/react'
+const { useClickAway } = Utils
+```
+
+<Playground
+  desc="点击绿色块外部才能触发回调。"
+  scope={{ Utils }}
+  code={`
+() => {
+  const { useClickAway } = Utils
+  const ref = React.useRef()
+  const [count, setCount] = React.useState(0)
+  useClickAway(ref, () => setCount(last => last + 1))
+  return (
+    <div ref={ref} style={{ background: 'green', display: 'flex' }}>
+      <p style={{ fontSize: '2rem' }}>{count}</p>
+    </div>
+  )
+}
+`} />
+
+<Attributes edit="/pages/zh-cn/components/use-click-away.mdx">
+<Attributes.Title>useClickAway</Attributes.Title>
+
+```ts
+const useClickAway = (
+  ref: MutableRefObject<HTMLElement | null>,
+  handler: (event: Event) => void,
+) => void
+```
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>

pages/zh-cn/components/use-clipboard.mdx

@@ -0,0 +1,62 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Utils, Link, Button, useToasts } from 'components'
+
+export const meta = {
+  title: '剪切板 useClipboard',
+  group: '工具包',
+}
+
+## Use clipboard / 拷贝至剪切板
+
+拷贝字符串到剪切板。
+
+这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
+
+<Spacer y={1.5} />
+
+### 引入工具
+
+```jsx
+import { Utils } from '@zeit-ui/react'
+const { useClipboard } = Utils
+```
+
+<Playground
+  scope={{ Utils, Button, useToasts }}
+  code={`
+() => {
+  const [, setToast] = useToasts()
+  const { useClipboard } = Utils
+  const { copy } = useClipboard()
+  const handler = () => {
+    copy('hello, zeit-ui')
+    setToast({ text: '文字已拷贝。' })
+  }
+  return (
+    <>
+      <Button size="small" auto onClick={handler}>点击拷贝</Button>
+    </>
+  )
+}
+`} />
+
+<Attributes edit="/pages/zh-cn/components/use-clipboard.mdx">
+<Attributes.Title>useClipboard</Attributes.Title>
+
+```ts
+type UseClipboardOptions = {
+  onError: Function
+}
+
+type CopyResult = {
+ copy: (text: string) => void
+}
+
+const useClickAway = (
+  options?: UseClipboardOptions
+) => CopyResult
+```
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>

pages/zh-cn/components/use-current-state.mdx

@@ -0,0 +1,65 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Utils, Link, Button } from 'components'
+
+export const meta = {
+  title: ' 当前值 useCurrentState',
+  group: '工具包',
+}
+
+## Use current state / 获取当前值
+
+在函数式组件内获取 **最新的值**。默认场景下，React 函数式组件只能获取渲染当时 `state` 的值，这并非是最新的。
+
+这是一个获取最新值的小工具，它在你进行像 `setTimeout` 等异步工作时会非常有用。但如果你喜欢更大的解决方案，
+请试试 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>。
+
+这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
+
+<Spacer y={1.5} />
+
+### 引入工具
+
+```jsx
+import { Utils } from '@zeit-ui/react'
+const { useCurrentState } = Utils
+```
+
+<Playground
+  scope={{ Utils, Button }}
+  code={`
+() => {
+  const { useCurrentState } = Utils
+  const [value, setValue] = React.useState(0)
+  const [value2, setValue2, value2Ref] = useCurrentState(0)
+  const handler = () => {
+    setValue(pre => pre + 1)
+    setValue2(pre => pre + 1)
+    const str = \`渲染时的值: \${value}， 最新的值: \${value2Ref.current}\`
+    alert(str)
+  }
+  return (
+    <>
+      <Button size="small" auto onClick={handler}>点击显示</Button>
+    </>
+  )
+}
+`} />
+
+<Attributes edit="/pages/zh-cn/components/use-current-state.mdx">
+<Attributes.Title>useCurrentState</Attributes.Title>
+
+```ts
+type CurrentStateType<S> = [
+  S,
+  Dispatch<SetStateAction<S>>,
+  MutableRefObject<S>,
+]
+
+const useCurrentState<S> = (
+  initialState: S,
+) => CurrentStateType<S>
+```
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>