(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[118,4],{D1rK:function(e,n,t){"use strict";t.r(n);var r=t("q1tI"),o=t.n(r),s=t("dEAq"),a=t("0zqC"),i=t("ZpkN"),u=t("JjdP"),c=o.a.memo(u["default"]["usetitle-demo1"].component);n["default"]=()=>(o.a.useEffect((()=>{window.location.hash&&s["AnchorLink"].scrollToAnchor(decodeURIComponent(window.location.hash.slice(1)))}),[]),o.a.createElement(o.a.Fragment,null,o.a.createElement(o.a.Fragment,null,o.a.createElement("div",{className:"markdown"},o.a.createElement("h1",{id:"usetitle"},o.a.createElement(s["AnchorLink"],{to:"#usetitle","aria-hidden":"true",tabIndex:-1},o.a.createElement("span",{className:"icon icon-link"})),"useTitle"),o.a.createElement("p",null,"A hook that sets title of the page."),o.a.createElement("h2",{id:"examples"},o.a.createElement(s["AnchorLink"],{to:"#examples","aria-hidden":"true",tabIndex:-1},o.a.createElement("span",{className:"icon icon-link"})),"Examples"),o.a.createElement("h3",{id:"default-usage"},o.a.createElement(s["AnchorLink"],{to:"#default-usage","aria-hidden":"true",tabIndex:-1},o.a.createElement("span",{className:"icon icon-link"})),"Default usage")),o.a.createElement(a["default"],u["default"]["usetitle-demo1"].previewerProps,o.a.createElement(c,null)),o.a.createElement("div",{className:"markdown"},o.a.createElement("h2",{id:"api"},o.a.createElement(s["AnchorLink"],{to:"#api","aria-hidden":"true",tabIndex:-1},o.a.createElement("span",{className:"icon icon-link"})),"API"),o.a.createElement(i["a"],{code:"useTitle(value: string, options?: Options);",lang:"typescript"}),o.a.createElement("h3",{id:"params"},o.a.createElement(s["AnchorLink"],{to:"#params","aria-hidden":"true",tabIndex:-1},o.a.createElement("span",{className:"icon icon-link"})),"Params"),o.a.createElement("table",null,o.a.createElement("thead",null,o.a.createElement("tr",null,o.a.createElement("th",null,"Property"),o.a.createElement("th",null,"Description"),o.a.createElement("th",null,"Type"),o.a.createElement("th",null,"Default"))),o.a.createElement("tbody",null,o.a.createElement("tr",null,o.a.createElement("td",null,"value"),o.a.createElement("td",null,"set a title value"),o.a.createElement("td",null,o.a.createElement("code",null,"string")),o.a.createElement("td",null,"-")))),o.a.createElement("h3",{id:"options"},o.a.createElement(s["AnchorLink"],{to:"#options","aria-hidden":"true",tabIndex:-1},o.a.createElement("span",{className:"icon icon-link"})),"Options"),o.a.createElement("table",null,o.a.createElement("thead",null,o.a.createElement("tr",null,o.a.createElement("th",null,"Property"),o.a.createElement("th",null,"Description"),o.a.createElement("th",null,"Type"),o.a.createElement("th",null,"Default"))),o.a.createElement("tbody",null,o.a.createElement("tr",null,o.a.createElement("td",null,"restoreOnUnmount"),o.a.createElement("td",null,"Restore the title"),o.a.createElement("td",null,o.a.createElement("code",null,"boolean")),o.a.createElement("td",null,o.a.createElement("code",null,"false")))))))))},JjdP:function(e,n,t){"use strict";t.r(n);var r=t("9og8"),o=t("WmNS"),s=t.n(o),a=t("LtsZ"),i="import React from 'react';\nimport { Button, Col, Form, Input, Row, Table, Select } from 'antd';\nimport { WrappedFormUtils } from 'antd/lib/form/Form';\nimport { useAntdTable } from 'ahooks';\nimport { PaginatedParams } from 'ahooks/lib/useAntdTable';\n\nconst { Option } = Select;\n\ninterface Item {\n  name: {\n    last: string;\n  };\n  email: string;\n  phone: string;\n  gender: 'male' | 'female';\n}\n\ninterface Result {\n  total: number;\n  list: Item[];\n}\n\ninterface AppListProps {\n  form: WrappedFormUtils;\n}\n\nconst getTableData = (\n  { current, pageSize }: PaginatedParams[0],\n  formData: Object,\n): Promise<Result> => {\n  let query = `page=${current}&size=${pageSize}`;\n  Object.entries(formData).forEach(([key, value]) => {\n    if (value) {\n      query += `&${key}=${value}`;\n    }\n  });\n\n  return fetch(`https://randomuser.me/api?results=55&${query}`)\n    .then((res) => res.json())\n    .then((res) => ({\n      total: res.info.results,\n      list: res.results,\n    }));\n};\n\nconst AppList = (props: AppListProps) => {\n  const { getFieldDecorator } = props.form;\n  const { tableProps, search, loading } = useAntdTable(getTableData, {\n    defaultPageSize: 5,\n    form: props.form,\n  });\n\n  console.log('loading', loading);\n\n  const { type, changeType, submit, reset } = search;\n\n  const columns = [\n    {\n      title: 'name',\n      dataIndex: 'name.last',\n    },\n    {\n      title: 'email',\n      dataIndex: 'email',\n    },\n    {\n      title: 'phone',\n      dataIndex: 'phone',\n    },\n    {\n      title: 'gender',\n      dataIndex: 'gender',\n    },\n  ];\n\n  const advanceSearchForm = (\n    <div>\n      <Form>\n        <Row gutter={24}>\n          <Col span={8}>\n            <Form.Item label=\"name\">\n              {getFieldDecorator('name')(<Input placeholder=\"name\" />)}\n            </Form.Item>\n          </Col>\n          <Col span={8}>\n            <Form.Item label=\"email\">\n              {getFieldDecorator('email')(<Input placeholder=\"email\" />)}\n            </Form.Item>\n          </Col>\n          <Col span={8}>\n            <Form.Item label=\"phone\">\n              {getFieldDecorator('phone')(<Input placeholder=\"phone\" />)}\n            </Form.Item>\n          </Col>\n        </Row>\n        <Row>\n          <Form.Item style={{ display: 'flex', justifyContent: 'flex-end' }}>\n            <Button type=\"primary\" onClick={submit}>\n              Search\n            </Button>\n            <Button onClick={reset} style={{ marginLeft: 16 }}>\n              Reset\n            </Button>\n            <Button type=\"link\" onClick={changeType}>\n              Simple Search\n            </Button>\n          </Form.Item>\n        </Row>\n      </Form>\n    </div>\n  );\n\n  const searchForm = (\n    <div style={{ marginBottom: 16 }}>\n      <Form style={{ display: 'flex', justifyContent: 'flex-end' }}>\n        {getFieldDecorator('gender', {\n          initialValue: 'male',\n        })(\n          <Select style={{ width: 120, marginRight: 16 }} onChange={submit}>\n            <Option value=\"\">all</Option>\n            <Option value=\"male\">male</Option>\n            <Option value=\"female\">female</Option>\n          </Select>,\n        )}\n        {getFieldDecorator('name')(\n          <Input.Search placeholder=\"enter name\" style={{ width: 240 }} onSearch={submit} />,\n        )}\n        <Button type=\"link\" onClick={changeType}>\n          Advanced Search\n        </Button>\n      </Form>\n    </div>\n  );\n\n  return (\n    <div>\n      {type === 'simple' ? searchForm : advanceSearchForm}\n      <Table columns={columns} rowKey=\"email\" {...tableProps} />\n    </div>\n  );\n};\n\nexport default Form.create()(AppList);",u="import { Button, Form, Input, Table } from 'antd';\nimport React, { useState } from 'react';\nimport { WrappedFormUtils } from 'antd/lib/form/Form';\nimport { useAntdTable } from 'ahooks';\nimport { PaginatedParams } from 'ahooks/lib/useAntdTable';\n\ninterface Item {\n  name: {\n    last: string;\n  };\n  email: string;\n  phone: string;\n  gender: 'male' | 'female';\n}\n\ninterface Result {\n  total: number;\n  list: Item[];\n}\n\ninterface AppListProps {\n  form: WrappedFormUtils;\n}\n\nconst getTableData = (\n  { current, pageSize, filters, sorter }: PaginatedParams[0],\n  formData: Object,\n): Promise<Result> => {\n  let query = `page=${current}&size=${pageSize}`;\n  Object.entries(formData).forEach(([key, value]) => {\n    if (value) {\n      query += `&${key}=${value}`;\n    }\n  });\n  if (sorter) {\n    query += `&sorterFiled=${sorter.field}&sorterOrder=${sorter.order}`;\n  }\n  if (filters) {\n    query += `&gender=${filters.gender}`;\n  }\n\n  return fetch(`https://randomuser.me/api?results=55&${query}`)\n    .then((res) => res.json())\n    .then((res) => ({\n      total: res.info.results,\n      list: res.results,\n    }));\n};\n\nconst AppList = (props: AppListProps) => {\n  const { getFieldDecorator } = props.form;\n  const { tableProps, params, search } = useAntdTable(getTableData, {\n    defaultPageSize: 5,\n    form: props.form,\n    cacheKey: 'tableProps',\n  });\n  const { sorter = {}, filters = {} } = params[0] || ({} as any);\n  const { type, changeType, submit, reset } = search || {};\n\n  const columns = [\n    {\n      title: 'name',\n      dataIndex: 'name.last',\n    },\n    {\n      title: 'email',\n      dataIndex: 'email',\n    },\n    {\n      title: 'phone',\n      dataIndex: 'phone',\n      sorter: true,\n      sortOrder: sorter.field === 'phone' && sorter.order,\n    },\n    {\n      title: 'gender',\n      dataIndex: 'gender',\n      filters: [\n        { text: 'male', value: 'male' },\n        { text: 'female', value: 'female' },\n      ],\n      filteredValue: filters.gender,\n    },\n  ];\n\n  const searchFrom = (\n    <div style={{ marginBottom: 16 }}>\n      <Form style={{ display: 'flex', justifyContent: 'flex-end' }}>\n        {getFieldDecorator('name')(\n          <Input placeholder=\"enter name\" style={{ width: 140, marginRight: 16 }} />,\n        )}\n\n        {type === 'advance' && (\n          <>\n            {getFieldDecorator('email', { initialValue: '2' })(\n              <Input placeholder=\"enter email\" style={{ width: 140, marginRight: 16 }} />,\n            )}\n            {getFieldDecorator('phone')(\n              <Input placeholder=\"enter phone\" style={{ width: 140, marginRight: 16 }} />,\n            )}\n          </>\n        )}\n        <Button type=\"primary\" onClick={submit}>\n          Search\n        </Button>\n        <Button onClick={reset} style={{ marginLeft: 8 }}>\n          Reset\n        </Button>\n        <Button type=\"link\" onClick={changeType}>\n          {type === 'simple' ? 'Expand' : 'Close'}\n        </Button>\n      </Form>\n    </div>\n  );\n\n  return (\n    <div>\n      {searchFrom}\n      <Table columns={columns} rowKey=\"email\" {...tableProps} />\n    </div>\n  );\n};\n\nconst AppListTable = Form.create()(AppList);\n\nconst Demo = () => {\n  const [show, setShow] = useState(true);\n\n  return (\n    <div>\n      <Button\n        type=\"danger\"\n        onClick={() => {\n          setShow(!show);\n        }}\n        style={{ marginBottom: 16 }}\n      >\n        {show ? 'Click to destroy' : 'Click recovery'}\n      </Button>\n      {show && <AppListTable />}\n    </div>\n  );\n};\n\nexport default Demo;",c="import React from 'react';\nimport { Button, Col, Form, Input, Row, Table, Select } from 'antd';\nimport { WrappedFormUtils } from 'antd/lib/form/Form';\nimport { useAntdTable } from 'ahooks';\nimport { PaginatedParams } from 'ahooks/lib/useAntdTable';\n\nconst { Option } = Select;\n\ninterface Item {\n  name: {\n    last: string;\n  };\n  email: string;\n  phone: string;\n  gender: 'male' | 'female';\n}\n\ninterface Result {\n  total: number;\n  list: Item[];\n}\n\ninterface AppListProps {\n  form: WrappedFormUtils;\n}\n\nconst getTableData = (\n  { current, pageSize }: PaginatedParams[0],\n  formData: Object,\n): Promise<Result> => {\n  let query = `page=${current}&size=${pageSize}`;\n  Object.entries(formData).forEach(([key, value]) => {\n    if (value) {\n      query += `&${key}=${value}`;\n    }\n  });\n\n  return fetch(`https://randomuser.me/api?results=55&${query}`)\n    .then((res) => res.json())\n    .then((res) => ({\n      total: res.info.results,\n      list: res.results,\n    }));\n};\n\nconst AppList = (props: AppListProps) => {\n  const { getFieldDecorator } = props.form;\n  const { tableProps, search } = useAntdTable(getTableData, {\n    form: props.form,\n    defaultParams: [\n      { current: 2, pageSize: 5 },\n      { name: 'hello', email: 'abc@gmail.com', gender: 'female' },\n    ],\n    defaultType: 'advance',\n  });\n\n  const { type, changeType, submit, reset } = search;\n\n  const columns = [\n    {\n      title: 'name',\n      dataIndex: 'name.last',\n    },\n    {\n      title: 'email',\n      dataIndex: 'email',\n    },\n    {\n      title: 'phone',\n      dataIndex: 'phone',\n    },\n    {\n      title: 'gender',\n      dataIndex: 'gender',\n    },\n  ];\n\n  const advanceSearchForm = (\n    <div>\n      <Form>\n        <Row gutter={24}>\n          <Col span={8}>\n            <Form.Item label=\"name\">\n              {getFieldDecorator('name')(<Input placeholder=\"name\" />)}\n            </Form.Item>\n          </Col>\n          <Col span={8}>\n            <Form.Item label=\"email\">\n              {getFieldDecorator('email')(<Input placeholder=\"email\" />)}\n            </Form.Item>\n          </Col>\n          <Col span={8}>\n            <Form.Item label=\"phone\">\n              {getFieldDecorator('phone')(<Input placeholder=\"phone\" />)}\n            </Form.Item>\n          </Col>\n        </Row>\n        <Row>\n          <Form.Item style={{ display: 'flex', justifyContent: 'flex-end' }}>\n            <Button type=\"primary\" onClick={submit}>\n              Search\n            </Button>\n            <Button onClick={reset} style={{ marginLeft: 16 }}>\n              Reset\n            </Button>\n            <Button type=\"link\" onClick={changeType}>\n              Simple Search\n            </Button>\n          </Form.Item>\n        </Row>\n      </Form>\n    </div>\n  );\n\n  const searchFrom = (\n    <div style={{ marginBottom: 16 }}>\n      <Form style={{ display: 'flex', justifyContent: 'flex-end' }}>\n        {getFieldDecorator('gender', {\n          initialValue: 'male',\n        })(\n          <Select style={{ width: 120, marginRight: 16 }} onChange={submit}>\n            <Option value=\"\">all</Option>\n            <Option value=\"male\">male</Option>\n            <Option value=\"female\">female</Option>\n          </Select>,\n        )}\n        {getFieldDecorator('name')(\n          <Input.Search placeholder=\"enter name\" style={{ width: 240 }} onSearch={submit} />,\n        )}\n        <Button type=\"link\" onClick={changeType}>\n          Advanced Search\n        </Button>\n      </Form>\n    </div>\n  );\n\n  return (\n    <div>\n      {type === 'simple' ? searchFrom : advanceSearchForm}\n      <Table columns={columns} rowKey=\"email\" {...tableProps} />\n    </div>\n  );\n};\n\nexport default Form.create()(AppList);",l="import React from 'react';\nimport { Form, Input, Table, Select } from 'antd';\nimport { WrappedFormUtils } from 'antd/lib/form/Form';\nimport { useAntdTable } from 'ahooks';\nimport { PaginatedParams } from 'ahooks/lib/useAntdTable';\n\nconst { Option } = Select;\n\ninterface Item {\n  name: {\n    last: string;\n  };\n  email: string;\n  phone: string;\n  gender: 'male' | 'female';\n}\n\ninterface Result {\n  total: number;\n  list: Item[];\n}\n\ninterface AppListProps {\n  form: WrappedFormUtils;\n}\n\nconst getTableData = (\n  { current, pageSize }: PaginatedParams[0],\n  formData: Object,\n): Promise<Result> => {\n  let query = `page=${current}&size=${pageSize}`;\n  Object.entries(formData).forEach(([key, value]) => {\n    if (value) {\n      query += `&${key}=${value}`;\n    }\n  });\n\n  return fetch(`https://randomuser.me/api?results=55&${query}`)\n    .then((res) => res.json())\n    .then((res) => ({\n      total: res.info.results,\n      list: res.results,\n    }));\n};\n\nconst AppList = (props: AppListProps) => {\n  const { getFieldDecorator } = props.form;\n  const { tableProps, search } = useAntdTable(getTableData, {\n    defaultPageSize: 5,\n    form: props.form,\n  });\n\n  const { submit } = search;\n\n  const columns = [\n    {\n      title: 'name',\n      dataIndex: 'name.last',\n    },\n    {\n      title: 'email',\n      dataIndex: 'email',\n    },\n    {\n      title: 'phone',\n      dataIndex: 'phone',\n    },\n    {\n      title: 'gender',\n      dataIndex: 'gender',\n    },\n  ];\n\n  const searchForm = (\n    <div style={{ marginBottom: 16 }}>\n      <Form style={{ display: 'flex', justifyContent: 'flex-end' }}>\n        <Form.Item label=\"Gender\">\n          {getFieldDecorator('gender', {\n            initialValue: 'male',\n          })(\n            <Select style={{ width: 120, marginRight: 16 }} onChange={submit}>\n              <Option value=\"\">all</Option>\n              <Option value=\"male\">male</Option>\n              <Option value=\"female\">female</Option>\n            </Select>,\n          )}\n        </Form.Item>\n        <Form.Item label=\"Name\">\n          {getFieldDecorator('name', {\n            initialValue: 'Lemmers',\n            rules: [{ required: true, message: 'name is required' }],\n          })(<Input.Search placeholder=\"enter name\" style={{ width: 240 }} onSearch={submit} />)}\n        </Form.Item>\n      </Form>\n    </div>\n  );\n\n  return (\n    <div>\n      {searchForm}\n      <Table columns={columns} rowKey=\"email\" {...tableProps} />\n    </div>\n  );\n};\n\nexport default Form.create()(AppList);",d="import React from 'react';\nimport { useBoolean } from 'ahooks';\n\nexport default () => {\n  const [state, { toggle, setTrue, setFalse }] = useBoolean(true);\n\n  return (\n    <div>\n      <p>Effects\uff1a{JSON.stringify(state)}</p>\n      <p>\n        <button type=\"button\" onClick={() => toggle()}>\n          Toggle\n        </button>\n        <button type=\"button\" onClick={setFalse} style={{ margin: '0 16px' }}>\n          Set false\n        </button>\n        <button type=\"button\" onClick={setTrue}>\n          Set true\n        </button>\n      </p>\n    </div>\n  );\n};",p="import React, { useState, useRef } from 'react';\nimport { useClickAway } from 'ahooks';\n\nexport default () => {\n  const [counter, setCounter] = useState(0);\n  const ref = useRef<HTMLSpanElement>();\n  useClickAway(() => {\n    setCounter((s) => s + 1);\n  }, ref);\n\n  return (\n    <div>\n      <span ref={ref}>\n        <button type=\"button\">box1</button>\n      </span>\n      <p>counter: {counter}</p>\n    </div>\n  );\n};",m="import React, { useState } from 'react';\nimport { useClickAway } from 'ahooks';\n\nexport default () => {\n  const [counter, setCounter] = useState(0);\n\n  useClickAway(\n    () => {\n      setCounter((s) => s + 1);\n    },\n    () => document.getElementById('box2'),\n  );\n\n  return (\n    <div>\n      <button type=\"button\" id=\"box2\">\n        box2\n      </button>\n      <p>counter: {counter}</p>\n    </div>\n  );\n};",f="import React, { useState, useRef } from 'react';\nimport { useClickAway } from 'ahooks';\n\nexport default () => {\n  const [counter, setCounter] = useState(0);\n  const ref1 = useRef();\n  const ref2 = useRef();\n  useClickAway(() => {\n    setCounter((s) => s + 1);\n  }, [ref1, ref2]);\n\n  return (\n    <div>\n      <button type=\"button\" ref={ref1}>\n        box1\n      </button>\n      <button type=\"button\" ref={ref2} style={{ marginLeft: 16 }}>\n        box2\n      </button>\n      <p>counter: {counter}</p>\n    </div>\n  );\n};",v="import React, { useState, useRef } from 'react';\nimport { useClickAway } from 'ahooks';\n\nexport default () => {\n  const [counter, setCounter] = useState(0);\n  const ref = useRef<HTMLSpanElement>();\n  useClickAway(\n    () => {\n      setCounter((s) => s + 1);\n    },\n    ref,\n    'contextmenu',\n  );\n\n  return (\n    <div>\n      <span ref={ref}>\n        <button type=\"button\">box1</button>\n      </span>\n      <p>counter: {counter}</p>\n    </div>\n  );\n};",h="import React from 'react';\nimport { useControllableValue } from 'ahooks';\n\nexport default (props: any) => {\n  const [state, setState] = useControllableValue<string>(props, {\n    defaultValue: '',\n  });\n\n  return (\n    <>\n      <input\n        value={state}\n        onChange={e => setState(e.target.value)}\n        style={{ width: 300 }}\n      />\n      <button type=\"button\" onClick={() => setState('')} style={{ margin: '0 4px'}}>\n        Clear\n      </button>\n    </>\n  );\n};",b="import React, { useState } from 'react';\nimport { useControllableValue } from 'ahooks';\n\nconst ControllableComponent = (props: any) => {\n  const [state, setState] = useControllableValue<string>(props);\n\n  return <input value={state} onChange={e => setState(e.target.value)} style={{ width: 300 }} />;\n};\n\nconst Parent = () => {\n  const [state, setState] = useState<string>('');\n  const clear = () => {\n    setState('');\n  };\n\n  return (\n    <>\n      <ControllableComponent value={state} onChange={setState} />\n      <button type=\"button\" onClick={clear} style={{ margin: '0 4px' }}>\n        Clear\n      </button>\n    </>\n  );\n};\nexport default Parent;",g="import React, { useState } from 'react';\nimport { useControllableValue } from 'ahooks';\n\nconst ControllableComponent = (props: any) => {\n  const [state, setState] = useControllableValue<string>(props);\n\n  return (\n    <input\n      value={state}\n      onChange={(e) => {\n        setState(e.target.value);\n      }}\n      style={{ width: 300 }}\n    />\n  );\n};\nconst Parent = () => {\n  const [state, setState] = useState<number>(0);\n\n  return (\n    <>\n      <div style={{ marginBottom: 8 }}>state:{state}</div>\n      <ControllableComponent onChange={setState} />\n    </>\n  );\n};\nexport default Parent;",y="import * as React from 'react';\nimport { useCookieState } from 'ahooks';\n\nexport default () => {\n  const [message, setMessage] = useCookieState('useCookieStateString');\n  return (\n    <input\n      value={message}\n      placeholder=\"Please enter some words...\"\n      onChange={(e) => setMessage(e.target.value)}\n      style={{ width: 300 }}\n    />\n  );\n};",w="import * as React from 'react';\nimport { useCookieState } from 'ahooks';\n\nexport default function App() {\n  const [value, setValue] = useCookieState('useCookieStateUpdater', {\n    defaultValue: '0',\n  });\n\n  return (\n    <>\n      <p>{value}</p>\n      <button\n        type=\"button\"\n        style={{ marginRight: '16px' }}\n        onClick={() => setValue((v) => String(Number(v) + 1))}\n      >\n        inc +\n      </button>\n      <button\n        type=\"button\"\n        style={{ marginRight: '16px' }}\n        onClick={() => setValue((v) => String(Number(v) - 1))}\n      >\n        dec -\n      </button>\n      <button type=\"button\" onClick={() => setValue('0')}>\n        reset\n      </button>\n    </>\n  );\n}",k="import * as React from 'react';\nimport { useCookieState } from 'ahooks';\n\nexport default function App() {\n  const [value, setValue] = useCookieState('useCookieStateOptions', {\n    defaultValue: '0',\n    path: '/',\n    expires: (() => new Date(+new Date() + 10000))(),\n  });\n\n  return (\n    <>\n      <p>{value}</p>\n      <button\n        type=\"button\"\n        style={{ marginRight: '16px' }}\n        onClick={() =>\n          setValue((v) => String(Number(v) + 1), {\n            expires: (() => new Date(+new Date() + 10000))(),\n          })\n        }\n      >\n        inc + (10s expires)\n      </button>\n      <button\n        type=\"button\"\n        style={{ marginRight: '16px' }}\n        onClick={() =>\n          setValue((v) => String(Number(v) - 1), {\n            expires: (() => new Date(+new Date() + 10000))(),\n          })\n        }\n      >\n        dec - (10s expires)\n      </button>\n      <button type=\"button\" onClick={() => setValue('0')}>\n        reset\n      </button>\n    </>\n  );\n}",x="import React from 'react';\nimport { useCountDown } from 'ahooks';\n\nexport default () => {\n  const [countdown, setTargetDate, formattedRes] = useCountDown({\n    targetDate: '2021-12-31 24:00:00',\n  });\n  const { days, hours, minutes, seconds, milliseconds } = formattedRes;\n\n  return (\n    <>\n      <p>\n        There are {days} days {hours} hours {minutes} minutes {seconds} seconds {milliseconds}{' '}\n        milliseconds until 2021-12-31 24:00:00\n      </p>\n    </>\n  );\n};",C="import React from 'react';\nimport { useCountDown } from 'ahooks';\n\nexport default () => {\n  const onEnd = () => {\n    alert('End of the time');\n    console.log('onEnd of the time');\n  };\n  const [countdown, setTargetDate] = useCountDown({ onEnd: onEnd });\n\n  return (\n    <>\n      <button\n        onClick={() => {\n          setTargetDate(Date.now() + 5000);\n        }}\n        disabled={countdown !== 0}\n      >\n        {countdown === 0 ? 'Start Interval' : `Reset After ${Math.round(countdown / 1000)}s`}\n      </button>\n      <button\n        onClick={() => {\n          setTargetDate(undefined);\n        }}\n        style={{ marginLeft: 8 }}\n      >\n        stop\n      </button>\n    </>\n  );\n};",S='import React from \'react\';\nimport { useCounter } from \'ahooks\';\n\nexport default () => {\n  const [current, { inc, dec, set, reset }] = useCounter(100, { min: 1, max: 10 });\n\n  return (\n    <div>\n      <p>{current} [max: 10; min: 1;]</p>\n      <div>\n        <button\n          type="button"\n          onClick={() => {\n            inc();\n          }}\n          style={{ marginRight: 8 }}\n        >\n          inc()\n        </button>\n        <button\n          type="button"\n          onClick={() => {\n            dec();\n          }}\n          style={{ marginRight: 8 }}\n        >\n          dec()\n        </button>\n        <button\n          type="button"\n          onClick={() => {\n            set(3);\n          }}\n          style={{ marginRight: 8 }}\n        >\n          set(3)\n        </button>\n        <button\n          type="button"\n          onClick={() => {\n            reset();\n          }}\n          style={{ marginRight: 8 }}\n        >\n          reset()\n        </button>\n      </div>\n    </div>\n  );\n};',P="import React, { useState } from 'react';\nimport { useCreation } from 'ahooks';\n\nclass Foo {\n  constructor() {\n    this.data = Math.random();\n  }\n\n  data: number;\n}\n\nexport default function () {\n  const foo = useCreation(() => new Foo(), []);\n  const [, setFlag] = useState({});\n  return (\n    <>\n      <p>{foo.data}</p>\n      <button\n        type=\"button\"\n        onClick={() => {\n          setFlag({});\n        }}\n      >\n        Rerender\n      </button>\n    </>\n  );\n}",R="import React, { useState } from 'react';\nimport { useDebounce } from 'ahooks';\n\nexport default () => {\n  const [value, setValue] = useState<string>();\n  const debouncedValue = useDebounce(value, { wait: 500 });\n\n  return (\n    <div>\n      <input\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Typed value\"\n        style={{ width: 280 }}\n      />\n      <p style={{ marginTop: 16 }}>DebouncedValue: {debouncedValue}</p>\n    </div>\n  );\n};",O="import React, { useState } from 'react';\nimport useDebounceEffect from '../';\n\nexport default () => {\n  const [value, setValue] = useState('hello');\n  const [records, setRecords] = useState<string[]>([]);\n  useDebounceEffect(\n    () => {\n      setRecords((val) => [...val, value]);\n    },\n    [value],\n    {\n      wait: 1000,\n    },\n  );\n  return (\n    <div>\n      <input\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Typed value\"\n        style={{ width: 280 }}\n      />\n      <p style={{ marginTop: 16 }}>\n        <ul>\n          {records.map((record, index) => (\n            <li key={index}>{record}</li>\n          ))}\n        </ul>\n      </p>\n    </div>\n  );\n};",j="import { useEffect, EffectCallback, DependencyList, useState } from 'react';\nimport { DebounceOptions } from '../useDebounce/debounceOptions';\nimport useDebounceFn from '../useDebounceFn';\nimport useUpdateEffect from '../useUpdateEffect';\nimport useUnmount from '../useUnmount';\n\nfunction useDebounceEffect(\n  effect: EffectCallback,\n  deps?: DependencyList,\n  options?: DebounceOptions,\n) {\n  const [flag, setFlag] = useState({});\n\n  const { run, cancel } = useDebounceFn(() => {\n    setFlag({});\n  }, options);\n\n  useEffect(() => {\n    return run();\n  }, deps);\n\n  useUnmount(cancel);\n\n  useUpdateEffect(effect, [flag]);\n}\n\nexport default useDebounceEffect;",z="import debounce from 'lodash.debounce';\nimport { useRef } from 'react';\nimport useCreation from '../useCreation';\nimport { DebounceOptions } from '../useDebounce/debounceOptions';\nimport useUnmount from '../useUnmount';\n\ntype Fn = (...args: any) => any;\n\nfunction useDebounceFn<T extends Fn>(fn: T, options?: DebounceOptions) {\n  const fnRef = useRef<T>(fn);\n  fnRef.current = fn;\n\n  const wait = options?.wait ?? 1000;\n\n  const debounced = useCreation(\n    () =>\n      debounce<T>(\n        ((...args: any[]) => {\n          return fnRef.current(...args);\n        }) as T,\n        wait,\n        options,\n      ),\n    [],\n  );\n\n  useUnmount(() => {\n    debounced.cancel();\n  });\n\n  return {\n    run: (debounced as unknown) as T,\n    cancel: debounced.cancel,\n    flush: debounced.flush,\n  };\n}\n\nexport default useDebounceFn;",T="import { useRef } from 'react';\n\nexport default function useCreation<T>(factory: () => T, deps: any[]) {\n  const { current } = useRef({\n    deps,\n    obj: undefined as undefined | T,\n    initialized: false,\n  });\n  if (current.initialized === false || !depsAreSame(current.deps, deps)) {\n    current.deps = deps;\n    current.obj = factory();\n    current.initialized = true;\n  }\n  return current.obj as T;\n}\n\nfunction depsAreSame(oldDeps: any[], deps: any[]): boolean {\n  if (oldDeps === deps) return true;\n  for (let i = 0; i < oldDeps.length; i++) {\n    if (oldDeps[i] !== deps[i]) return false;\n  }\n  return true;\n}",I="import { useEffect } from 'react';\nimport usePersistFn from '../usePersistFn';\nimport { isFunction } from '../utils';\n\nconst useUnmount = (fn: any) => {\n  const fnPersist = usePersistFn(fn);\n\n  useEffect(\n    () => () => {\n      if (isFunction(fnPersist)) {\n        fnPersist();\n      }\n    },\n    [],\n  );\n};\n\nexport default useUnmount;",F="import { useRef } from 'react';\n\nexport type noop = (...args: any[]) => any;\n\nfunction usePersistFn<T extends noop>(fn: T) {\n  const fnRef = useRef<T>(fn);\n  fnRef.current = fn;\n\n  const persistFn = useRef<T>();\n  if (!persistFn.current) {\n    persistFn.current = function (...args) {\n      return fnRef.current!.apply(this, args);\n    } as T;\n  }\n\n  return persistFn.current!;\n}\n\nexport default usePersistFn;",N="export function isFunction(obj: any): obj is Function {\n  return typeof obj === 'function';\n}",D="import { useEffect, useRef } from 'react';\n\nconst useUpdateEffect: typeof useEffect = (effect, deps) => {\n  const isMounted = useRef(false);\n\n  useEffect(() => {\n    if (!isMounted.current) {\n      isMounted.current = true;\n    } else {\n      return effect();\n    }\n  }, deps);\n};\n\nexport default useUpdateEffect;",q="import React, { useState } from 'react';\nimport { useDebounceFn } from 'ahooks';\n\nexport default () => {\n  const [value, setValue] = useState(0);\n  const { run } = useDebounceFn(\n    () => {\n      setValue(value + 1);\n    },\n    {\n      wait: 500,\n    },\n  );\n\n  return (\n    <div>\n      <p style={{ marginTop: 16 }}> Clicked count: {value} </p>\n      <button type=\"button\" onClick={run}>\n        Click fast!\n      </button>\n    </div>\n  );\n};",E="import React, { useEffect } from 'react';\nimport { useDocumentVisibility } from 'ahooks';\n\nexport default () => {\n  const documentVisibility = useDocumentVisibility();\n\n  useEffect(() => {\n    if (documentVisibility === 'visible') {\n      console.log(`Current document visibility state: ${documentVisibility}`);\n    } else {\n      console.log(`Current document visibility state: ${documentVisibility}`);\n    }\n  }, [documentVisibility]);\n\n  return <div>Current document visibility state: {documentVisibility}</div>;\n};",A="import React, { useState } from 'react';\nimport { useDrop, useDrag } from 'ahooks';\n\nexport default () => {\n  const [dragging, setDragging] = useState<string | null>(null);\n  const getDragProps = useDrag({\n    onDragStart: (data) => {\n      setDragging(data);\n    },\n    onDragEnd: () => {\n      setDragging(null);\n    },\n  });\n  const [props, { isHovering }] = useDrop({\n    onText: (text, e) => {\n      console.log(e);\n      alert(`'text: ${text}' dropped`);\n    },\n    onFiles: (files, e) => {\n      console.log(e, files);\n      alert(`${files.length} file dropped`);\n    },\n    onUri: (uri, e) => {\n      console.log(e);\n      alert(`uri: ${uri} dropped`);\n    },\n    onDom: (content: string, e) => {\n      alert(`custom: ${content} dropped`);\n    },\n  });\n\n  return (\n    <div>\n      <div style={{ border: '1px dashed #e8e8e8', padding: 16, textAlign: 'center' }} {...props}>\n        {isHovering ? 'release here' : 'drop here'}\n      </div>\n\n      <div style={{ display: 'flex', marginTop: 8 }}>\n        {Array.from(Array(5)).map((e, i) => (\n          <div\n            {...getDragProps(`box${i}`)}\n            style={{\n              border: '1px solid #e8e8e8',\n              padding: 16,\n              width: 80,\n              textAlign: 'center',\n              marginRight: 16,\n            }}\n          >\n            box{i}\n          </div>\n        ))}\n      </div>\n      <div style={{ marginTop: 8 }}>{dragging ? <>dragging {dragging}</> : 'not dragging'}</div>\n    </div>\n  );\n};",L="import React, { useState } from 'react';\nimport { Form, Button, Input, Icon } from 'antd';\nimport { FormComponentProps } from 'antd/lib/form';\nimport { useDynamicList } from 'ahooks';\n\nexport default Form.create()((props: FormComponentProps) => {\n  const { list, remove, getKey, push } = useDynamicList(['David', 'Jack']);\n  const { getFieldDecorator, validateFields } = props.form;\n\n  const [result, setResult] = useState('');\n\n  const Row = (index: number, item: any) => (\n    <Form.Item key={getKey(index)}>\n      {getFieldDecorator(`names[${getKey(index)}]`, {\n        initialValue: item,\n        rules: [\n          {\n            required: true,\n            message: 'required',\n          },\n        ],\n      })(<Input style={{ width: 300 }} placeholder=\"Please enter your name\" />)}\n      {list.length > 1 && (\n        <Icon\n          type=\"minus-circle-o\"\n          style={{ marginLeft: 8 }}\n          onClick={() => {\n            remove(index);\n          }}\n        />\n      )}\n      <Icon\n        type=\"plus-circle-o\"\n        style={{ marginLeft: 8 }}\n        onClick={() => {\n          push('');\n        }}\n      />\n    </Form.Item>\n  );\n\n  return (\n    <>\n      <Form>{list.map((ele, index) => Row(index, ele))}</Form>\n      <Button\n        style={{ marginTop: 8 }}\n        type=\"primary\"\n        onClick={() =>\n          validateFields((err, val) => {\n            if (!err) {\n              setResult(JSON.stringify((val || {}).names.filter((e: string) => !!e)));\n            }\n          })\n        }\n      >\n        Submit\n      </Button>\n      <div>{result}</div>\n    </>\n  );\n});",B="import React, { useState } from 'react';\nimport { Form, Input, Button } from 'antd';\nimport { FormComponentProps } from 'antd/lib/form';\nimport { useDynamicList } from 'ahooks';\n\ninterface CardProps extends FormComponentProps {\n  index: number;\n  list: any[];\n  name: string;\n}\n\nconst Card = (props: CardProps) => {\n  const { list, getKey, push } = useDynamicList(props.list || [1]);\n\n  return (\n    <div style={{ border: '1px solid #e8e8e8', padding: 16, marginBottom: 16 }}>\n      <Form.Item label=\"Group Name\">\n        {props.form.getFieldDecorator(`params[${props.index}].groupName`, {\n          initialValue: props.name,\n        })(<Input placeholder=\"Please enter group name\" />)}\n      </Form.Item>\n\n      <Form.Item label=\"frequency\">\n        {list.map((ele, index) => (\n          <div style={{ marginBottom: 16 }} key={getKey(index)}>\n            {props.form.getFieldDecorator(`params[${props.index}].ad[${getKey(index)}].name`, {\n              initialValue: ele.name,\n            })(<Input placeholder=\"Please enter the advertisement name\" addonBefore=\"name\uff1a\" />)}\n            {props.form.getFieldDecorator(`params[${props.index}].ad[${getKey(index)}].frequency`, {\n              initialValue: ele.value,\n            })(<Input placeholder=\"Please entery the frequency\" addonAfter=\"times/day\" />)}\n          </div>\n        ))}\n      </Form.Item>\n      <Button block onClick={push}>\n        Add advertisement\n      </Button>\n    </div>\n  );\n};\n\ninterface ListItem {\n  name: string;\n  list: Array<{ name: string; value: number }>;\n}\n\nexport default Form.create()((props: FormComponentProps) => {\n  const [result, setResult] = useState('');\n\n  const { list, push, getKey, sortForm } = useDynamicList<ListItem>([\n    {\n      name: 'Group 1',\n      list: [\n        { name: 'ad1', value: 2 },\n        { name: 'ad2', value: 1 },\n      ],\n    },\n  ]);\n\n  return (\n    <div style={{ width: 800, margin: 'auto', display: 'flex' }}>\n      <div style={{ width: 400, marginRight: 16 }}>\n        {list.map((ele, index) => (\n          <Card\n            form={props.form}\n            key={getKey(index)}\n            list={ele.list}\n            name={ele.name}\n            index={getKey(index)}\n          />\n        ))}\n        <Button style={{ marginTop: 16 }} block onClick={() => push({} as ListItem)}>\n          Add Group\n        </Button>\n      </div>\n      <div>\n        <Button\n          onClick={() => {\n            const res = props.form.getFieldsValue().params;\n            const sortedResult = sortForm(res);\n            setResult(JSON.stringify(sortedResult, null, 2));\n          }}\n        >\n          Retrieve form data\n        </Button>\n        <div>\n          <pre>{result}</pre>\n        </div>\n      </div>\n    </div>\n  );\n});",M="import React, { useState } from 'react';\nimport { Form, Button, Input, Icon, Table } from 'antd';\nimport { FormComponentProps } from 'antd/lib/form';\nimport ReactDragListView from 'react-drag-listview';\nimport { useDynamicList } from 'ahooks';\n\ninterface Item {\n  name?: string;\n  age?: string;\n  memo?: string;\n}\n\nexport default Form.create()((props: FormComponentProps) => {\n  const { list, remove, getKey, move, push, sortForm } = useDynamicList<Item>([\n    { name: 'my bro', age: '23', memo: \"he's my bro\" },\n    { name: 'my sis', age: '21', memo: \"she's my sis\" },\n    {},\n  ]);\n  const { getFieldDecorator, getFieldsValue } = props.form;\n  const [result, setResult] = useState('');\n\n  const columns = [\n    {\n      title: 'Name',\n      dataIndex: 'name',\n      key: 'name',\n      render: (text: string, row: Item, index: number) => (\n        <>\n          <Icon style={{ cursor: 'move', marginRight: 8 }} type=\"drag\" />\n          {getFieldDecorator(`params[${getKey(index)}].name`, { initialValue: text })(\n            <Input style={{ width: 120, marginRight: 16 }} placeholder=\"name\" />,\n          )}\n        </>\n      ),\n    },\n    {\n      title: 'Age',\n      dataIndex: 'age',\n      key: 'age',\n      render: (text: string, row: Item, index: number) => (\n        <>\n          {getFieldDecorator(`params[${getKey(index)}].age`, { initialValue: text })(\n            <Input style={{ width: 120, marginRight: 16 }} placeholder=\"age\" />,\n          )}\n        </>\n      ),\n    },\n    {\n      key: 'memo',\n      title: 'Memo',\n      dataIndex: 'memo',\n      render: (text: string, row: Item, index: number) => (\n        <>\n          {getFieldDecorator(`params[${getKey(index)}].memo`, { initialValue: text })(\n            <Input style={{ width: 300, marginRight: 16 }} placeholder=\"please input the memo\" />,\n          )}\n          <Button.Group>\n            <Button type=\"danger\" onClick={() => remove(index)}>\n              Delete\n            </Button>\n          </Button.Group>\n        </>\n      ),\n    },\n  ];\n\n  return (\n    <>\n      <ReactDragListView\n        onDragEnd={(oldIndex: number, newIndex: number) => move(oldIndex, newIndex)}\n        handleSelector={'i[aria-label=\"icon: drag\"]'}\n      >\n        <Table\n          columns={columns}\n          dataSource={list}\n          rowKey={(r: Item, index: number) => getKey(index).toString()}\n          pagination={false}\n        />\n      </ReactDragListView>\n      <Button\n        style={{ marginTop: 8 }}\n        block\n        type=\"dashed\"\n        onClick={() => push({ name: 'new row', age: '25' })}\n      >\n        + Add row\n      </Button>\n      <Button\n        type=\"primary\"\n        style={{ marginTop: 16 }}\n        onClick={() => setResult(JSON.stringify(sortForm(getFieldsValue().params), null, 2))}\n      >\n        Submit\n      </Button>\n      <div style={{ whiteSpace: 'pre' }}>{result && `content: ${result}`}</div>\n    </>\n  );\n});",_="import React, { useRef, FC } from 'react';\nimport { useEventEmitter } from 'ahooks';\nimport { EventEmitter } from 'ahooks/lib/useEventEmitter';\n\nconst MessageBox: FC<{\n  focus$: EventEmitter<void>;\n}> = function (props) {\n  return (\n    <div style={{ paddingBottom: 24 }}>\n      <p>You received a message</p>\n      <button\n        type=\"button\"\n        onClick={() => {\n          props.focus$.emit();\n        }}\n      >\n        Reply\n      </button>\n    </div>\n  );\n};\n\nconst InputBox: FC<{\n  focus$: EventEmitter<void>;\n}> = function (props) {\n  const inputRef = useRef<any>();\n  props.focus$.useSubscription(() => {\n    inputRef.current.focus();\n  });\n  return (\n    <input ref={inputRef} placeholder=\"Enter reply\" style={{ width: '100%', padding: '4px' }} />\n  );\n};\n\nexport default function () {\n  const focus$ = useEventEmitter();\n  return (\n    <>\n      <MessageBox focus$={focus$} />\n      <InputBox focus$={focus$} />\n    </>\n  );\n}",U="import React, { useState, useRef } from 'react';\nimport { useEventListener } from 'ahooks';\n\nexport default () => {\n  const [value, setValue] = useState(0);\n\n  const clickHandler = () => {\n    setValue(value + 1);\n  };\n\n  const ref = useRef();\n  useEventListener('click', clickHandler, { target: ref });\n\n  return (\n    <button ref={ref} type=\"button\">\n      You click {value} times\n    </button>\n  );\n};",V="import React, { useState } from 'react';\nimport { useEventListener } from 'ahooks';\n\nexport default () => {\n  const [value, setValue] = useState('');\n\n  const keyDownHandler = (ev: KeyboardEvent) => {\n    setValue(ev.code);\n  };\n  useEventListener('keydown', keyDownHandler);\n\n  return <p>Your press key is {value}</p>;\n};",$="import React, { Fragment } from 'react';\nimport { useEventTarget } from 'ahooks';\n\nexport default () => {\n  const [value, { reset, onChange }] = useEventTarget({ initialValue: 'this is initial value' });\n\n  return (\n    <Fragment>\n      <input value={value} onChange={onChange} style={{ width: 200, marginRight: 20 }} />\n      <button type=\"button\" onClick={reset}>\n        reset\n      </button>\n    </Fragment>\n  );\n};",K="import React, { Fragment } from 'react';\nimport { useEventTarget } from 'ahooks';\n\nexport default () => {\n  const [value, { onChange, reset }] = useEventTarget({\n    transformer: (val: string) => val.replace(/[^\\d]/g, ''),\n  });\n\n  return (\n    <Fragment>\n      <input\n        value={value || ''}\n        onChange={onChange}\n        style={{ width: 200, marginRight: 20 }}\n        placeholder=\"\u8bf7\u8f93\u5165\"\n      />\n      <button type=\"button\" onClick={reset}>\n        reset\n      </button>\n    </Fragment>\n  );\n};",H="import React from 'react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n  const [status, { toggle, load, unload }] = useExternal('/useExternal/test-external-script.js', {\n    async: false,\n  });\n\n  return (\n    <>\n      <p>\n        Status: <b>{status}</b>\n      </p>\n      <p>\n        Response: <i>{status === 'ready' ? TEST_SCRIPT?.start() : '-'}</i>\n      </p>\n      <button type=\"button\" style={{ marginRight: 8 }} onClick={() => toggle()}>\n        toggle\n      </button>\n      <button type=\"button\" style={{ marginRight: 8 }} onClick={() => { \n        unload();\n        // Maybe you wanna remove the global variables or functions after run unload()\n        TEST_SCRIPT = undefined;\n      }}>\n        unload\n      </button>\n      <button type=\"button\" style={{ marginRight: 8 }} onClick={() => load()}>\n        load\n      </button>\n    </>\n  );\n};",W='import React from \'react\';\nimport { useExternal } from \'ahooks\';\n\nexport default () => {\n  const [status, { toggle, load, unload }] = useExternal(\'/useExternal/bootstrap-badge.css\', {\n    media: \'all\',\n  });\n\n  return (\n    <>\n      <p>\n        Status: <b>{status}</b>\n      </p>\n      <div className="bd-example">\n        <span className="badge badge-pill badge-primary">Primary</span>\n        <span className="badge badge-pill badge-secondary">Secondary</span>\n        <span className="badge badge-pill badge-success">Success</span>\n        <span className="badge badge-pill badge-danger">Danger</span>\n        <span className="badge badge-pill badge-warning">Warning</span>\n        <span className="badge badge-pill badge-info">Info</span>\n        <span className="badge badge-pill badge-light">Light</span>\n        <span className="badge badge-pill badge-dark">Dark</span>\n      </div>\n      <br />\n      <button type="button" style={{ marginRight: 8 }} onClick={() => toggle()}>\n        toggle\n      </button>\n      <button type="button" style={{ marginRight: 8 }} onClick={() => unload()}>\n        unload\n      </button>\n      <button type="button" style={{ marginRight: 8 }} onClick={() => load()}>\n        load\n      </button>\n    </>\n  );\n};',J="import React from 'react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n  const ref = React.useRef();\n\n  const [status, { toggle, load, unload }] = useExternal('/logo.svg', {\n    target: ref,\n    // target: document.querySelector('body')\n  });\n\n  return (\n    <>\n      <p>\n        Status: <b>{status}</b>\n      </p>\n      <button type=\"button\" style={{ marginRight: 8 }} onClick={() => toggle()}>\n        toggle\n      </button>\n      <button type=\"button\" style={{ marginRight: 8 }} onClick={() => unload()}>\n        unload\n      </button>\n      <button type=\"button\" style={{ marginRight: 8 }} onClick={() => load()}>\n        load\n      </button>\n      <br />\n      <br />\n      <div ref={ref}></div>\n    </>\n  );\n};",Y="import React from 'react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n  const ref = React.useRef();\n\n  const [path, setPath] = React.useState('https://picsum.photos/200/100');\n\n  const [status] = useExternal(path, {\n    type: 'img',\n    target: ref\n  });\n\n  return (\n    <>\n      <p>\n        Status: <b>{status}</b>\n      </p>\n      <button\n        type=\"button\"\n        style={{ marginRight: 8 }}\n        onClick={() =>\n          setPath(`https://picsum.photos/200/100?random=${Math.floor(Math.random() * 100)}`)\n        }\n      >\n        random a path\n      </button>\n      <br />\n      <br />\n      <a href={path} target=\"_blank\">\n        {path}\n      </a>\n      <br />\n      <div ref={ref}></div>\n    </>\n  );\n};",G="import React, { useState } from 'react';\nimport { useFavicon } from 'ahooks';\n\nexport const DEFAULT_FAVICON_URL = 'https://ahooks.js.org/simple-logo.svg';\n\nexport const GOOGLE_FAVICON_URL = 'https://www.google.com/favicon.ico';\n\nexport default () => {\n  const [url, setUrl] = useState<string>(DEFAULT_FAVICON_URL);\n\n  useFavicon(url);\n\n  return (\n    <>\n      <p>\n        Current Favicon: <span>{url}</span>\n      </p>\n      <button\n        style={{ marginRight: 16 }}\n        onClick={() => {\n          setUrl(GOOGLE_FAVICON_URL);\n        }}\n      >\n        Change To Google Favicon\n      </button>\n      <button\n        onClick={() => {\n          setUrl(DEFAULT_FAVICON_URL);\n        }}\n      >\n        Back To AHooks Favicon\n      </button>\n    </>\n  );\n};",Z="import React, { useRef } from 'react';\nimport { useFullscreen } from 'ahooks';\n\nexport default () => {\n  const ref = useRef();\n  const [isFullscreen, { setFull, exitFull, toggleFull }] = useFullscreen(ref);\n  return (\n    <div ref={ref} style={{ background: 'white' }}>\n      <div style={{ marginBottom: 16 }}>{isFullscreen ? 'Fullscreen' : 'Not fullscreen'}</div>\n      <div>\n        <button type=\"button\" onClick={setFull}>\n          setFull\n        </button>\n        <button type=\"button\" onClick={exitFull} style={{ margin: '0 8px' }}>\n          exitFull\n        </button>\n        <button type=\"button\" onClick={toggleFull}>\n          toggle\n        </button>\n      </div>\n    </div>\n  );\n};",Q="import React from 'react';\nimport { useFullscreen } from 'ahooks';\nimport img from './react-hooks.jpg';\n\nexport default () => {\n  const [, { setFull }] = useFullscreen(() => document.getElementById('fullscreen-img'));\n  return (\n    <div style={{ background: 'white' }}>\n      <div style={{ marginBottom: 16 }}>\n        <img id=\"fullscreen-img\" src={img} style={{ width: 320 }} alt=\"\" />\n      </div>\n      <button type=\"button\" onClick={setFull}>\n        setFull\n      </button>\n    </div>\n  );\n};",X='import React from \'react\';\nimport { Table, Pagination, Field, Form, Input, Button, Select, Icon } from \'@alifd/next\';\nimport { useFusionTable } from \'ahooks\';\n\ninterface Item {\n  name: {\n    last: string;\n  };\n  email: string;\n  phone: string;\n  gender: \'male\' | \'female\';\n}\n\ninterface Result {\n  total: number;\n  list: Item[];\n}\n\nconst getTableData = ({ current, pageSize }, formData: Object): Promise<Result> => {\n  let query = `page=${current}&size=${pageSize}`;\n  Object.entries(formData).forEach(([key, value]) => {\n    if (value) {\n      query += `&${key}=${value}`;\n    }\n  });\n\n  return fetch(`https://randomuser.me/api?results=${pageSize}&${query}`)\n    .then((res) => res.json())\n    .then((res) => ({\n      total: 55,\n      list: res.results.slice(0, 10),\n    }));\n};\n\nconst AppList = () => {\n  const field = Field.useField([]);\n  const { paginationProps, tableProps, search, loading } = useFusionTable(getTableData, {\n    field,\n  });\n  const { type, changeType, submit, reset } = search;\n\n  const advanceSearchForm = (\n    <div>\n      <Form\n        inline\n        style={{ display: \'flex\', alignItems: \'center\', justifyContent: \'flex-end\' }}\n        field={field}\n      >\n        <Form.Item label="name:">\n          <Input name="name" placeholder="name" />\n        </Form.Item>\n        <Form.Item label="email:">\n          <Input name="email" placeholder="email" />\n        </Form.Item>\n        <Form.Item label="phone:">\n          <Input name="phone" placeholder="phone" />\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Form.Submit loading={loading} type="primary" onClick={submit}>\n            Search\n          </Form.Submit>\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Button onClick={reset}>reset</Button>\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Button text type="primary" onClick={changeType}>\n            Simple Search\n          </Button>\n        </Form.Item>\n      </Form>\n    </div>\n  );\n\n  const searchForm = (\n    <div>\n      <Form\n        inline\n        style={{ display: \'flex\', alignItems: \'center\', justifyContent: \'flex-end\' }}\n        field={field}\n      >\n        <Form.Item label=" ">\n          <Select name="gender" defaultValue="all" onChange={submit}>\n            <Select.Option value="all">all</Select.Option>\n            <Select.Option value="male">male</Select.Option>\n            <Select.Option value="female">female</Select.Option>\n          </Select>\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Input\n            name="name"\n            innerAfter={<Icon type="search" size="xs" onClick={submit} style={{ margin: 4 }} />}\n            placeholder="enter name"\n            onPressEnter={submit}\n          />\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Button text type="primary" onClick={changeType}>\n            Advanced Search\n          </Button>\n        </Form.Item>\n      </Form>\n    </div>\n  );\n\n  return (\n    <>\n      {type === \'simple\' ? searchForm : advanceSearchForm}\n      <Table {...tableProps} primaryKey="email">\n        <Table.Column title="name" dataIndex="name.last" width={140} />\n        <Table.Column title="email" dataIndex="email" width={500} />\n        <Table.Column title="phone" dataIndex="phone" width={500} />\n        <Table.Column title="gender" dataIndex="gender" width={500} />\n      </Table>\n      <Pagination style={{ marginTop: 16 }} {...paginationProps} />\n    </>\n  );\n};\n\nexport default AppList;',ee='import React, { useState } from \'react\';\nimport { Table, Pagination, Field, Form, Input, Button } from \'@alifd/next\';\nimport { useFusionTable } from \'ahooks\';\n\ninterface Item {\n  name: {\n    last: string;\n  };\n  email: string;\n  phone: string;\n  gender: \'male\' | \'female\';\n}\n\ninterface Result {\n  total: number;\n  list: Item[];\n}\n\nconst getTableData = (\n  { current, pageSize, filters, sorter },\n  formData: Object,\n): Promise<Result> => {\n  console.log(sorter, filters);\n\n  let query = `page=${current}&size=${pageSize}`;\n  Object.entries(formData).forEach(([key, value]) => {\n    if (value) {\n      query += `&${key}=${value}`;\n    }\n  });\n\n  return fetch(`https://randomuser.me/api?results=${pageSize}&${query}`)\n    .then((res) => res.json())\n    .then((res) => ({\n      total: 55,\n      list: res.results,\n    }));\n};\n\nconst AppList = () => {\n  const field = Field.useField([]);\n\n  const { tableProps, paginationProps, params, search } = useFusionTable(getTableData, {\n    defaultPageSize: 5,\n    field,\n    cacheKey: \'tableProps\',\n  });\n\n  const { sorter = {}, filters = {} } = params[0] || {};\n  const { type, changeType, submit, reset } = search || {};\n\n  const searchFrom = (\n    <div style={{ marginBottom: 16 }}>\n      <Form\n        field={field}\n        inline\n        style={{ display: \'flex\', justifyContent: \'flex-end\', alignItems: \'center\' }}\n      >\n        <Form.Item label="name:">\n          <Input name="name" placeholder="name" />\n        </Form.Item>\n        {type === \'advance\' && (\n          <>\n            <Form.Item label="email:">\n              <Input name="email" placeholder="email" />\n            </Form.Item>\n            <Form.Item label="phone:">\n              <Input name="phone" placeholder="phone" />\n            </Form.Item>\n          </>\n        )}\n        <Form.Item label=" ">\n          <Form.Submit type="primary" onClick={submit}>\n            Search\n          </Form.Submit>\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Button onClick={reset}>reset</Button>\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Button text type="primary" onClick={changeType}>\n            {type === \'simple\' ? \'Expand\' : \'Close\'}\n          </Button>\n        </Form.Item>\n      </Form>\n    </div>\n  );\n\n  return (\n    <div>\n      {searchFrom}\n\n      <Table {...tableProps} filterParams={filters} sort={sorter} primaryKey="email">\n        <Table.Column title="name" dataIndex="name.last" width={140} />\n        <Table.Column title="email" dataIndex="email" width={500} />\n        <Table.Column title="phone" sortable dataIndex="phone" width={500} />\n        <Table.Column\n          title="gender"\n          filters={[\n            { label: \'male\', value: \'male\' },\n            { label: \'female\', value: \'female\' },\n          ]}\n          dataIndex="gender"\n          width={500}\n        />\n      </Table>\n      <Pagination style={{ marginTop: 16 }} {...paginationProps} />\n    </div>\n  );\n};\n\nconst Demo = () => {\n  const [show, setShow] = useState(true);\n\n  return (\n    <div>\n      <Button\n        type="primary"\n        warning\n        onClick={() => {\n          setShow(!show);\n        }}\n        style={{ marginBottom: 16 }}\n      >\n        {show ? \'Click to destroy\' : \'Click recovery\'}\n      </Button>\n      {show && <AppList />}\n    </div>\n  );\n};\n\nexport default Demo;',ne='import React from \'react\';\nimport { Table, Pagination, Field, Form, Input, Button, Select, Icon } from \'@alifd/next\';\nimport { useFusionTable } from \'ahooks\';\n\ninterface Item {\n  name: {\n    last: string;\n  };\n  email: string;\n  phone: string;\n  gender: \'male\' | \'female\';\n}\n\ninterface Result {\n  total: number;\n  list: Item[];\n}\n\nconst getTableData = ({ current, pageSize }, formData: Object): Promise<Result> => {\n  let query = `page=${current}&size=${pageSize}`;\n  Object.entries(formData).forEach(([key, value]) => {\n    if (value) {\n      query += `&${key}=${value}`;\n    }\n  });\n\n  return fetch(`https://randomuser.me/api?results=${pageSize}&${query}`)\n    .then((res) => res.json())\n    .then((res) => ({\n      total: 55,\n      list: res.results.slice(0, 10),\n    }));\n};\n\nconst AppList = () => {\n  const field = Field.useField([]);\n  const { paginationProps, tableProps, search, loading } = useFusionTable(getTableData, {\n    field,\n    defaultParams: [\n      { current: 2, pageSize: 5 },\n      { name: \'hello\', email: \'abc@gmail.com\', gender: \'female\' },\n    ],\n    defaultType: \'advance\',\n  });\n  const { type, changeType, submit, reset } = search;\n\n  const advanceSearchForm = (\n    <div>\n      <Form\n        inline\n        style={{ display: \'flex\', alignItems: \'center\', justifyContent: \'flex-end\' }}\n        field={field}\n      >\n        <Form.Item label="name:">\n          <Input name="name" placeholder="name" />\n        </Form.Item>\n        <Form.Item label="email:">\n          <Input name="email" placeholder="email" />\n        </Form.Item>\n        <Form.Item label="phone:">\n          <Input name="phone" placeholder="phone" />\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Form.Submit loading={loading} type="primary" onClick={submit}>\n            Search\n          </Form.Submit>\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Button onClick={reset}>reset</Button>\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Button text type="primary" onClick={changeType}>\n            Simple Search\n          </Button>\n        </Form.Item>\n      </Form>\n    </div>\n  );\n\n  const searchForm = (\n    <div>\n      <Form\n        inline\n        style={{ display: \'flex\', alignItems: \'center\', justifyContent: \'flex-end\' }}\n        field={field}\n      >\n        <Form.Item label=" ">\n          <Select name="gender" defaultValue="all" onChange={submit}>\n            <Select.Option value="all">all</Select.Option>\n            <Select.Option value="male">male</Select.Option>\n            <Select.Option value="female">female</Select.Option>\n          </Select>\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Input\n            name="name"\n            innerAfter={<Icon type="search" size="xs" onClick={submit} style={{ margin: 4 }} />}\n            placeholder="enter name"\n            onPressEnter={submit}\n          />\n        </Form.Item>\n\n        <Form.Item label=" ">\n          <Button text type="primary" onClick={changeType}>\n            Advanced Search\n          </Button>\n        </Form.Item>\n      </Form>\n    </div>\n  );\n\n  return (\n    <>\n      {type === \'simple\' ? searchForm : advanceSearchForm}\n      <Table {...tableProps} primaryKey="email">\n        <Table.Column title="name" dataIndex="name.last" width={140} />\n        <Table.Column title="email" dataIndex="email" width={500} />\n        <Table.Column title="phone" dataIndex="phone" width={500} />\n        <Table.Column title="gender" dataIndex="gender" width={500} />\n      </Table>\n      <Pagination style={{ marginTop: 16 }} {...paginationProps} />\n    </>\n  );\n};\n\nexport default AppList;',te='import React from \'react\';\nimport { Table, Pagination, Field, Form, Input, Select, Icon } from \'@alifd/next\';\nimport { useFusionTable } from \'ahooks\';\n\ninterface Item {\n  name: {\n    last: string;\n  };\n  email: string;\n  phone: string;\n  gender: \'male\' | \'female\';\n}\n\ninterface Result {\n  total: number;\n  list: Item[];\n}\n\nconst getTableData = ({ current, pageSize }, formData: Object): Promise<Result> => {\n  let query = `page=${current}&size=${pageSize}`;\n  Object.entries(formData).forEach(([key, value]) => {\n    if (value) {\n      query += `&${key}=${value}`;\n    }\n  });\n\n  return fetch(`https://randomuser.me/api?results=${pageSize}&${query}`)\n    .then((res) => res.json())\n    .then((res) => ({\n      total: 55,\n      list: res.results.slice(0, 10),\n    }));\n};\n\nconst AppList = () => {\n  const field = Field.useField([]);\n  const { paginationProps, tableProps, search } = useFusionTable(getTableData, {\n    field,\n    defaultParams: [{ current: 1, pageSize: 10 }, { name: \'hello\' }],\n  });\n  const { submit } = search;\n\n  const searchForm = (\n    <div>\n      <Form\n        inline\n        style={{ display: \'flex\', alignItems: \'center\', justifyContent: \'flex-end\' }}\n        field={field}\n      >\n        <Form.Item label=" ">\n          <Input\n            name="name"\n            innerAfter={<Icon type="search" size="xs" onClick={submit} style={{ margin: 4 }} />}\n            placeholder="enter name"\n            onPressEnter={submit}\n            {...field.init(\'name\', { rules: [{ required: true }] })}\n          />\n        </Form.Item>\n      </Form>\n    </div>\n  );\n\n  return (\n    <>\n      {searchForm}\n      <Table {...tableProps} primaryKey="email">\n        <Table.Column title="name" dataIndex="name.last" width={140} />\n        <Table.Column title="email" dataIndex="email" width={500} />\n        <Table.Column title="phone" dataIndex="phone" width={500} />\n        <Table.Column title="gender" dataIndex="gender" width={500} />\n      </Table>\n      <Pagination style={{ marginTop: 16 }} {...paginationProps} />\n    </>\n  );\n};\n\nexport default AppList;',re="import { useHistoryTravel } from 'ahooks';\nimport React from 'react';\n\nexport default () => {\n  const { value, setValue, backLength, forwardLength, back, forward } = useHistoryTravel<string>();\n\n  return (\n    <div>\n      <input value={value || ''} onChange={(e) => setValue(e.target.value)} />\n      <button disabled={backLength <= 0} onClick={back} style={{ margin: '0 8px' }}>\n        back\n      </button>\n      <button disabled={forwardLength <= 0} onClick={forward}>\n        forward\n      </button>\n    </div>\n  );\n};",oe="import { useHistoryTravel } from 'ahooks';\nimport React, { useState } from 'react';\n\nexport default () => {\n  const {\n    value,\n    setValue,\n    backLength,\n    forwardLength,\n    back,\n    forward,\n    go,\n    reset,\n  } = useHistoryTravel(['do homework']);\n\n  const [inputValue, setInputValue] = useState('');\n  const [step, setStep] = useState(0);\n\n  const onAdd = () => {\n    setValue([...value, inputValue]);\n    setInputValue('');\n  };\n\n  const onGo = () => {\n    go(step);\n    setStep(0);\n  };\n\n  const onReset = () => {\n    reset();\n    setStep(0);\n    setInputValue('');\n  };\n\n  return (\n    <div>\n      <div style={{ border: '1px solid #ebedf1', padding: 16, marginBottom: 16 }}>\n        <h3>TODO List</h3>\n        <ul>\n          {value.map((it, index) => (\n            <li key={index}>{it}</li>\n          ))}\n        </ul>\n      </div>\n      <div style={{ marginBottom: 16 }}>\n        <input\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          placeholder=\"Please enter TODO name\"\n          style={{ width: 200, marginRight: 8 }}\n        />\n        <button type=\"button\" onClick={onAdd} style={{ marginRight: 8 }}>\n          Add TODO\n        </button>\n        <button type=\"button\" disabled={backLength <= 0} onClick={back} style={{ marginRight: 8 }}>\n          Undo\n        </button>\n        <button\n          type=\"button\"\n          disabled={forwardLength <= 0}\n          onClick={forward}\n          style={{ marginRight: 8 }}\n        >\n          Redo\n        </button>\n        <button type=\"button\" disabled={!backLength && !forwardLength} onClick={onReset}>\n          Reset\n        </button>\n      </div>\n      <div>\n        <input\n          type=\"number\"\n          value={step}\n          onChange={(e) => setStep(e.target.value as any)}\n          max={forwardLength}\n          min={backLength * -1}\n          style={{ marginRight: 8, width: 60 }}\n        />\n        <button type=\"button\" onClick={onGo}>\n          Go\n        </button>\n      </div>\n    </div>\n  );\n};",se="import React, { useRef } from 'react';\nimport { useHover } from 'ahooks';\n\nexport default () => {\n  const ref = useRef();\n  const isHovering = useHover(ref);\n  return <div ref={ref}>{isHovering ? 'hover' : 'leaveHover'}</div>;\n};",ae="import React from 'react';\nimport { useHover } from 'ahooks';\n\nexport default () => {\n  const isHovering = useHover(() => document.getElementById('hover-div'), {\n    onEnter: () => {\n      console.log('onEnter');\n    },\n    onLeave: () => {\n      console.log('onLeave');\n    },\n  });\n\n  return <div id=\"hover-div\">{isHovering ? 'hover' : 'leaveHover'}</div>;\n};",ie="import React, { useRef } from 'react';\nimport { useInViewport } from 'ahooks';\n\nexport default () => {\n  const ref = useRef();\n  const inViewPort = useInViewport(ref);\n  return (\n    <div>\n      <div ref={ref}>observer dom</div>\n      <div style={{ marginTop: 70, color: inViewPort ? '#87d068' : '#f50' }}>\n        {inViewPort ? 'visible' : 'hidden'}\n      </div>\n    </div>\n  );\n};",ue="import React from 'react';\nimport { useInViewport } from 'ahooks';\n\nexport default () => {\n  const inViewPort = useInViewport(() => document.querySelector('#demo2'));\n  return (\n    <div>\n      <div id=\"demo2\">observer dom</div>\n      <div style={{ marginTop: 70, color: inViewPort ? '#87d068' : '#f50' }}>\n        {inViewPort ? 'visible' : 'hidden'}\n      </div>\n    </div>\n  );\n};",ce="import React, { useState } from 'react';\nimport { useInterval } from 'ahooks';\n\nexport default () => {\n  const [count, setCount] = useState(0);\n\n  useInterval(() => {\n    setCount(count + 1);\n  }, 1000);\n\n  return <div>count: {count}</div>;\n};",le="import React, { useState } from 'react';\nimport { useInterval } from 'ahooks';\n\nexport default () => {\n  const [count, setCount] = useState(0);\n  const [interval, setInterval] = useState(1000);\n\n  useInterval(\n    () => {\n      setCount(count + 1);\n    },\n    interval,\n    { immediate: true },\n  );\n\n  return (\n    <div>\n      <p> count: {count} </p>\n      <p style={{ marginTop: 16 }}> interval: {interval} </p>\n      <button onClick={() => setInterval(interval + 1000)} style={{ marginRight: 8 }}>\n        interval + 1000\n      </button>\n      <button\n        style={{ marginRight: 8 }}\n        onClick={() => {\n          setInterval(1000);\n        }}\n      >\n        reset interval\n      </button>\n      <button\n        onClick={() => {\n          setInterval(null);\n        }}\n      >\n        clear\n      </button>\n    </div>\n  );\n};",de="import React, { useState } from 'react';\nimport { useKeyPress } from 'ahooks';\n\nexport default () => {\n  const [counter, setCounter] = useState(0);\n\n  useKeyPress('ArrowUp', () => {\n    setCounter((s) => s + 1);\n  });\n\n  // keyCode value for ArrowDown\n  useKeyPress(40, () => {\n    setCounter((s) => s - 1);\n  });\n\n  return (\n    <div>\n      <p>Try pressing the following: </p>\n      <div>1. Press ArrowUp by key to increase</div>\n      <div>2. Press ArrowDown by keyCode to decrease</div>\n      <div>\n        counter: <span style={{ color: '#f00' }}>{counter}</span>\n      </div>\n    </div>\n  );\n};",pe="import React, { useState } from 'react';\nimport { useKeyPress } from 'ahooks';\n\nexport default () => {\n  const [counter, setCounter] = useState(0);\n\n  useKeyPress('left', () => {\n    setCounter((s) => s - 1);\n  });\n\n  useKeyPress('right', () => {\n    setCounter((s) => s + 1);\n  });\n\n  return (\n    <div>\n      <p>Try pressing the following: </p>\n      <div>1. Press ArrowLeft to decrease</div>\n      <div>2. Press ArrowRight to increase</div>\n      <div>\n        counter: <span style={{ color: '#f00' }}>{counter}</span>\n      </div>\n    </div>\n  );\n};",me="import React, { useState } from 'react';\nimport { Icon } from 'antd';\nimport { useKeyPress } from 'ahooks';\n\nexport default () => {\n  const [num, setNum] = useState<string>();\n  const [key, setKey] = useState<string>();\n  const [state, setState] = useState<number>();\n  const filterKey = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n  useKeyPress(filterKey, (event) => {\n    setNum(event.key);\n  });\n\n  // a s d f, Backspace, 8\n  useKeyPress([65, 83, 68, 70, 8, '8'], (event) => {\n    setKey(event.key);\n  });\n\n  useKeyPress(['shift.c'], () => {\n    setState(1);\n  });\n\n  useKeyPress(['meta'], () => {\n    setState(2);\n  });\n\n  useKeyPress('ctrl.alt.c', () => {\n    setState(3);\n  });\n\n  useKeyPress('ctrl.alt.space', () => {\n    setState(4);\n  });\n\n  // Attention: event.key === '0'\n  useKeyPress('ctrl.alt.0', () => {\n    setState(5);\n  });\n\n  return (\n    <div>\n      <p>Try pressing the following: </p>\n      <div>\n        1. Number key [0-9]: <span style={{ color: '#f00' }}>{num}</span>\n      </div>\n      <div>\n        2. Press key [a, s, d, f, Backspace, 8]: <span style={{ color: '#f00' }}>{key}</span>\n      </div>\n      <div>\n        3. Modifier key [shift.c]: {state === 1 && <Icon type=\"check\" style={{ color: '#f00' }} />}\n      </div>\n      <div>\n        4. Modifier key [meta]: {state === 2 && <Icon type=\"check\" style={{ color: '#f00' }} />}\n      </div>\n      <div>\n        5. Modifier key [ctrl.alt.c]:{' '}\n        {state === 3 && <Icon type=\"check\" style={{ color: '#f00' }} />}\n      </div>\n      <div>\n        6. Modifier key [ctrl.alt.space]:{' '}\n        {state === 4 && <Icon type=\"check\" style={{ color: '#f00' }} />}\n      </div>\n      <div>\n        7. Modifier key [ctrl.alt.0]:{' '}\n        {state === 5 && <Icon type=\"check\" style={{ color: '#f00' }} />}\n      </div>\n    </div>\n  );\n};",fe="import React, { useState } from 'react';\nimport { useKeyPress } from 'ahooks';\n\nexport default () => {\n  const [key, setKey] = useState<string>();\n  const filterKey = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n  useKeyPress(\n    (event) => !filterKey.includes(event.key),\n    (event) => {\n      if (event.type === 'keyup') {\n        setKey(event.key);\n      }\n    },\n    {\n      events: ['keydown', 'keyup'],\n    },\n  );\n\n  return (\n    <div>\n      Pressing key except number key\uff1a<span style={{ color: '#f00' }}>{key}</span>\n    </div>\n  );\n};",ve="import React, { useState, useRef } from 'react';\nimport { useKeyPress } from 'ahooks';\n\nexport default () => {\n  const inputRef = useRef();\n\n  const [text, setText] = useState('');\n  const [textRef, setTextRef] = useState('');\n  const [textSync, setTextSync] = useState('');\n  useKeyPress(\n    'enter',\n    (event: any) => {\n      const { value } = event.target;\n      setText(value);\n    },\n    {\n      events: ['keyup'],\n      target: () => document.getElementById('input'),\n    },\n  );\n\n  useKeyPress(\n    'enter',\n    (event: any) => {\n      const { value } = event.target;\n      setTextRef(value);\n    },\n    {\n      target: inputRef,\n    },\n  );\n\n  // Make sure the DOM exists\n  useKeyPress(\n    () => true,\n    (event: any) => {\n      const { value } = event.target;\n      setTextSync(value);\n    },\n    {\n      events: ['keyup'],\n      target: document.getElementById('input2'),\n    },\n  );\n\n  return (\n    <div>\n      <div>\n        <p>Input and pressing enter: {text}</p>\n        <input id=\"input\" style={{ width: 300, marginRight: 24 }} />\n      </div>\n      <div style={{ marginTop: 24 }}>\n        <p>Input and pressing enter: {textRef}</p>\n        <input ref={inputRef} style={{ width: 300, marginRight: 24 }} />\n      </div>\n      <div style={{ marginTop: 24 }}>\n        <p>Input after enter change: {textSync}</p>\n        <input id=\"input2\" style={{ width: 300, marginRight: 24 }} />\n      </div>\n    </div>\n  );\n};",he="import React from 'react';\nimport { useLocalStorageState } from 'ahooks';\n\nexport default function () {\n  const [message, setMessage] = useLocalStorageState('user-message', 'Hello~');\n  return (\n    <>\n      <input\n        value={message || ''}\n        placeholder=\"Please enter some words...\"\n        onChange={(e) => setMessage(e.target.value)}\n      />\n      <button style={{ margin: '0 8px' }} type=\"button\" onClick={() => setMessage('Hello~')}>\n        Reset\n      </button>\n      <button type=\"button\" onClick={() => setMessage()}>\n        Clear\n      </button>\n    </>\n  );\n}",be="import React from 'react';\nimport { useLocalStorageState } from 'ahooks';\n\nconst defaultArray = ['a', 'e', 'i', 'o', 'u'];\n\nexport default function () {\n  const [value, setValue] = useLocalStorageState('cascader', defaultArray);\n\n  return (\n    <>\n      <p>{value.join('-')}</p>\n      <button\n        type=\"button\"\n        style={{ marginRight: '16px' }}\n        onClick={() => setValue([...value, Math.random().toString(36).slice(-1)])}\n      >\n        push random\n      </button>\n      <button type=\"button\" onClick={() => setValue(defaultArray)}>\n        reset\n      </button>\n    </>\n  );\n}",ge="import React from 'react';\nimport { useLocalStorageState } from 'ahooks';\n\ninterface IUser {\n  id: number;\n  name: string;\n  age: number;\n}\n\nexport default function () {\n  const [user, setUser] = useLocalStorageState('user', {\n    id: 9234634791,\n    name: 'Zhangsan',\n    age: 33,\n  } as IUser);\n\n  return (\n    <>\n      <input\n        style={{ width: 200 }}\n        defaultValue={user.name}\n        placeholder=\"input user name\"\n        onChange={(e) => {\n          setUser((u: IUser) => ({ ...u, name: e.target.value }));\n        }}\n      />\n    </>\n  );\n}",ye="import React, { useState } from 'react';\nimport { message } from 'antd';\nimport { useLockFn } from 'ahooks';\n\nfunction mockApiRequest() {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve();\n    }, 2000);\n  });\n}\n\nexport default () => {\n  const [count, setCount] = useState(0);\n\n  const submit = useLockFn(async () => {\n    message.info('Start to submit');\n    await mockApiRequest();\n    setCount((val) => val + 1);\n    message.success('Submit finished');\n  });\n\n  return (\n    <>\n      <p>Submit count: {count}</p>\n      <button onClick={submit}>Submit</button>\n    </>\n  );\n};",we="import React from 'react';\nimport { useMap } from 'ahooks';\n\nexport default () => {\n  const [map, { set, setAll, remove, reset, get }] = useMap<string | number, string>([\n    ['msg', 'hello world'],\n    [123, 'number type'],\n  ]);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={() => set(String(Date.now()), new Date().toJSON())}>\n        Add\n      </button>\n      <button\n        type=\"button\"\n        onClick={() => setAll([['text', 'this is a new Map']])}\n        style={{ margin: '0 8px' }}\n      >\n        Set new Map\n      </button>\n      <button type=\"button\" onClick={() => remove('msg')} disabled={!get('msg')}>\n        Remove 'msg'\n      </button>\n      <button type=\"button\" onClick={() => reset()} style={{ margin: '0 8px' }}>\n        Reset\n      </button>\n      <div style={{ marginTop: 16 }}>\n        <pre>{JSON.stringify(Array.from(map), null, 2)}</pre>\n      </div>\n    </div>\n  );\n};",ke="import React from 'react';\nimport { message } from 'antd';\nimport { useToggle, useMount } from 'ahooks';\n\nconst MyComponent = () => {\n  useMount(() => {\n    message.info('mount');\n  });\n\n  return <div>Hello World</div>;\n};\n\nexport default () => {\n  const [state, { toggle }] = useToggle(false);\n\n  return (\n    <>\n      <button type=\"button\" onClick={() => toggle()}>\n        {state ? 'unmount' : 'mount'}\n      </button>\n      {state && <MyComponent />}\n    </>\n  );\n};",xe="import { useMouse } from 'ahooks';\nimport React from 'react';\n\nexport default () => {\n  const mouse = useMouse();\n\n  return <div>Mouse Pos: {JSON.stringify(mouse)}</div>;\n};",Ce="import React from 'react';\nimport { useNetwork } from 'ahooks';\n\nexport default () => {\n  const networkState = useNetwork();\n\n  return (\n    <div>\n      <p>Effects\uff1a{JSON.stringify(networkState)}</p>\n    </div>\n  );\n};",Se="import React, { useState, useCallback, useRef } from 'react';\nimport { message } from 'antd';\nimport { usePersistFn } from 'ahooks';\n\nexport default () => {\n  const [count, setCount] = useState(0);\n\n  const showCountPersistFn = usePersistFn(() => {\n    message.info(`Current count is ${count}`);\n  });\n\n  const showCountCommon = useCallback(() => {\n    message.info(`Current count is ${count}`);\n  }, [count]);\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onClick={() => {\n          setCount((c) => c + 1);\n        }}\n      >\n        Add Count\n      </button>\n      <p>You can click the button to see the number of sub-component renderings</p>\n\n      <div style={{ marginTop: 32 }}>\n        <h4>Component with persist function:</h4>\n        {/* use persist function, ExpensiveTree component will only render once */}\n        <ExpensiveTree showCount={showCountPersistFn} />\n      </div>\n      <div style={{ marginTop: 32 }}>\n        <h4>Component without persist function:</h4>\n        {/* without persist function, ExpensiveTree component will re-render on state change */}\n        <ExpensiveTree showCount={showCountCommon} />\n      </div>\n    </>\n  );\n};\n\n// some expensive component with React.memo\nconst ExpensiveTree = React.memo<{ [key: string]: any }>(({ showCount }) => {\n  const renderCountRef = useRef(0);\n  renderCountRef.current += 1;\n\n  return (\n    <div>\n      <p>Render Count: {renderCountRef.current}</p>\n      <button type=\"button\" onClick={showCount}>\n        showParentCount\n      </button>\n    </div>\n  );\n});",Pe="import { usePrevious } from 'ahooks';\nimport React, { useState } from 'react';\n\nexport default () => {\n  const [count, setCount] = useState(0);\n  const previous = usePrevious(count);\n  return (\n    <>\n      <div>counter current value: {count}</div>\n      <div style={{ marginBottom: 8 }}>counter previous value: {previous}</div>\n      <button type=\"button\" onClick={() => setCount((c) => c + 1)}>\n        increase\n      </button>\n      <button type=\"button\" style={{ marginLeft: 8 }} onClick={() => setCount((c) => c - 1)}>\n        decrease\n      </button>\n    </>\n  );\n};",Re="import React, { useState } from 'react';\nimport { usePrevious } from 'ahooks';\n\ninterface Person {\n  name: string;\n  job: string;\n}\n\nconst nameCompareFunction = (prev: Person | undefined, next: Person) => {\n  if (!prev) {\n    return true;\n  }\n  if (prev.name !== next.name) {\n    return true;\n  }\n  return false;\n};\n\nconst jobCompareFunction = (prev: Person | undefined, next: Person) => {\n  if (!prev) {\n    return true;\n  }\n  if (prev.job !== next.job) {\n    return true;\n  }\n  return false;\n};\n\nexport default () => {\n  const [state, setState] = useState({ name: 'Jack', job: 'student' });\n  const [nameInput, setNameInput] = useState('');\n  const [jobInput, setJobInput] = useState('');\n  const previousName = usePrevious(state, nameCompareFunction);\n  const previousJob = usePrevious(state, jobCompareFunction);\n\n  return (\n    <>\n      <div style={{ margin: '8px 0', border: '1px solid #e8e8e8', padding: 8 }}>\n        <div>current name: {state.name}</div>\n        <div>current job: {state.job}</div>\n      </div>\n      <div>previous name: {(previousName || {}).name}</div>\n      <div style={{ marginBottom: 8 }}>previous job: {(previousJob || {}).job}</div>\n      <div style={{ marginTop: 8 }}>\n        <input\n          style={{ width: 220 }}\n          value={nameInput}\n          onChange={(e) => setNameInput(e.target.value)}\n          placeholder=\"new name\"\n        />\n        <button\n          type=\"button\"\n          onClick={() => {\n            setState((s) => ({ ...s, name: nameInput }));\n          }}\n          style={{ marginLeft: 8 }}\n        >\n          update\n        </button>\n      </div>\n      <div style={{ marginTop: 8 }}>\n        <input\n          style={{ width: 220 }}\n          value={jobInput}\n          onChange={(e) => setJobInput(e.target.value)}\n          placeholder=\"new job\"\n        />\n        <button\n          type=\"button\"\n          onClick={() => {\n            setState((s) => ({ ...s, job: jobInput }));\n          }}\n          style={{ marginLeft: 8 }}\n        >\n          update\n        </button>\n      </div>\n    </>\n  );\n};",Oe="import React from 'react';\nimport { useReactive } from 'ahooks';\n\nexport default () => {\n  const state = useReactive({\n    count: 0,\n    inputVal: '',\n    obj: {\n      value: '',\n    },\n  });\n\n  return (\n    <div>\n      <p> state.count\uff1a{state.count}</p>\n\n      <button style={{ marginRight: 8 }} onClick={() => state.count++}>\n        state.count++\n      </button>\n      <button onClick={() => state.count--}>state.count--</button>\n\n      <p style={{ marginTop: 20 }}> state.inputVal: {state.inputVal}</p>\n      <input onChange={(e) => (state.inputVal = e.target.value)} />\n\n      <p style={{ marginTop: 20 }}> state.obj.value: {state.obj.value}</p>\n      <input onChange={(e) => (state.obj.value = e.target.value)} />\n    </div>\n  );\n};",je="import React from 'react';\nimport { useReactive } from 'ahooks';\n\nexport default () => {\n  const state = useReactive({\n    arr: [],\n  });\n\n  return (\n    <div>\n      <p>\n        state.arr: <span role=\"test-array\">{JSON.stringify(state.arr)}</span>\n      </p>\n      <button\n        style={{ marginRight: '10px' }}\n        onClick={() => state.arr.push(Math.floor(Math.random() * 100))}\n        role=\"pushbtn\"\n      >\n        push\n      </button>\n      <button style={{ marginRight: '10px' }} onClick={() => state.arr.pop()} role=\"popbtn\">\n        pop\n      </button>\n      <button style={{ marginRight: '10px' }} onClick={() => state.arr.shift()} role=\"shiftbtn\">\n        shift\n      </button>\n      <button\n        style={{ marginRight: '10px' }}\n        role=\"unshiftbtn\"\n        onClick={() => state.arr.unshift(Math.floor(Math.random() * 100))}\n      >\n        unshift\n      </button>\n      <button style={{ marginRight: '10px' }} role=\"reverse\" onClick={() => state.arr.reverse()}>\n        reverse\n      </button>\n      <button style={{ marginRight: '10px' }} role=\"sort\" onClick={() => state.arr.sort()}>\n        sort\n      </button>\n    </div>\n  );\n};",ze="import React from 'react';\nimport { useReactive } from 'ahooks';\n\nexport default () => {\n  const state = useReactive({\n    bug: '',\n    bugs: ['feat', 'fix', 'chore'],\n    addBug(bug) {\n      this.bugs.push(bug);\n    },\n    get bugsCount() {\n      return this.bugs.length;\n    },\n  });\n\n  return (\n    <div>\n      <p>state.bugsCount: {state.bugsCount}</p>\n\n      <form\n        onSubmit={(e) => {\n          state.addBug(state.bug);\n          state.bug = '';\n          e.preventDefault();\n        }}\n      >\n        <input type=\"text\" value={state.bug} onChange={(e) => (state.bug = e.target.value)} />\n        <button type=\"submit\" style={{ marginLeft: '10px' }}>\n          Add\n        </button>\n        <button type=\"button\" style={{ marginLeft: '10px' }} onClick={() => state.bugs.pop()}>\n          Delete\n        </button>\n      </form>\n\n      <br />\n\n      <ul>\n        {state.bugs.map((bug) => (\n          <li key={bug}>{bug}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};",Te="import React, { useEffect, useState } from 'react';\nimport { useReactive } from 'ahooks';\n\nexport default () => {\n  const state = useReactive({ count: 0 });\n  const [stateCount, setStateCount] = useState(0);\n\n  const state2 = useReactive({ count: 0 });\n  const [stateCount2, setStateCount2] = useState(0);\n\n  // \u4f9d\u8d56\u7684\u662f\u5bf9\u8c61\uff0c\u56e0\u4e3a\u59cb\u7ec8\u540c\u4e00\u4e2a\u5f15\u7528\uff0c\u6240\u4ee5\u4e0d\u4f1a\u6267\u884c\n  useEffect(() => {\n    setStateCount(stateCount + 1);\n  }, [state]);\n\n  // \u4f9d\u8d56\u7684\u57fa\u7840\u6570\u636e\u7c7b\u578b\uff0c\u6240\u4ee5\u53ea\u8981\u6539\u53d8\u5c31\u4f1a\u91cd\u65b0\u6267\u884c\n  useEffect(() => {\n    setStateCount2(stateCount2 + 1);\n  }, [state2.count]);\n\n  return (\n    <div>\n      <button style={{ marginTop: 20 }} onClick={() => (state.count += 1)}>\n        stateCount + 1\n      </button>\n      <p>stateCount:{stateCount}</p>\n\n      <button style={{ marginTop: 20 }} onClick={() => (state2.count += 1)}>\n        stateCount2 + 1\n      </button>\n      <p>stateCount2:{stateCount2}</p>\n    </div>\n  );\n};",Ie="import React from 'react';\nimport { configResponsive, useResponsive } from 'ahooks';\n\nconfigResponsive({\n  small: 0,\n  middle: 800,\n  large: 1200,\n});\n\nexport default function () {\n  const responsive = useResponsive();\n  return (\n    <>\n      <p>Please change the width of the browser window to see the effect: </p>\n      {Object.keys(responsive).map((key) => (\n        <p key={key}>\n          {key} {responsive[key] ? '\u2714' : '\u2718'}\n        </p>\n      ))}\n    </>\n  );\n}",Fe="import React, { useState } from 'react';\nimport useSafeState from '../index';\n\n\nconst Child = () => {\n\n  const [value, setValue] = useSafeState<string>()\n  React.useEffect(() => {\n    setTimeout(() => {\n      setValue('\u4ece\u670d\u52a1\u7aef\u83b7\u53d6\u7684\u6570\u636e')\n    }, 5000)\n  }, [])\n\n  const text = value || '\u6b63\u5728\u83b7\u53d6\u6570\u636e\u3002\u3002\u3002'\n\n  return (\n    <div>{text}</div>\n  )\n}\n\n\nexport default () => {\n  \n\n  const [visible, setVisible] = useSafeState(true);\n\n\n  return (\n    <div>\n      <button onClick={() => setVisible(false)}>\u5378\u8f7d</button>\n      {visible && <Child />}\n    </div>\n  );\n};",Ne="\nimport React, { Dispatch, SetStateAction } from 'react'\nimport useUnmountedRef from '../useUnmountedRef'\n\nfunction useSafeState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]\n\nfunction useSafeState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];\n\n\nfunction useSafeState(initialState?) {\n  const unmountedRef = useUnmountedRef()\n  const [state, setState] = React.useState(initialState)\n  const setCurrentState = (currentState) => {\n    /** \u5982\u679c\u7ec4\u4ef6\u5df2\u7ecf\u5378\u8f7d\u5219\u4e0d\u518d\u66f4\u65b0 state */\n    if (unmountedRef.current) return\n    setState(currentState)\n  }\n\n  return [state, setCurrentState] as const\n}\n\nexport default useSafeState",De="import { useRef, useEffect } from 'react';\n\nconst useUnmountedRef = () => {\n  const unmountedRef = useRef(false);\n  useEffect(() => {\n    return () => {\n      unmountedRef.current = true;\n    };\n  }, []);\n  return unmountedRef;\n};\n\nexport default useUnmountedRef;",qe="import React, { useRef } from 'react';\nimport { useScroll } from 'ahooks';\n\nexport default () => {\n  const ref = useRef(null);\n  const scroll = useScroll(ref);\n  return (\n    <>\n      <div>{JSON.stringify(scroll)}</div>\n      <div\n        style={{\n          height: '160px',\n          width: '160px',\n          border: 'solid 1px #000',\n          overflow: 'scroll',\n          whiteSpace: 'nowrap',\n          fontSize: '32px',\n        }}\n        ref={ref}\n      >\n        <div>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur atque, debitis ex\n          excepturi explicabo iste iure labore molestiae neque optio perspiciatis\n        </div>\n        <div>\n          Aspernatur cupiditate, deleniti id incidunt mollitia omnis! A aspernatur assumenda\n          consequuntur culpa cumque dignissimos enim eos, et fugit natus nemo nesciunt\n        </div>\n        <div>\n          Alias aut deserunt expedita, inventore maiores minima officia porro rem. Accusamus ducimus\n          magni modi mollitia nihil nisi provident\n        </div>\n        <div>\n          Alias aut autem consequuntur doloremque esse facilis id molestiae neque officia placeat,\n          quia quisquam repellendus reprehenderit.\n        </div>\n        <div>\n          Adipisci blanditiis facere nam perspiciatis sit soluta ullam! Architecto aut blanditiis,\n          consectetur corporis cum deserunt distinctio dolore eius est exercitationem\n        </div>\n        <div>Ab aliquid asperiores assumenda corporis cumque dolorum expedita</div>\n        <div>\n          Culpa cumque eveniet natus totam! Adipisci, animi at commodi delectus distinctio dolore\n          earum, eum expedita facilis\n        </div>\n        <div>\n          Quod sit, temporibus! Amet animi fugit officiis perspiciatis, quis unde. Cumque\n          dignissimos distinctio, dolor eaque est fugit nisi non pariatur porro possimus, quas quasi\n        </div>\n      </div>\n    </>\n  );\n};",Ee="import React from 'react';\nimport { useScroll } from 'ahooks';\n\nexport default () => {\n  const scroll = useScroll(document);\n  return (\n    <div>\n      <div>{JSON.stringify(scroll)}</div>\n    </div>\n  );\n};",Ae="import React, { useRef } from 'react';\nimport { useScroll } from 'ahooks';\n\nexport default () => {\n  const ref = useRef(null);\n\n  const scroll = useScroll(ref, (val) => val.top > 100 && val.top < 200);\n\n  return (\n    <>\n      <div>{JSON.stringify(scroll)}</div>\n      <div\n        className={'main'}\n        style={{\n          height: '160px',\n          width: '160px',\n          border: 'solid 1px #000',\n          overflow: 'scroll',\n          whiteSpace: 'nowrap',\n          fontSize: '36px',\n        }}\n        ref={ref}\n      >\n        <div>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur atque, debitis ex\n          excepturi explicabo iste iure labore molestiae neque optio perspiciatis\n        </div>\n        <div>\n          Aspernatur cupiditate, deleniti id incidunt mollitia omnis! A aspernatur assumenda\n          consequuntur culpa cumque dignissimos enim eos, et fugit natus nemo nesciunt\n        </div>\n        <div>\n          Alias aut deserunt expedita, inventore maiores minima officia porro rem. Accusamus ducimus\n          magni modi mollitia nihil nisi provident\n        </div>\n        <div>\n          Alias aut autem consequuntur doloremque esse facilis id molestiae neque officia placeat,\n          quia quisquam repellendus reprehenderit.\n        </div>\n        <div>\n          Adipisci blanditiis facere nam perspiciatis sit soluta ullam! Architecto aut blanditiis,\n          consectetur corporis cum deserunt distinctio dolore eius est exercitationem\n        </div>\n        <div>Ab aliquid asperiores assumenda corporis cumque dolorum expedita</div>\n        <div>\n          Culpa cumque eveniet natus totam! Adipisci, animi at commodi delectus distinctio dolore\n          earum, eum expedita facilis\n        </div>\n        <div>\n          Quod sit, temporibus! Amet animi fugit officiis perspiciatis, quis unde. Cumque\n          dignissimos distinctio, dolor eaque est fugit nisi non pariatur porro possimus, quas quasi\n        </div>\n      </div>\n    </>\n  );\n};",Le="import { Checkbox, Col, Row } from 'antd';\nimport React, { useMemo, useState } from 'react';\nimport { useSelections } from 'ahooks';\n\nexport default () => {\n  const [hideOdd, setHideOdd] = useState(false);\n  const list = useMemo(() => {\n    if (hideOdd) {\n      return [2, 4, 6, 8];\n    }\n    return [1, 2, 3, 4, 5, 6, 7, 8];\n  }, [hideOdd]);\n\n  const {\n    selected,\n    allSelected,\n    isSelected,\n    toggle,\n    toggleAll,\n    partiallySelected,\n  } = useSelections(list, [1]);\n\n  return (\n    <div>\n      <div>Selected : {selected.join(',')}</div>\n      <div style={{ borderBottom: '1px solid #E9E9E9', padding: '10px 0' }}>\n        <Checkbox checked={allSelected} onClick={toggleAll} indeterminate={partiallySelected}>\n          Check all\n        </Checkbox>\n        <Checkbox checked={hideOdd} onClick={() => setHideOdd((v) => !v)}>\n          Hide Odd\n        </Checkbox>\n      </div>\n      <Row style={{ padding: '10px 0' }}>\n        {list.map((o) => (\n          <Col span={12} key={o}>\n            <Checkbox checked={isSelected(o)} onClick={() => toggle(o)}>\n              {o}\n            </Checkbox>\n          </Col>\n        ))}\n      </Row>\n    </div>\n  );\n};",Be="import { useSessionStorageState } from 'ahooks';\nimport React from 'react';\n\nexport default function () {\n  const [message, setMessage] = useSessionStorageState('user-message', 'Hello~');\n  return (\n    <>\n      <input\n        value={message}\n        onChange={(e) => {\n          setMessage(e.target.value);\n        }}\n        placeholder=\"Please enter some words...\"\n        style={{ width: 200, marginRight: 8 }}\n      />\n      <button\n        type=\"button\"\n        onClick={() => {\n          setMessage();\n        }}\n      >\n        Reset\n      </button>\n    </>\n  );\n}",Me="import { useSessionStorageState } from 'ahooks';\nimport React from 'react';\n\nconst defaultArray = ['a', 'e', 'i', 'o', 'u'];\n\nexport default function () {\n  const [value, setValue] = useSessionStorageState('cascader', defaultArray);\n\n  return (\n    <>\n      <p>{value.join('-')}</p>\n      <button\n        type=\"button\"\n        style={{ marginRight: 8 }}\n        onClick={() => setValue([...value, Math.random().toString(36).slice(-1)])}\n      >\n        push random\n      </button>\n      <button type=\"button\" onClick={() => setValue(defaultArray)}>\n        reset\n      </button>\n    </>\n  );\n}",_e="import React from 'react';\nimport { useSessionStorageState } from 'ahooks';\n\ninterface IUser {\n  id: number;\n  name: string;\n  age: number;\n}\n\nexport default function () {\n  const [user, setUser] = useSessionStorageState('user', {\n    id: 9234634791,\n    name: 'Zhangsan',\n    age: 33,\n  } as IUser);\n\n  return (\n    <>\n      <input\n        style={{ width: 200 }}\n        defaultValue={user.name}\n        placeholder=\"input user name\"\n        onChange={(e) => {\n          setUser((u: IUser) => ({ ...u, name: e.target.value }));\n        }}\n      />\n    </>\n  );\n}",Ue="import React from 'react';\nimport { useSet } from 'ahooks';\n\nexport default () => {\n  const [set, { add, has, remove, reset }] = useSet(['Hello']);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={() => add(String(Date.now()))}>\n        Add Timestamp\n      </button>\n      <button\n        type=\"button\"\n        onClick={() => remove('Hello')}\n        disabled={!has('Hello')}\n        style={{ margin: '0 8px' }}\n      >\n        Remove Hello\n      </button>\n      <button type=\"button\" onClick={() => reset()}>\n        Reset\n      </button>\n      <div style={{ marginTop: 16 }}>\n        <pre>{JSON.stringify(Array.from(set), null, 2)}</pre>\n      </div>\n    </div>\n  );\n};",Ve="import React from 'react';\nimport { useSetState } from 'ahooks';\n\ninterface State {\n  hello: string;\n  count: number;\n  [key: string]: any;\n}\n\nexport default () => {\n  const [state, setState] = useSetState<State>({\n    hello: '',\n    count: 0,\n  });\n\n  return (\n    <div>\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <p>\n        <button type=\"button\" onClick={() => setState({ hello: 'world' })}>\n          set hello\n        </button>\n        <button type=\"button\" onClick={() => setState({ foo: 'bar' })} style={{ margin: '0 8px' }}>\n          set foo\n        </button>\n        <button type=\"button\" onClick={() => setState((prev) => ({ count: prev.count + 1 }))}>\n          count + 1\n        </button>\n      </p>\n    </div>\n  );\n};",$e="import React, { useRef } from 'react';\nimport { useSize } from 'ahooks';\n\nexport default () => {\n  const ref = useRef();\n  const size = useSize(ref);\n  return (\n    <div ref={ref}>\n      try to resize the preview window <br />\n      dimensions -- width: {size.width} px, height: {size.height} px\n    </div>\n  );\n};",Ke="import React from 'react';\nimport { useSize } from 'ahooks';\n\nexport default () => {\n  const dom = document.querySelector('body');\n  const size = useSize(dom);\n  return (\n    <div>\n      try to resize the preview window <br />\n      dimensions -- width: {size.width} px, height: {size.height} px\n    </div>\n  );\n};",He="import React from 'react';\nimport { useTextSelection } from 'ahooks';\n\nexport default () => {\n  const { text } = useTextSelection();\n  return (\n    <div>\n      <p>You can select text all page.</p>\n      <p>Result\uff1a{text}</p>\n    </div>\n  );\n};",We="import React, { useRef } from 'react';\nimport { useTextSelection } from 'ahooks';\n\nexport default () => {\n  const ref = useRef();\n  const selection = useTextSelection(ref);\n  return (\n    <div>\n      <div ref={ref} style={{ border: '1px solid', padding: 20 }}>\n        <p>Please swipe your mouse to select any text on this paragraph.</p>\n      </div>\n      <p>Result\uff1a{JSON.stringify(selection)}</p>\n    </div>\n  );\n};",Je="import { useRequest, useTextSelection } from 'ahooks';\nimport { Popover, Spin } from 'antd';\nimport React, { useEffect, useState } from 'react';\n\nconst getResult = (keyword: string): Promise<string> => {\n  const trimedText = keyword.trim() !== '';\n  if (!trimedText) {\n    return Promise.resolve('');\n  }\n  return new Promise((resolve) => {\n    setTimeout(() => resolve(`[translate result] ${keyword}`), 2000);\n  });\n};\n\nexport default () => {\n  const { text = '', left = 0, top = 0, height = 0, width = 0 } = useTextSelection(() =>\n    document.querySelector('#translate-dom'),\n  );\n\n  const [visible, setVisible] = useState(false);\n\n  const { data, run, loading } = useRequest(getResult, {\n    manual: true,\n  });\n\n  useEffect(() => {\n    if (text.trim() === '') {\n      setVisible(false);\n      return;\n    }\n    setVisible(true);\n    run(text);\n  }, [text]);\n\n  return (\n    <div>\n      <p id=\"translate-dom\" style={{ padding: 20, border: '1px solid' }}>\n        Translation of this paragraph;Translation of this paragraph;Translation of this paragraph;\n      </p>\n      <Popover\n        content={<Spin spinning={loading}>{loading ? 'Translating\u2026\u2026' : data}</Spin>}\n        visible={visible}\n      >\n        <span\n          style={{\n            position: 'fixed',\n            top: `${top}px`,\n            left: `${left}px`,\n            height: `${height}px`,\n            width: `${width}px`,\n            pointerEvents: 'none',\n          }}\n        />\n      </Popover>\n    </div>\n  );\n};",Ye="import React, { useState } from 'react';\nimport { useThrottle } from 'ahooks';\n\nexport default () => {\n  const [value, setValue] = useState<string>();\n  const throttledValue = useThrottle(value, { wait: 500 });\n\n  return (\n    <div>\n      <input\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Typed value\"\n        style={{ width: 280 }}\n      />\n      <p style={{ marginTop: 16 }}>throttledValue: {throttledValue}</p>\n    </div>\n  );\n};",Ge="import React, { useState } from 'react';\nimport { useThrottleEffect } from 'ahooks';\n\nexport default () => {\n  const [value, setValue] = useState('hello');\n  const [records, setRecords] = useState<string[]>([]);\n  useThrottleEffect(\n    () => {\n      setRecords((val) => [...val, value]);\n    },\n    [value],\n    {\n      wait: 1000,\n    },\n  );\n  return (\n    <div>\n      <input\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Typed value\"\n        style={{ width: 280 }}\n      />\n      <p style={{ marginTop: 16 }}>\n        <ul>\n          {records.map((record, index) => (\n            <li key={index}>{record}</li>\n          ))}\n        </ul>\n      </p>\n    </div>\n  );\n};",Ze="import React, { useState } from 'react';\nimport { useThrottleFn } from 'ahooks';\n\nexport default () => {\n  const [value, setValue] = useState(0);\n  const { run } = useThrottleFn(\n    () => {\n      setValue(value + 1);\n    },\n    { wait: 500 },\n  );\n\n  return (\n    <div>\n      <p style={{ marginTop: 16 }}> Clicked count: {value} </p>\n      <button type=\"button\" onClick={run}>\n        Click fast!\n      </button>\n    </div>\n  );\n};",Qe="import React, { useState } from 'react';\nimport { useTimeout } from 'ahooks';\n\nexport default () => {\n  const [state, setState] = useState(1);\n  useTimeout(() => {\n    setState(state + 1);\n  }, 3000);\n\n  return (\n    <div>\n      <p style={{ marginTop: 16 }}> {state} </p>\n    </div>\n  );\n};",Xe="import React from 'react';\nimport { useTitle } from 'ahooks';\n\nexport default () => {\n  useTitle('Page Title');\n\n  return (\n    <div>\n      <p>sets title of the page.</p>\n    </div>\n  );\n};",en="import React from 'react';\nimport { useToggle } from 'ahooks';\n\nexport default () => {\n  const [state, { toggle }] = useToggle();\n\n  return (\n    <div>\n      <p>Effects\uff1a{`${state}`}</p>\n      <p>\n        <button type=\"button\" onClick={() => toggle()}>\n          Toggle\n        </button>\n        <button type=\"button\" onClick={() => toggle(false)} style={{ margin: '0 8px' }}>\n          Toggle False\n        </button>\n        <button type=\"button\" onClick={() => toggle(true)}>\n          Toggle True\n        </button>\n      </p>\n    </div>\n  );\n};",nn="import React from 'react';\nimport { useToggle } from 'ahooks';\n\nexport default () => {\n  const [state, { toggle, setLeft, setRight }] = useToggle('Hello', 'World');\n\n  return (\n    <div>\n      <p>Effects\uff1a{state}</p>\n      <p>\n        <button type=\"button\" onClick={() => toggle()}>\n          Toggle\n        </button>\n        <button type=\"button\" onClick={() => toggle('Hello')} style={{ margin: '0 8px' }}>\n          Toggle Hello\n        </button>\n        <button type=\"button\" onClick={() => toggle('World')}>\n          Toggle World\n        </button>\n        <button type=\"button\" onClick={setLeft} style={{ margin: '0 8px' }}>\n          Set Hello\n        </button>\n        <button type=\"button\" onClick={setRight}>\n          Set World\n        </button>\n      </p>\n    </div>\n  );\n};",tn='import React, { useLayoutEffect, useState } from \'react\';\nimport { useTrackedEffect } from \'ahooks\';\n\nexport default () => {\n  const [dep1, setDep1] = useState(0);\n  const [dep2, setDep2] = useState(0);\n  const [dep3, setDep3] = useState(0);\n  const [depActiveList, setDepActiveList] = useState([false, false, false]);\n  const [text, setText] = useState(\'Hi there...\');\n  const toggleDep = (idx) => {\n    const newList = [...depActiveList];\n    newList[idx] = !newList[idx];\n    setDepActiveList(newList);\n  };\n  const mutateDep = () => {\n    setText(``);\n    depActiveList[0] && setDep1((c) => c + 1);\n    depActiveList[1] && setDep2((c) => c + 1);\n    depActiveList[2] && setDep3((c) => c + 1);\n  };\n  useTrackedEffect(\n    (changes) => {\n      setText(`Index of changed dependencies: ` + changes);\n      return () => {\n        // do something\n      };\n    },\n    [dep1, dep2, dep3],\n  );\n  return (\n    <div>\n      <p>\n        <input type="checkbox" checked={depActiveList[0]} onChange={() => toggleDep(0)} />\n        &nbsp;Dependency 0 : {dep1}\n      </p>\n      <p>\n        <input type="checkbox" checked={depActiveList[1]} onChange={() => toggleDep(1)} />\n        &nbsp;Dependency 1 : {dep2}\n      </p>\n      <p>\n        <input type="checkbox" checked={depActiveList[2]} onChange={() => toggleDep(2)} />\n        &nbsp;Dependency 2 : {dep3}\n      </p>\n      <p>\n        <button type="button" onClick={mutateDep}>\n          Increase count\n        </button>\n      </p>\n      <p>{text}</p>\n    </div>\n  );\n};',rn="import { useToggle, useUnmount } from 'ahooks';\nimport { message } from 'antd';\nimport React from 'react';\n\nconst MyComponent = () => {\n  useUnmount(() => {\n    message.info('unmount');\n  });\n\n  return <div>Hello World</div>;\n};\n\nexport default () => {\n  const [state, { toggle }] = useToggle(true);\n\n  return (\n    <>\n      <button type=\"button\" onClick={() => toggle()}>\n        {state ? 'unmount' : 'mount'}\n      </button>\n      {state && <MyComponent />}\n    </>\n  );\n};",on="import React, { useState } from 'react';\nimport { useUnmountedRef } from 'ahooks';\n\nconst Button = ({ setVisible }) => {\n  const unmountRef: { current: boolean } = useUnmountedRef();\n  const [text, setText] = useState('I am mounted');\n  const handleClick = async () => {\n    await setVisible();\n    !unmountRef.current && setText('I am unmounted');\n  };\n  return <button onClick={handleClick}>{text}</button>;\n};\n\nexport default () => {\n  const [visible, setVisible] = useState(true);\n  return (\n    <div>\n      click the button to unmount it\n      <br />\n      {visible ? <Button setVisible={() => setVisible(false)} /> : 'nothing'}\n    </div>\n  );\n};",sn="import React from 'react';\nimport { useUpdate } from 'ahooks';\n\nexport default () => {\n  const update = useUpdate();\n\n  return (\n    <>\n      <div>Time: {Date.now()}</div>\n      <button type=\"button\" onClick={update} style={{ marginTop: 8 }}>\n        update\n      </button>\n    </>\n  );\n};",an="import React, { useEffect, useState } from 'react';\nimport { useUpdateEffect } from 'ahooks';\n\nexport default () => {\n  const [count, setCount] = useState(0);\n  const [effectCount, setEffectCount] = useState(0);\n  const [updateEffectCount, setUpdateEffectCount] = useState(0);\n\n  useEffect(() => {\n    setEffectCount((c) => c + 1);\n  }, [count]);\n\n  useUpdateEffect(() => {\n    setUpdateEffectCount((c) => c + 1);\n    return () => {\n      // do something\n    };\n  }, [count]); // you can include deps array if necessary\n\n  return (\n    <div>\n      <p>effectCount: {effectCount}</p>\n      <p>updateEffectCount: {updateEffectCount}</p>\n      <p>\n        <button type=\"button\" onClick={() => setCount((c) => c + 1)}>\n          reRender\n        </button>\n      </p>\n    </div>\n  );\n};",un="import React, { useLayoutEffect, useState } from 'react';\nimport { useUpdateLayoutEffect } from 'ahooks';\n\nexport default () => {\n  const [count, setCount] = useState(0);\n  const [layoutEffectCount, setLayoutEffectCount] = useState(0);\n  const [updateLayoutEffectCount, setUpdateLayoutEffectCount] = useState(0);\n\n  useLayoutEffect(() => {\n    setLayoutEffectCount((c) => c + 1);\n  }, [count]);\n\n  useUpdateLayoutEffect(() => {\n    setUpdateLayoutEffectCount((c) => c + 1);\n    return () => {\n      // do something\n    };\n  }, [count]); // you can include deps array if necessary\n\n  return (\n    <div>\n      <p>layoutEffectCount: {layoutEffectCount}</p>\n      <p>updateLayoutEffectCount: {updateLayoutEffectCount}</p>\n      <p>\n        <button type=\"button\" onClick={() => setCount((c) => c + 1)}>\n          reRender\n        </button>\n      </p>\n    </div>\n  );\n};",cn="import React from 'react';\nimport { useVirtualList } from 'ahooks';\n\nexport default () => {\n  const { list, containerProps, wrapperProps } = useVirtualList(Array.from(Array(99999).keys()), {\n    overscan: 30,\n    itemHeight: 60,\n  });\n  return (\n    <>\n      <div {...containerProps} style={{ height: '300px', overflow: 'auto' }}>\n        <div {...wrapperProps}>\n          {list.map((ele) => (\n            <div\n              style={{\n                height: 52,\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'center',\n                border: '1px solid #e8e8e8',\n                marginBottom: 8,\n              }}\n              key={ele.index}\n            >\n              Row: {ele.data}\n            </div>\n          ))}\n        </div>\n      </div>\n    </>\n  );\n};",ln="import React from 'react';\nimport { useVirtualList } from 'ahooks';\n\nexport default () => {\n  const [value, onChange] = React.useState<number>(0);\n  const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(\n    Array.from(Array(99999).keys()),\n    {\n      itemHeight: (i) => (i % 2 === 0 ? 42 + 8 : 84 + 8),\n      overscan: 10,\n    },\n  );\n\n  return (\n    <div>\n      <div style={{ textAlign: 'right', marginBottom: 16 }}>\n        <input\n          style={{ width: 120 }}\n          placeholder=\"line number\"\n          type=\"number\"\n          value={value}\n          onChange={(e) => onChange(Number(e.target.value))}\n        />\n        <button\n          style={{ marginLeft: 8 }}\n          type=\"button\"\n          onClick={() => {\n            scrollTo(Number(value));\n          }}\n        >\n          scroll to\n        </button>\n      </div>\n      <div {...containerProps} style={{ height: '300px', overflow: 'auto' }}>\n        <div {...wrapperProps}>\n          {list.map((ele) => (\n            <div\n              style={{\n                height: ele.index % 2 === 0 ? 42 : 84,\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'center',\n                border: '1px solid #e8e8e8',\n                marginBottom: 8,\n              }}\n              key={ele.index}\n            >\n              Row: {ele.data} size: {ele.index % 2 === 0 ? 'small' : 'large'}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};",dn="import React, { useRef, useMemo } from 'react';\nimport { useWebSocket } from 'ahooks';\n\nenum ReadyState {\n  Connecting = 0,\n  Open = 1,\n  Closing = 2,\n  Closed = 3,\n}\n\nexport default () => {\n  const messageHistory = useRef([]);\n\n  const { readyState, sendMessage, latestMessage, disconnect, connect } = useWebSocket(\n    'wss://echo.websocket.org',\n  );\n\n  messageHistory.current = useMemo(() => messageHistory.current.concat(latestMessage), [\n    latestMessage,\n  ]);\n\n  return (\n    <div>\n      {/* send message */}\n      <button\n        onClick={() => sendMessage && sendMessage(`${Date.now()}`)}\n        disabled={readyState !== ReadyState.Open}\n        style={{ marginRight: 8 }}\n      >\n        \u2709\ufe0f send\n      </button>\n      {/* disconnect */}\n      <button\n        onClick={() => disconnect && disconnect()}\n        disabled={readyState !== ReadyState.Open}\n        style={{ marginRight: 8 }}\n      >\n        \u274c disconnect\n      </button>\n      {/* connect */}\n      <button onClick={() => connect && connect()} disabled={readyState === ReadyState.Open}>\n        \ud83d\udcde connect\n      </button>\n      <div style={{ marginTop: 8 }}>readyState: {readyState}</div>\n      <div style={{ marginTop: 8 }}>\n        <p>received message: </p>\n        {messageHistory.current.map((message, index) => (\n          <p key={index}>{message?.data}</p>\n        ))}\n      </div>\n    </div>\n  );\n};",pn="import { useWhyDidYouUpdate } from 'ahooks';\nimport React, { useState } from 'react';\n\nconst Demo: React.FC<{ count: number }> = (props) => {\n  const [randomNum, setRandomNum] = useState(Math.random());\n\n  useWhyDidYouUpdate('useWhyDidYouUpdateComponent', { ...props, randomNum });\n\n  return (\n    <div>\n      <div>\n        <span>number: {props.count}</span>\n      </div>\n      <div>\n        randomNum: {randomNum}\n        <button onClick={() => setRandomNum(Math.random)} style={{ marginLeft: 8 }}>\n          \ud83c\udfb2\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default () => {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <Demo count={count} />\n      <div>\n        <button onClick={() => setCount((prevCount) => prevCount - 1)}>count -</button>\n        <button onClick={() => setCount((prevCount) => prevCount + 1)} style={{ marginLeft: 8 }}>\n          count +\n        </button>\n      </div>\n      <p>Please open the browser console to view the output!</p>\n    </div>\n  );\n};",mn="import { useRequest } from 'ahooks';\nimport Mock from 'mockjs';\nimport React from 'react';\n\nfunction getUsername(): Promise<string> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(Mock.mock('@name'));\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const { data, error, loading } = useRequest(getUsername);\n\n  if (error) {\n    return <div>failed to load</div>;\n  }\n  if (loading) {\n    return <div>loading...</div>;\n  }\n  return <div>Username: {data}</div>;\n};",fn="import { useRequest } from 'ahooks';\nimport { message } from 'antd';\nimport React, { useState } from 'react';\n\nfunction changeUsername(username: string): Promise<{ success: boolean }> {\n  console.log(username);\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ success: true });\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const [state, setState] = useState('');\n  const { loading, run } = useRequest(changeUsername, {\n    manual: true,\n    onSuccess: (result, params) => {\n      if (result.success) {\n        setState('');\n        message.success(`The username was changed to \"${params[0]}\" !`);\n      }\n    },\n  });\n\n  return (\n    <div>\n      <input\n        onChange={(e) => setState(e.target.value)}\n        value={state}\n        placeholder=\"Please enter username\"\n        style={{ width: 240, marginRight: 16 }}\n      />\n      <button disabled={loading} type=\"button\" onClick={() => run(state)}>\n        {loading ? 'loading' : 'Edit'}\n      </button>\n    </div>\n  );\n};",vn="import { useRequest } from 'ahooks';\nimport React from 'react';\nimport Mock from 'mockjs';\n\nfunction getUsername(): Promise<string> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(Mock.mock('@name'));\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const { data, loading, run, cancel } = useRequest(getUsername, {\n    pollingInterval: 1000,\n    pollingWhenHidden: false,\n  });\n\n  return (\n    <>\n      <p>Username: {loading ? 'loading' : data}</p>\n      <button type=\"button\" onClick={run}>\n        start\n      </button>\n      <button type=\"button\" onClick={cancel} style={{ marginLeft: 8 }}>\n        stop\n      </button>\n    </>\n  );\n};",hn="import { useRequest } from 'ahooks';\nimport { message } from 'antd';\nimport React from 'react';\n\nexport function deleteUser(userId: string): Promise<{ success: boolean }> {\n  console.log(userId);\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ success: true });\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const { run, fetches } = useRequest(deleteUser, {\n    manual: true,\n    fetchKey: (id) => id,\n    onSuccess: (result, params) => {\n      if (result.success) {\n        message.success(`Disabled user ${params[0]}`);\n      }\n    },\n  });\n\n  const users = [\n    { id: '1', username: 'A' },\n    { id: '2', username: 'B' },\n    { id: '3', username: 'C' },\n  ];\n\n  return (\n    <div>\n      <div>You can click all buttons, each request has its own status.</div>\n      <ul>\n        {users.map((user) => (\n          <li key={user.id} style={{ marginTop: 8 }}>\n            <button\n              type=\"button\"\n              onClick={() => {\n                run(user.id);\n              }}\n              disabled={fetches[user.id]?.loading}\n            >\n              {fetches[user.id]?.loading ? 'loading' : `delete ${user.username}`}\n            </button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};",bn="import { useRequest } from 'ahooks';\nimport Mock from 'mockjs';\nimport React from 'react';\n\nfunction getUserId(): Promise<number> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(1011);\n    }, 1000);\n  });\n}\n\nfunction getUsername(id: number): Promise<string> {\n  console.log('user id:', id);\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(Mock.mock('@name'));\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const userIdRequest = useRequest(getUserId);\n\n  const usernameRequest = useRequest(() => getUsername(userIdRequest.data), {\n    ready: !!userIdRequest.data,\n  });\n\n  return (\n    <div>\n      <p>UserId: {userIdRequest.loading ? 'loading' : userIdRequest.data}</p>\n      <p>Username: {usernameRequest.loading ? 'loading' : usernameRequest.data}</p>\n    </div>\n  );\n};",gn="import { useRequest } from 'ahooks';\nimport Mock from 'mockjs';\nimport React from 'react';\n\nasync function getEmail(search: string): Promise<string[]> {\n  console.log(search);\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(Mock.mock({ 'data|5': ['@email'] }).data);\n    }, 300);\n  });\n}\n\nexport default () => {\n  const { data, loading, run } = useRequest(getEmail, {\n    debounceInterval: 500,\n    manual: true,\n  });\n\n  return (\n    <div>\n      <p>Enter quickly to see the effect</p>\n      <input placeholder=\"Select Emails\" onChange={(e) => run(e.target.value)} />\n      {loading ? (\n        <p>loading</p>\n      ) : (\n        <ul style={{ marginTop: 8 }}>\n          {data?.map((i) => (\n            <li key={i}>{i}</li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};",yn="import { useRequest } from 'ahooks';\nimport Mock from 'mockjs';\nimport React from 'react';\n\nasync function getEmail(search: string): Promise<string[]> {\n  console.log(search);\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(Mock.mock({ 'data|5': ['@email'] }).data);\n    }, 100);\n  });\n}\n\nexport default () => {\n  const { data, loading, run } = useRequest(getEmail, {\n    throttleInterval: 500,\n    manual: true,\n  });\n\n  return (\n    <div>\n      <p>Enter quickly to see the effect</p>\n      <input placeholder=\"Select Emails\" onChange={(e) => run(e.target.value)} />\n      {loading ? (\n        <p>loading</p>\n      ) : (\n        <ul style={{ marginTop: 8 }}>\n          {data?.map((i) => (\n            <li key={i}>{i}</li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};",wn="import { useBoolean, useRequest } from 'ahooks';\nimport Mock from 'mockjs';\nimport React from 'react';\n\nasync function getArticle(): Promise<{ data: string; time: number }> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({\n        data: Mock.mock('@paragraph'),\n        time: new Date().getTime(),\n      });\n    }, 1000);\n  });\n}\n\nconst Article = () => {\n  const { data, loading } = useRequest(getArticle, {\n    cacheKey: 'article',\n  });\n  if (!data && loading) {\n    return <p>loading</p>;\n  }\n  return (\n    <>\n      <p>Latest request time: {data?.time}</p>\n      <p>{data?.data}</p>\n    </>\n  );\n};\n\nexport default () => {\n  const [state, { toggle }] = useBoolean();\n  return (\n    <div>\n      <p>\n        You can click the button multiple times, the article component will show the cached data\n        first.\n      </p>\n      <p>\n        <button type=\"button\" onClick={() => toggle()}>\n          show/hidden\n        </button>\n      </p>\n      {state && <Article />}\n    </div>\n  );\n};",kn="import { useBoolean, useRequest } from 'ahooks';\nimport Mock from 'mockjs';\nimport React from 'react';\n\nasync function getArticle(type?: string): Promise<{ data: string; time: number }> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({\n        data: Mock.mock('@paragraph'),\n        time: new Date().getTime(),\n      });\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const [state, { toggle }] = useBoolean();\n  const { run } = useRequest(getArticle, {\n    cacheKey: 'article',\n    manual: true,\n  });\n  return (\n    <div>\n      <p>When the mouse hovers over the button, the article data is preloaded.</p>\n      <p>\n        <button type=\"button\" onMouseEnter={() => run()} onClick={() => toggle()}>\n          show/hidden\n        </button>\n      </p>\n      {state && <Article />}\n    </div>\n  );\n};\n\nconst Article = () => {\n  const { data, loading } = useRequest(getArticle, {\n    cacheKey: 'article',\n  });\n\n  if (!data && loading) {\n    return <p>loading</p>;\n  }\n\n  return (\n    <>\n      <p>Latest request time: {data?.time}</p>\n      <p>{data?.data}</p>\n    </>\n  );\n};",xn="import { useRequest } from 'ahooks';\nimport { Spin } from 'antd';\nimport React from 'react';\nimport Mock from 'mockjs';\n\nfunction getUsername(): Promise<string> {\n  const userInfo = Mock.mock('@name');\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(userInfo);\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const { data, loading } = useRequest(getUsername, {\n    refreshOnWindowFocus: true,\n  });\n\n  return (\n    <div>\n      <p>\n        You can try to click elsewhere and click back to try. (Or hide the page and show it again)\n      </p>\n      <Spin spinning={loading}>\n        <div>Username: {data}</div>\n      </Spin>\n    </div>\n  );\n};",Cn="import { useRequest } from 'ahooks';\nimport Mock from 'mockjs';\nimport React, { useState } from 'react';\n\nfunction getUsername(): Promise<string> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(Mock.mock('@name'));\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const [state, setState] = useState('');\n  const { data, mutate } = useRequest(getUsername, {\n    onSuccess: (result) => {\n      setState(result);\n    },\n  });\n\n  return (\n    <div>\n      <p>usrename: {data}</p>\n      <input\n        onChange={(e) => setState(e.target.value)}\n        value={state}\n        placeholder=\"Please enter username\"\n        style={{ width: 240, marginRight: 16 }}\n      />\n      <button type=\"button\" onClick={() => mutate(state)}>\n        Edit\n      </button>\n    </div>\n  );\n};",Sn="import { useRequest } from 'ahooks';\nimport React from 'react';\n\nasync function getCurrentTime(): Promise<number> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(new Date().getTime());\n    }, 100);\n  });\n}\n\nexport default () => {\n  const getTimeAction = useRequest(getCurrentTime);\n\n  const withLoadingDelayAction = useRequest(getCurrentTime, {\n    loadingDelay: 200,\n  });\n\n  const trigger = () => {\n    getTimeAction.run();\n    withLoadingDelayAction.run();\n  };\n\n  return (\n    <div>\n      <p>\n        loadingDelay can set delay loading, which can effectively prevent loading from flickering.\n      </p>\n      <button type=\"button\" onClick={trigger}>\n        run\n      </button>\n\n      <div style={{ margin: '24px 0', width: 300 }}>\n        Current Time: {getTimeAction.loading ? 'loading' : getTimeAction.data}\n      </div>\n      <div>\n        Current Time: {withLoadingDelayAction.loading ? 'loading' : withLoadingDelayAction.data}\n      </div>\n    </div>\n  );\n};",Pn="import { useRequest } from 'ahooks';\nimport React, { useState } from 'react';\n\nconst userSchool = (id: string) => {\n  switch (id) {\n    case '1':\n      return 'Tsinghua University';\n    case '2':\n      return 'Beijing University';\n    case '3':\n      return 'Zhejiang University';\n    default:\n      return '';\n  }\n};\n\nasync function getUserSchool(userId: string): Promise<string> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(userSchool(userId));\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const [userId, setUserId] = useState('1');\n  const { data, loading } = useRequest(() => getUserSchool(userId), {\n    refreshDeps: [userId],\n  });\n\n  return (\n    <div>\n      <select\n        onChange={(e) => setUserId(e.target.value)}\n        value={userId}\n        style={{ marginBottom: 16, width: 120 }}\n      >\n        <option value=\"1\">user 1</option>\n        <option value=\"2\">user 2</option>\n        <option value=\"3\">user 3</option>\n      </select>\n      <p>School: {loading ? 'loading' : data}</p>\n    </div>\n  );\n};",Rn="import { useRequest } from 'ahooks';\nimport React from 'react';\n\nexport default () => {\n  const { data, error, loading } = useRequest('https://helloacm.com/api/random/?n=8&x=4');\n\n  if (error) {\n    return <div>failed to load</div>;\n  }\n  if (loading) {\n    return <div>loading...</div>;\n  }\n  return <div>Number: {data}</div>;\n};",On="import { useRequest } from 'ahooks';\nimport React from 'react';\nimport axios from 'axios';\n\nexport default () => {\n  const { data, error, loading } = useRequest('https://helloacm.com/api/random/?n=8&x=4', {\n    requestMethod: (param: any) => axios(param),\n  });\n  if (error) {\n    return <div>failed to load</div>;\n  }\n  if (loading) {\n    return <div>loading...</div>;\n  }\n  return <div>Number: {data?.data}</div>;\n};",jn="import { useRequest } from 'ahooks';\nimport React from 'react';\nimport { List, Pagination } from 'antd';\nimport Mock from 'mockjs';\n\ninterface UserListItem {\n  id: string;\n  name: string;\n  gender: 'male' | 'female';\n  email: string;\n  disabled: boolean;\n}\n\nconst userList = (current, pageSize) =>\n  Mock.mock({\n    total: 55,\n    [`list|${pageSize}`]: [\n      {\n        id: '@guid',\n        name: '@cname',\n        'gender|1': ['male', 'female'],\n        email: '@email',\n        disabled: false,\n      },\n    ],\n  });\n\nasync function getUserList(params: {\n  current: number;\n  pageSize: number;\n  gender?: string;\n}): Promise<{ total: number; list: UserListItem[] }> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(userList(params.current, params.pageSize));\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const { data, loading, pagination } = useRequest(\n    ({ current, pageSize }) => getUserList({ current, pageSize }),\n    {\n      paginated: true,\n    },\n  );\n  return (\n    <div>\n      {loading ? (\n        <p>loading</p>\n      ) : (\n        <ul>\n          {data?.list?.map((item) => (\n            <li key={item.email}>\n              {item.name} - {item.email}\n            </li>\n          ))}\n        </ul>\n      )}\n      <Pagination\n        {...(pagination as any)}\n        showQuickJumper\n        showSizeChanger\n        onShowSizeChange={pagination.onChange}\n        style={{ marginTop: 16, textAlign: 'right' }}\n      />\n    </div>\n  );\n};",zn="import { useRequest } from 'ahooks';\nimport React from 'react';\nimport { Table, Button } from 'antd';\nimport Mock from 'mockjs';\n\ninterface UserListItem {\n  id: string;\n  name: string;\n  gender: 'male' | 'female';\n  email: string;\n  disabled: boolean;\n}\n\nconst userList = (current, pageSize) =>\n  Mock.mock({\n    total: 55,\n    [`list|${pageSize}`]: [\n      {\n        id: '@guid',\n        name: '@cname',\n        'gender|1': ['male', 'female'],\n        email: '@email',\n        disabled: false,\n      },\n    ],\n  });\n\nasync function getUserList(params: {\n  current: number;\n  pageSize: number;\n  gender?: string;\n}): Promise<{ total: number; list: UserListItem[] }> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(userList(params.current, params.pageSize));\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const { tableProps, params, refresh } = useRequest(\n    ({ current, pageSize, sorter: s, filters: f }) => {\n      const p: any = { current, pageSize };\n      if (s?.field && s?.order) {\n        p[s.field] = s.order;\n      }\n      if (f) {\n        Object.entries(f).forEach(([filed, value]) => {\n          p[filed] = value;\n        });\n      }\n      console.log(p);\n      return getUserList(p);\n    },\n    {\n      paginated: true,\n      defaultPageSize: 5,\n    },\n  );\n\n  // you can read sorter and filters from params[0]\n  const { sorter = {}, filters = {} } = params[0] || ({} as any);\n\n  const columns = [\n    {\n      title: 'name',\n      dataIndex: 'name',\n    },\n    {\n      title: 'email',\n      dataIndex: 'email',\n    },\n    {\n      title: 'id',\n      dataIndex: 'id',\n      sorter: true,\n      sortOrder: sorter.field === 'id' ? sorter.order : false,\n    },\n    {\n      title: 'gender',\n      dataIndex: 'gender',\n      filters: [\n        { text: 'male', value: 'male' },\n        { text: 'female', value: 'female' },\n      ],\n      filteredValue: filters.gender,\n    },\n  ];\n\n  return (\n    <div>\n      <Button onClick={refresh} style={{ marginBottom: 16 }}>\n        \u5237\u65b0\n      </Button>\n      <Table columns={columns} rowKey=\"id\" {...tableProps} />\n    </div>\n  );\n};",Tn="import { useBoolean, useRequest, useUpdateEffect } from 'ahooks';\nimport { Pagination } from 'antd';\nimport Mock from 'mockjs';\nimport React, { useState } from 'react';\n\ninterface UserListItem {\n  id: string;\n  name: string;\n  gender: 'male' | 'female';\n  email: string;\n  disabled: boolean;\n}\n\nconst userList = (current, pageSize) =>\n  Mock.mock({\n    total: 55,\n    [`list|${pageSize}`]: [\n      {\n        id: '@guid',\n        name: '@cname',\n        'gender|1': ['male', 'female'],\n        email: '@email',\n        disabled: false,\n      },\n    ],\n  });\n\nasync function getUserList(params: {\n  current: number;\n  pageSize: number;\n  gender?: string;\n}): Promise<{ total: number; list: UserListItem[] }> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(userList(params.current, params.pageSize));\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const [state, { toggle }] = useBoolean();\n  return (\n    <div>\n      <p>You can click the button multiple times, the conditions of pagination will be cached.</p>\n      <p>\n        <button type=\"button\" onClick={() => toggle()}>\n          show/hidden\n        </button>\n      </p>\n      {state && <PaginationComponent />}\n    </div>\n  );\n};\n\nconst PaginationComponent = () => {\n  const { params, run, data, loading, pagination } = useRequest(\n    (p, gender?: string) => getUserList({ ...p, gender }),\n    {\n      cacheKey: 'paginationDemo',\n      paginated: true,\n    },\n  );\n\n  const [gender, setGender] = useState<string>(params[1]);\n\n  useUpdateEffect(() => {\n    // reload when gender change\n    run(\n      {\n        current: 1,\n        pageSize: 10,\n      },\n      gender,\n    );\n  }, [gender]);\n\n  return (\n    <div>\n      <select\n        value={gender}\n        style={{ width: 180, marginBottom: 24 }}\n        onChange={(e) => setGender(e.target.value)}\n        placeholder=\"select gender\"\n      >\n        <option value=\"male\">male</option>\n        <option value=\"female\">female</option>\n      </select>\n      {loading ? (\n        <p>loading</p>\n      ) : (\n        <ul>\n          {data?.list?.map((item) => (\n            <li key={item.email}>\n              {item.name} - {item.email}\n            </li>\n          ))}\n        </ul>\n      )}\n      <Pagination\n        {...(pagination as any)}\n        showQuickJumper\n        showSizeChanger\n        onShowSizeChange={pagination.onChange}\n        style={{ marginTop: 16, textAlign: 'right' }}\n      />\n    </div>\n  );\n};",In="import { useBoolean, useRequest } from 'ahooks';\nimport { Button, Spin, List, Typography } from 'antd';\nimport React from 'react';\n\ninterface Item {\n  id?: string;\n  name: string;\n}\n\ninterface Result {\n  list: Item[];\n  nextId: string | undefined;\n}\n\nconst resultData = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n\nexport async function getLoadMoreList(nextId: any, limit: any): Promise<Result> {\n  let start = 0;\n  if (nextId) {\n    start = resultData.findIndex((i) => i === nextId);\n  }\n  const end = start + limit;\n  const list = resultData.slice(start, end).map((id) => ({\n    id,\n    name: `project ${id} (server time: ${Date.now()})`,\n  }));\n  const nId = resultData.length >= end ? resultData[end] : undefined;\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({\n        list,\n        nextId: nId,\n      });\n    }, 1000);\n  });\n}\n\nexport default () => {\n  const [state, { toggle }] = useBoolean(true);\n  return (\n    <div>\n      <p>You can click the button multiple times, the loadmore will be cached.</p>\n      <p>\n        <button type=\"button\" onClick={() => toggle()}>\n          show/hidden\n        </button>\n      </p>\n      {state && <LoadMoreComponent />}\n    </div>\n  );\n};\n\nconst LoadMoreComponent = () => {\n  const { data, loading, loadMore, loadingMore } = useRequest(\n    (d: Result | undefined) => getLoadMoreList(d?.nextId, 3),\n    {\n      loadMore: true,\n      cacheKey: 'loadMoreDemoCacheId',\n    },\n  );\n\n  return (\n    <div>\n      {loading ? (\n        <p>loading</p>\n      ) : (\n        <ul>\n          {data?.list?.map((item) => (\n            <li key={item.id}>\n              {item.id} - {item.name}\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {loadingMore ? (\n        'load more...'\n      ) : (\n        <button type=\"button\" onClick={loadMore} disabled={!data?.nextId}>\n          {data?.nextId ? 'click to load more' : 'no more'}\n        </button>\n      )}\n    </div>\n  );\n};",Fn="import { useRequest } from 'ahooks';\nimport React, { useRef } from 'react';\n\ninterface Item {\n  id: number;\n  title: string;\n}\n\ninterface Result {\n  total: number;\n  list: Item[];\n}\n\nconst dataSource = [\n  {\n    id: 1,\n    title: 'ahooks title 1',\n  },\n  {\n    id: 2,\n    title: 'ahooks title 2',\n  },\n  {\n    id: 3,\n    title: 'ahooks title 3',\n  },\n  {\n    id: 4,\n    title: 'ahooks title 4',\n  },\n  {\n    id: 5,\n    title: 'ahooks title 5',\n  },\n  {\n    id: 6,\n    title: 'ahooks title 6',\n  },\n  {\n    id: 7,\n    title: 'ahooks title 7',\n  },\n  {\n    id: 8,\n    title: 'ahooks title 8',\n  },\n  {\n    id: 9,\n    title: 'ahooks title 9',\n  },\n  {\n    id: 10,\n    title: 'ahooks title 10',\n  },\n];\n\nconst asyncFn = ({ pageSize, offset }: any): Promise<Result> =>\n  new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({\n        total: dataSource.length,\n        list: dataSource.slice(offset, offset + pageSize),\n      });\n    }, 1000);\n  });\n\nexport default () => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { data, loading, loadingMore, reload, loadMore, noMore } = useRequest(\n    (d: Result | undefined) =>\n      asyncFn({\n        offset: d?.list?.length || 0,\n        pageSize: 3,\n      }),\n    {\n      loadMore: true,\n      ref: containerRef,\n      isNoMore: (d) => (d ? d.list.length >= d.total : false),\n    },\n  );\n\n  const { list = [] } = data || {};\n\n  return (\n    <div ref={containerRef} style={{ height: 200, overflowY: 'auto' }}>\n      <button type=\"button\" onClick={reload} disabled={loading}>\n        {loading ? 'loading' : 'Reload'}\n      </button>\n      <ul>\n        {list.map((item) => (\n          <li style={{ height: 50, borderBottom: '1px', lineHeight: '50px' }}>{item.title}</li>\n        ))}\n      </ul>\n      <div>\n        {!noMore && (\n          <button type=\"button\" onClick={loadMore} disabled={loadingMore}>\n            {loadingMore ? 'Loading more...' : 'Click to load more'}\n          </button>\n        )}\n\n        {noMore && <span>No more data</span>}\n\n        <span style={{ float: 'right', fontSize: 12 }}>total: {data?.total}</span>\n      </div>\n    </div>\n  );\n};",Nn="import React from 'react';\nimport useUrlState from '@ahooksjs/use-url-state';\n\nexport default () => {\n  const [state, setState] = useUrlState({ count: '1' });\n\n  return (\n    <>\n      <button\n        style={{ marginRight: 8 }}\n        type=\"button\"\n        onClick={() => setState({ count: Number(state.count || 0) + 1 })}\n      >\n        add\n      </button>\n      <button type=\"button\" onClick={() => setState({ count: undefined })}>\n        clear\n      </button>\n      <div>state: {state?.count}</div>\n    </>\n  );\n};",Dn="import React from 'react';\nimport useUrlState from '@ahooksjs/use-url-state';\n\nexport default () => {\n  const [state, setState] = useUrlState(\n    { page: '1', pageSize: '10' },\n    {\n      navigateMode: 'push',\n    },\n  );\n\n  return (\n    <>\n      <div>\n        page: {state.page}\n        <span style={{ paddingLeft: 8 }}>\n          <button\n            onClick={() => {\n              setState((s) => ({ page: Number(s.page) + 1 }));\n            }}\n          >\n            +\n          </button>\n          <button\n            onClick={() => {\n              setState((s) => ({ page: Number(s.page) - 1 }));\n            }}\n            style={{ margin: '0 8px' }}\n          >\n            -\n          </button>\n          <button\n            onClick={() => {\n              setState({ page: 1 });\n            }}\n          >\n            reset\n          </button>\n        </span>\n      </div>\n      <br />\n      <div>\n        pageSize: {state.pageSize}\n        <span style={{ paddingLeft: 8 }}>\n          <button\n            onClick={() => {\n              setState((s) => ({ pageSize: Number(s.pageSize) + 1 }));\n            }}\n          >\n            +\n          </button>\n          <button\n            onClick={() => {\n              setState((s) => ({ pageSize: Number(s.pageSize) - 1 }));\n            }}\n            style={{ margin: '0 8px' }}\n          >\n            -\n          </button>\n          <button\n            onClick={() => {\n              setState({ pageSize: 10 });\n            }}\n          >\n            reset\n          </button>\n        </span>\n      </div>\n    </>\n  );\n};";n["default"]={"useantdtable-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"pW5W"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:i}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Form and Table data binding","title.zh-CN":"Form \u4e0e Table \u8054\u52a8",description:'<div class="markdown"><p>useAntdTable returns a search object after receiving a form instance. This is an example of antd v3, see <a href="https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useAntdTable/demo/demo3.tsx" target="_blank">link<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="__dumi-default-external-link-icon"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> for an example of antd v4.</p></div>',"description.zh-CN":'<div class="markdown"><p>useAntdTable \u63a5\u6536 form \u5b9e\u4f8b\u540e\uff0c\u4f1a\u8fd4\u56de search \u5bf9\u8c61\u3002\u8fd9\u662f\u4e00\u4e2a antd v3 \u793a\u4f8b\uff0cantd v4 \u793a\u4f8b\u89c1 <a href="https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useAntdTable/demo/demo3.tsx" target="_blank">\u94fe\u63a5<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="__dumi-default-external-link-icon"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>\u3002</p></div>',identifier:"useantdtable-demo1"}},"useantdtable-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Esvp"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:u}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Data caching","title.zh-CN":"\u6570\u636e\u7f13\u5b58",description:'<div class="markdown"><p>Form and Table data cache through cacheKey. This is an example of antd v3, see <a href="https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useAntdTable/demo/demo4.tsx" target="_blank">link<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="__dumi-default-external-link-icon"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> for an example of antd v4.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7 cacheKey \u53ef\u4ee5\u5b9e\u73b0 Form \u548c Table \u6570\u636e\u7f13\u5b58\u3002\u8fd9\u662f\u4e00\u4e2a antd v3 \u793a\u4f8b\uff0cantd v4 \u793a\u4f8b\u89c1 <a href="https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useAntdTable/demo/demo4.tsx" target="_blank">\u94fe\u63a5<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="__dumi-default-external-link-icon"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>\u3002</p></div>',identifier:"useantdtable-demo2"}},"useantdtable-demo5":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"rDNO"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:c}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Use DefaultParams","title.zh-CN":"\u4f7f\u7528 defaultParams",description:'<div class="markdown"><p>useAntdTable sets the initial value through defaultParams, defaultParams is an array, the first value is the paging related parameter, and the second value is the form related data. If there is a second value, we will help you initialize the form! <br /> It should be noted that the initial form data can be filled with simple and advance form data. We will help you select the form data in the currently activated type.</p></div>',"description.zh-CN":'<div class="markdown"><p>useAntdTable \u901a\u8fc7 defaultParams \u8bbe\u7f6e\u521d\u59cb\u5316\u503c\uff0cdefaultParams \u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u7b2c\u4e00\u4e2a\u503c\u4e3a\u5206\u9875\u76f8\u5173\u53c2\u6570\uff0c\u7b2c\u4e8c\u4e2a\u503c\u4e3a\u8868\u5355\u76f8\u5173\u6570\u636e\u3002\u5982\u679c\u6709\u7b2c\u4e8c\u4e2a\u503c\uff0c\u6211\u4eec\u4f1a\u5e2e\u60a8\u521d\u59cb\u5316\u8868\u5355\uff01 <br /> \u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u521d\u59cb\u5316\u7684\u8868\u5355\u6570\u636e\u53ef\u4ee5\u586b\u5199 simple \u548c advance \u5168\u91cf\u7684\u8868\u5355\u6570\u636e\uff0c\u6211\u4eec\u4f1a\u5e2e\u60a8\u6311\u9009\u5f53\u524d\u6fc0\u6d3b\u7684\u7c7b\u578b\u4e2d\u7684\u8868\u5355\u6570\u636e\u3002</p></div>',identifier:"useantdtable-demo5"}},"useantdtable-demo6":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"fu/Q"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:l}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Form Validate","title.zh-CN":"\u8868\u5355\u9a8c\u8bc1",description:'<div class="markdown"><p>It will stop submit when validate error.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u8868\u5355\u9a8c\u8bc1\u5931\u8d25\uff0c\u4e0d\u4f1a\u53d1\u9001\u8bf7\u6c42</p></div>',identifier:"useantdtable-demo6"}},"useboolean-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"yoie"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:d}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Default as a switch function, or accept a parameter to change state.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u9ed8\u8ba4\u5207\u6362\u5e03\u5c14\u503c\u72b6\u6001\uff0c\u4e5f\u53ef\u4ee5\u63a5\u6536\u4e00\u4e2a\u53c2\u6570\u4f5c\u4e3a\u65b0\u7684\u503c\u3002</p></div>',identifier:"useboolean-demo1"}},"useclickaway-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"vcd/"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:p}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Please click button or outside of button to show effects.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u8bf7\u70b9\u51fb\u6309\u94ae\u6216\u6309\u94ae\u5916\u67e5\u770b\u6548\u679c\u3002</p></div>',identifier:"useclickaway-demo1"}},"useclickaway-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"uE0/"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:m}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Custom DOM","title.zh-CN":"\u81ea\u5b9a\u4e49 DOM",description:'<div class="markdown"><p>Support pass in a DOM element directly or a function that returns the DOM element.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u652f\u6301\u76f4\u63a5\u4f20\u5165 DOM \u5bf9\u8c61\u6216\u901a\u8fc7 function \u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\u7684\u65b9\u5f0f\u5f15\u5165\u3002</p></div>',identifier:"useclickaway-demo2"}},"useclickaway-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Uilj"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:f}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Support multiple DOM","title.zh-CN":"\u652f\u6301\u591a\u4e2a DOM \u5bf9\u8c61",description:'<div class="markdown"><p>Support pass multiple DOM elements, or functions which returns the DOM element.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u652f\u6301\u4f20\u5165\u591a\u4e2a\u76ee\u6807\u5bf9\u8c61\u3002</p></div>',identifier:"useclickaway-demo3"}},"useclickaway-demo4":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"OUOK"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:v}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Listen to other events","title.zh-CN":"\u76d1\u542c\u5176\u5b83\u4e8b\u4ef6",description:'<div class="markdown"><p>By setting eventName, you can specify the event to be listened. Try click the right mouse.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7\u8bbe\u7f6e eventName\uff0c\u53ef\u4ee5\u6307\u5b9a\u9700\u8981\u76d1\u542c\u7684\u4e8b\u4ef6\u3002\u8bd5\u8bd5\u70b9\u51fb\u9f20\u6807\u53f3\u952e\u3002</p></div>',identifier:"useclickaway-demo4"}},"usecontrollablevalue-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"fAhZ"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:h}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Uncontrolled component","title.zh-CN":"\u975e\u53d7\u63a7\u7ec4\u4ef6",description:'<div class="markdown"><p>If there is no value in props, the component use self-contained state</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5982\u679c props \u4e2d\u6ca1\u6709 value\uff0c\u5219\u7ec4\u4ef6\u5185\u90e8\u81ea\u7406 state</p></div>',identifier:"usecontrollablevalue-demo1"}},"usecontrollablevalue-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"lAIz"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:b}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Controlled component","title.zh-CN":"\u53d7\u63a7\u7ec4\u4ef6",description:'<div class="markdown"><p>If props has the value field, then the state is controlled by it\'s parent</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5982\u679c props \u6709 value \u5b57\u6bb5\uff0c\u5219\u7531\u7236\u7ea7\u63a5\u7ba1\u63a7\u5236 state</p></div>',identifier:"usecontrollablevalue-demo2"}},"usecontrollablevalue-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"PLDQ"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:g}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"No value, have onChange component","title.zh-CN":"\u65e0 value\uff0c\u6709 onChange \u7684\u7ec4\u4ef6",description:'<div class="markdown"><p>As long as there is an onChange field in props, the onChange function will be fired when state changes</p></div>',"description.zh-CN":'<div class="markdown"><p>\u53ea\u8981 props \u4e2d\u6709 onChange \u5b57\u6bb5\uff0c\u5219\u5728 state \u53d8\u5316\u65f6\uff0c\u5c31\u4f1a\u89e6\u53d1 onChange \u51fd\u6570</p></div>',identifier:"usecontrollablevalue-demo3"}},"usecookiestate-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"VoNs"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:y}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Store state into cookie","title.zh-CN":"\u5c06 state \u5b58\u50a8\u5728 cookie \u4e2d",description:'<div class="markdown"><p>Refresh this page and you will find the value of input box get restored from cookie.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5237\u65b0\u9875\u9762\u540e\uff0c\u53ef\u4ee5\u770b\u5230\u8f93\u5165\u6846\u4e2d\u7684\u5185\u5bb9\u88ab\u4ece cookie \u4e2d\u6062\u590d\u4e86\u3002</p></div>',identifier:"usecookiestate-demo1"}},"usecookiestate-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"b2g7"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:w}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"SetState can receive function","title.zh-CN":"setState \u53ef\u4ee5\u63a5\u6536\u51fd\u6570",description:'<div class="markdown"><p>Function updater is also acceptable with useCookieState\'s setState\uff0clinke useState.</p></div>',"description.zh-CN":'<div class="markdown"><p>useCookieState \u7684 setState \u53ef\u4ee5\u63a5\u6536 function updater\uff0c\u5c31\u50cf useState \u90a3\u6837\u3002</p></div>',identifier:"usecookiestate-demo2"}},"usecookiestate-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"aQ7k"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:k}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Use the option property to configure cookie","title.zh-CN":"\u4f7f\u7528 option \u914d\u7f6e cookie",description:'<div class="markdown"><p>Can be configured defaultValue\u3001expires\u3001path\u3001domain\u3001secure\u3001sameSite</p></div>',"description.zh-CN":'<div class="markdown"><p>\u53ef\u914d\u7f6e\u5c5e\u6027\uff1a\u9ed8\u8ba4\u503c\u3001\u6709\u6548\u65f6\u95f4\u3001\u8def\u5f84\u3001\u57df\u540d\u3001\u534f\u8bae\u3001\u8de8\u57df\u7b49\uff0c\u8be6\u89c1 Options</p></div>',identifier:"usecookiestate-demo3"}},"usecountdown-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"YZc4"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:x}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Basic Usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Basic countdown management.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u57fa\u7840\u7684\u5012\u8ba1\u65f6\u7ba1\u7406\u3002</p></div>',identifier:"usecountdown-demo1"}},"usecountdown-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"1AJf"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:C}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Adcanved Uasge","title.zh-CN":"\u8fdb\u9636\u4f7f\u7528",description:'<div class="markdown"><p>Controll countdown and interval status manually</p></div>',"description.zh-CN":'<div class="markdown"><p>\u624b\u52a8\u542f\u7528\u5e76\u63a7\u5236\u8ba1\u65f6\u5668\u72b6\u6001, \u9002\u7528\u4e8e\u9a8c\u8bc1\u7801\u6216\u7c7b\u4f3c\u573a\u666f; \u65f6\u95f4\u7ed3\u675f\u540e\u89e6\u53d1onEnd\u56de\u8c03</p></div>',identifier:"usecountdown-demo2"}},"usecounter-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"z3EG"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:S}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Simple count management example.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u7b80\u5355\u7684 count \u7ba1\u7406\u793a\u4f8b\u3002</p></div>',identifier:"usecounter-demo1"}},"usecreation-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"5/1s"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:P}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Make sure only one instance is created","title.zh-CN":"\u786e\u4fdd\u5b9e\u4f8b\u4e0d\u4f1a\u88ab\u91cd\u590d\u521b\u5efa",description:'<div class="markdown"><p>You can click the "Rerender" button and trigger the update of this component. But the instance of Foo will keep unchanged.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u70b9\u51fb "Rerender" \u6309\u94ae\uff0c\u89e6\u53d1\u7ec4\u4ef6\u7684\u66f4\u65b0\uff0c\u4f46 Foo \u7684\u5b9e\u4f8b\u4f1a\u4fdd\u6301\u4e0d\u53d8</p></div>',identifier:"usecreation-demo1"}},"usedebounce-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"eWij"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:R}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>DebouncedValue will change after the input ends 500ms.</p></div>',"description.zh-CN":'<div class="markdown"><p>DebouncedValue \u53ea\u4f1a\u5728\u8f93\u5165\u7ed3\u675f 500ms \u540e\u53d8\u5316\u3002</p></div>',identifier:"usedebounce-demo1"}},"usedebounceeffect-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"kE1l"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:O},"index.ts":{import:"../",content:j},"useDebounceFn/index.ts":{import:"../useDebounceFn",content:z},"useCreation/index.ts":{import:"../useCreation",content:T},"useUnmount/index.ts":{import:"../useUnmount",content:I},"usePersistFn/index.ts":{import:"../usePersistFn",content:F},"utils/index.ts":{import:"../utils",content:N},"useUpdateEffect/index.ts":{import:"../useUpdateEffect",content:D}},dependencies:{react:{version:"16.14.0"},"lodash.debounce":{version:"4.0.8"}},identifier:"usedebounceeffect-demo1"}},"usedebouncefn-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"tHpm"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:q}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Frequent calls run, but the function is executed only after all the clicks have completed 500ms.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u9891\u7e41\u8c03\u7528 run\uff0c\u4f46\u53ea\u4f1a\u5728\u6240\u6709\u70b9\u51fb\u5b8c\u6210 500ms \u540e\u6267\u884c\u4e00\u6b21\u76f8\u5173\u51fd\u6570</p></div>',identifier:"usedebouncefn-demo1"}},"usedocumentvisibility-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"vqnj"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:E}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Listen to document visibility change.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u76d1\u542c document \u7684\u53ef\u89c1\u72b6\u6001</p></div>',identifier:"usedocumentvisibility-demo1"}},"usedrop-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"rlxq"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:A}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>The drop area can accept files, uri, text or one of the boxes below.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u62d6\u62fd\u533a\u57df\u53ef\u4ee5\u63a5\u53d7\u6587\u4ef6\uff0c\u94fe\u63a5\uff0c\u6587\u5b57\uff0c\u548c\u4e0b\u65b9\u7684 box \u8282\u70b9\u3002</p></div>',identifier:"usedrop-demo1"}},"usedynamiclist-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"HPQz"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:L}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Default usage","title.zh-CN":"\u52a8\u6001\u5217\u8868",description:'<div class="markdown"><p>a form that can add/remove fields dynamically.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u53ef\u589e\u5220\u7684\u4e0d\u5b9a\u6761\u6570\u8868\u5355</p></div>',identifier:"usedynamiclist-demo1"}},"usedynamiclist-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"66gF"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:B}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Nesting forms","title.zh-CN":"\u5d4c\u5957\u8868\u5355",description:'<div class="markdown"><p>nesting dynamic forms in a set of form groups.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u52a8\u6001\u8868\u5355\u5185\u90e8\u5d4c\u5957\u52a8\u6001\u8868\u5355</p></div>',identifier:"usedynamiclist-demo2"}},"usedynamiclist-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"7cCY"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:M}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},"react-drag-listview":{version:"0.1.8"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Dyanmic table(draggable)","title.zh-CN":"\u52a8\u6001\u8868\u683c(\u53ef\u62d6\u62fd)",description:'<div class="markdown"><p>using antd table to build dynamic table form.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f7f\u7528 antd table \u6784\u5efa\u52a8\u6001\u8868\u683c</p></div>',identifier:"usedynamiclist-demo3"}},"useeventemitter-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Y5K8"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:_}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Parent component shares a event","title.zh-CN":"\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u5171\u4eab\u4e8b\u4ef6",description:'<div class="markdown"><p>The parent component creates a <code>focus$</code> event emitter, and passes it to its children. When calling <code>focus$.emit</code> in MessageBox, InputBox will get notified.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u7236\u7ec4\u4ef6\u521b\u5efa\u4e86\u4e00\u4e2a <code>focus$</code> \u4e8b\u4ef6\uff0c\u5e76\u4e14\u5c06\u5b83\u4f20\u9012\u7ed9\u4e86\u4e24\u4e2a\u5b50\u7ec4\u4ef6\u3002\u5728 MessageBox \u4e2d\u8c03\u7528 <code>focus$.emit</code> \uff0cInputBox \u7ec4\u4ef6\u5c31\u53ef\u4ee5\u6536\u5230\u901a\u77e5\u3002</p></div>',identifier:"useeventemitter-demo1"}},"useeventlistener-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"zz4/"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:U}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Click the button to preview.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u70b9\u51fb\u6309\u94ae\u67e5\u770b\u6548\u679c\u3002</p></div>',identifier:"useeventlistener-demo1"}},"useeventlistener-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"1FF9"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:V}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Listen keydown","title.zh-CN":"\u76d1\u542c keydown \u4e8b\u4ef6",description:'<div class="markdown"><p>Press any key to preview.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u6309\u4e0b\u952e\u76d8\u67e5\u770b\u6548\u679c\u3002</p></div>',identifier:"useeventlistener-demo2"}},"useeventtarget-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"rmvJ"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:$}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Basic usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Controlled Input component with initial value and reset functionality</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5e26\u521d\u59cb\u5316\u503c\u8ddf\u91cd\u7f6e\u7684\u53d7\u63a7 Input \u7ec4\u4ef6</p></div>',identifier:"useeventtarget-demo1"}},"useeventtarget-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"gmst"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:K}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Custom transformer function","title.zh-CN":"\u81ea\u5b9a\u4e49\u8f6c\u6362\u51fd\u6570",description:'<div class="markdown"><p>Controlled Input component with number input only</p></div>',"description.zh-CN":'<div class="markdown"><p>\u53ea\u80fd\u8f93\u5165\u6570\u5b57\u7684\u53d7\u63a7Input\u7ec4\u4ef6</p></div>',identifier:"useeventtarget-demo2"}},"useexternal-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"/nfp"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:H}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Load a javascript file to your page such as <a href="/useExternal/test-external-script.js">test-external-script.js</a></p></div>',"description.zh-CN":'<div class="markdown"><p>\u9875\u9762\u4e0a\u52a0\u8f7d\u5916\u90e8 javascript \u6587\u4ef6\uff0c\u4f8b\u5982\u5f15\u5165 <a href="/useExternal/test-external-script.js">test-external-script.js</a></p></div>',identifier:"useexternal-demo1"}},"useexternal-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"kti0"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:W}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Load style dynamically","title.zh-CN":"\u52a8\u6001\u52a0\u8f7d\u6837\u5f0f",description:'<div class="markdown"><p>Load a css file to your page such as <a href="/useExternal/bootstrap-badge.css">bootstrap-badge.css</a></p></div>',"description.zh-CN":'<div class="markdown"><p>\u9875\u9762\u4e0a\u52a0\u8f7d\u5916\u90e8 css \u6587\u4ef6\uff0c\u4f8b\u5982\u5f15\u5165 <a href="/useExternal/bootstrap-badge.css">bootstrap-badge.css</a></p></div>',identifier:"useexternal-demo2"}},"useexternal-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"W+j0"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:J}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Load image","title.zh-CN":"\u52a0\u8f7d\u56fe\u7247\u6587\u4ef6",description:'<div class="markdown"><p>Load a static image as external resources to page.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u52a0\u8f7d\u4e00\u4e2a\u9759\u6001\u56fe\u7247\u4f5c\u4e3a\u5916\u90e8\u8d44\u6e90\u5f15\u5165\u9875\u9762</p></div>',identifier:"useexternal-demo3"}},"useexternal-demo4":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"HDme"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Y}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Input a variable","title.zh-CN":"\u4f20\u5165\u4e00\u4e2a\u53d8\u91cf",description:'<div class="markdown"><p>Randomly generate the URL address and input the useExternal</p></div>',"description.zh-CN":'<div class="markdown"><p>\u968f\u673a\u751f\u6210 url \u5730\u5740\u5e76\u4f20\u5165 useExternal</p></div>',identifier:"useexternal-demo4"}},"usefavicon-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"v1Bi"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:G}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Basic usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Page favicon setup and toggle</p></div>',"description.zh-CN":'<div class="markdown"><p>\u9875\u9762\u6807\u8bc6 favicon \u8bbe\u7f6e\u4e0e\u5207\u6362</p></div>',identifier:"usefavicon-demo1"}},"usefullscreen-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"9o0L"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Z}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Use ref to set elements that need full screen</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f7f\u7528 ref \u8bbe\u7f6e\u9700\u8981\u5168\u5c4f\u7684\u5143\u7d20</p></div>',identifier:"usefullscreen-demo1"}},"usefullscreen-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"N3R6"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Q}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Picture full screen","title.zh-CN":"\u56fe\u7247\u5168\u5c4f",description:'<div class="markdown"><p>Picture full screen</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5168\u5c4f\u56fe\u7247</p></div>',identifier:"usefullscreen-demo2"}},"usefusiontable-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"60nX"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:X}},dependencies:{"@alifd/next":{version:"1.22.23",css:"@alifd/next/dist/next.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"@alifd/meet-react":{version:"^2.0.0"},moment:{version:"^2.22.1"},"react-dom":{version:"^16.0.0"}},title:"Form and Table data binding","title.zh-CN":"Form \u4e0e Table \u8054\u52a8",description:'<div class="markdown"><p>useFusionTable returns a search object after receiving a field instance. This is an example of Fusion Design.</p></div>',"description.zh-CN":'<div class="markdown"><p>useFusionTable \u63a5\u6536 field \u5b9e\u4f8b\u540e\uff0c\u4f1a\u8fd4\u56de search \u5bf9\u8c61\u3002\u8fd9\u662f\u4e00\u4e2a Fusion Design \u7684\u793a\u4f8b\u3002</p></div>',identifier:"usefusiontable-demo1"}},"usefusiontable-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"hN7j"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ee}},dependencies:{"@alifd/next":{version:"1.22.23",css:"@alifd/next/dist/next.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"@alifd/meet-react":{version:"^2.0.0"},moment:{version:"^2.22.1"},"react-dom":{version:"^16.0.0"}},title:"Data caching","title.zh-CN":"\u6570\u636e\u7f13\u5b58",description:'<div class="markdown"><p>Form and Table data cache through cacheKey.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7 cacheKey \u53ef\u4ee5\u5b9e\u73b0 Form \u548c Table \u6570\u636e\u7f13\u5b58\u3002</p></div>',identifier:"usefusiontable-demo2"}},"usefusiontable-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"8Bzz"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ne}},dependencies:{"@alifd/next":{version:"1.22.23",css:"@alifd/next/dist/next.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"@alifd/meet-react":{version:"^2.0.0"},moment:{version:"^2.22.1"},"react-dom":{version:"^16.0.0"}},title:"Use DefaultParams","title.zh-CN":"\u4f7f\u7528 defaultParams",description:'<div class="markdown"><p>useFusionTable sets the initial value through defaultParams, defaultParams is an array, the first value is the paging related parameter, and the second value is the form related data. If there is a second value, we will help you initialize the form! <br /> It should be noted that the initial form data can be filled with simple and advance form data. We will help you select the form data in the currently activated type.</p></div>',"description.zh-CN":'<div class="markdown"><p>useFusionTable \u901a\u8fc7 defaultParams \u8bbe\u7f6e\u521d\u59cb\u5316\u503c\uff0cdefaultParams \u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u7b2c\u4e00\u4e2a\u503c\u4e3a\u5206\u9875\u76f8\u5173\u53c2\u6570\uff0c\u7b2c\u4e8c\u4e2a\u503c\u4e3a\u8868\u5355\u76f8\u5173\u6570\u636e\u3002\u5982\u679c\u6709\u7b2c\u4e8c\u4e2a\u503c\uff0c\u6211\u4eec\u4f1a\u5e2e\u60a8\u521d\u59cb\u5316\u8868\u5355\uff01<br /> \u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u521d\u59cb\u5316\u7684\u8868\u5355\u6570\u636e\u53ef\u4ee5\u586b\u5199 simple \u548c advance \u5168\u91cf\u7684\u8868\u5355\u6570\u636e\uff0c\u6211\u4eec\u4f1a\u5e2e\u60a8\u6311\u9009\u5f53\u524d\u6fc0\u6d3b\u7684\u7c7b\u578b\u4e2d\u7684\u8868\u5355\u6570\u636e\u3002</p></div>',identifier:"usefusiontable-demo3"}},"usefusiontable-demo4":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"CAi/"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:te}},dependencies:{"@alifd/next":{version:"1.22.23",css:"@alifd/next/dist/next.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"@alifd/meet-react":{version:"^2.0.0"},moment:{version:"^2.22.1"},"react-dom":{version:"^16.0.0"}},title:"Form Validate","title.zh-CN":"\u8868\u5355\u9a8c\u8bc1",description:'<div class="markdown"><p>It will stop submit when validate error.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u8868\u5355\u9a8c\u8bc1\u5931\u8d25\uff0c\u4e0d\u4f1a\u53d1\u9001\u8bf7\u6c42</p></div>',identifier:"usefusiontable-demo4"}},"usehistorytravel-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"SQdT"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:re}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},title:"Basic usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>redo and undo operations\uff0cclick back and forward after input something.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u64a4\u9500\u8ddf\u91cd\u505a\u64cd\u4f5c\uff0c\u8f93\u5165\u5185\u5bb9\u540e\uff0c\u70b9\u51fb back \u548c forward\u3002</p></div>',identifier:"usehistorytravel-demo1"}},"usehistorytravel-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"I8IQ"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:oe}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},title:"TodoList","title.zh-CN":"\u53ef\u64a4\u9500\u6062\u590d\u7684 Todo List",description:'<div class="markdown"><p>redo and undo operations</p></div>',"description.zh":'<div class="markdown"><p>\u53ef\u4ee5\u5b9e\u73b0\u64a4\u9500\u6062\u590d\u7b49\u64cd\u4f5c\u3002</p></div>',identifier:"usehistorytravel-demo2"}},"usehover-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Zrun"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:se}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Use ref to set elements that need listen dom.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f7f\u7528 ref \u8bbe\u7f6e\u9700\u8981\u9700\u8981\u76d1\u542c\u7684\u5143\u7d20\u3002</p></div>',identifier:"usehover-demo1"}},"usehover-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"finQ"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ae}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Pass in DOM element","title.zh-CN":"\u4f20\u5165 DOM \u5143\u7d20",description:'<div class="markdown"><p>Pass in a function that returns the DOM element.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f20\u5165 function \u5e76\u8fd4\u56de\u4e00\u4e2a dom \u5143\u7d20\u3002</p></div>',identifier:"usehover-demo2"}},"useinviewport-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Rp5T"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ie}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Using ref to listen to visibility change.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f7f\u7528 ref \u76d1\u542c\u8282\u70b9\u5728\u89c6\u56fe\u53d8\u5316\u6216\u8005\u6eda\u52a8\u65f6\u662f\u5426\u5728\u53ef\u89c6\u8303\u56f4\u4e4b\u5185</p></div>',identifier:"useinviewport-demo1"}},"useinviewport-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"1QK1"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ue}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Pass in DOM element","title.zh-CN":"\u4f20\u5165 DOM \u5143\u7d20",description:'<div class="markdown"><p>Pass in a function that returns the DOM element.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f20\u5165 function \u5e76\u8fd4\u56de\u4e00\u4e2a dom \u5143\u7d20</p></div>',identifier:"useinviewport-demo2"}},"useinterval-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"tT/4"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ce}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Every 1000ms, execute once</p></div>',"description.zh-CN":'<div class="markdown"><p>\u6bcf1000ms\uff0c\u6267\u884c\u4e00\u6b21</p></div>',identifier:"useinterval-demo1"}},"useinterval-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"bOsA"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:le}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Advanced usage","title.zh-CN":"\u8fdb\u9636\u4f7f\u7528",description:'<div class="markdown"><p>Immediate interval reset\u3001delay increase\u3001clear</p></div>',"description.zh-CN":'<div class="markdown"><p>\u7acb\u5373\u6267\u884c\u5b9a\u65f6\u5668\u7684\u91cd\u542f\u3001\u95f4\u9694\u65f6\u95f4\u589e\u52a0\u3001\u6e05\u9664\u7684\u4f7f\u7528\u3002</p></div>',identifier:"useinterval-demo2"}},"usekeypress-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"gWi9"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:de}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Basic usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Supported Key and keyCode in keyboard events, pressing ArrowUp or ArrowDown to show effect.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u652f\u6301\u952e\u76d8\u4e8b\u4ef6\u4e2d\u7684 key \u548c keyCode\uff0c\u8bf7\u6309 ArrowUp \u6216 ArrowDown \u952e\u8fdb\u884c\u6f14\u793a\u3002</p></div>',identifier:"usekeypress-demo1"}},"usekeypress-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"unVz"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:pe}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Use key aliases","title.zh-CN":"\u4f7f\u7528\u522b\u540d",description:'<div class="markdown"><p>Support using key aliases. Please refer to the <a href="#remarks">document</a> below.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u652f\u6301\u4f7f\u7528\u522b\u540d\uff0c\u66f4\u591a\u5185\u5bb9\u8bf7<a href="#remarks">\u67e5\u770b\u5907\u6ce8</a>\u3002</p></div>',identifier:"usekeypress-demo2"}},"usekeypress-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"rBzm"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:me}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Compound mode","title.zh-CN":"\u7ec4\u5408\u65b9\u5f0f",description:'<div class="markdown"><p>Support for receiving a set of input keys or passing parameters as a combination of keys.</p>\n<p>Attention\uff1aKey combination only supports the use of modified key + key alias + key in keyboard events, <a href="#remarks">See detail</a></p></div>',"description.zh-CN":'<div class="markdown"><p>\u652f\u6301\u63a5\u6536\u4e00\u7ec4\u8f93\u5165\u952e\uff0c\u6216\u4ee5\u7ec4\u5408\u952e\u7684\u65b9\u5f0f\u4f20\u9012\u53c2\u6570\u3002</p>\n<p>\u8bf7\u6ce8\u610f\uff1a\u7ec4\u5408\u952e\u65b9\u5f0f\u53ea\u652f\u6301\u4f7f\u7528\u4fee\u9970\u952e + \u952e\u4f4d\u522b\u540d + \u952e\u76d8\u4e8b\u4ef6\u4e2d\u7684 key \u8fdb\u884c\u7ec4\u5408\uff0c\u66f4\u591a\u5185\u5bb9\u8bf7<a href="#%E5%A4%87%E6%B3%A8">\u67e5\u770b\u5907\u6ce8</a>\u3002</p></div>',identifier:"usekeypress-demo3"}},"usekeypress-demo4":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"EZOW"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:fe}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Advanced","title.zh-CN":"\u8fdb\u9636\u4f7f\u7528",description:'<div class="markdown"><p>Supports receiving a Boolean callback function to handle preprocessing operations.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u652f\u6301\u63a5\u6536\u4e00\u4e2a\u8fd4\u56de boolean \u7684\u56de\u8c03\u51fd\u6570\uff0c\u5904\u7406\u9884\u5904\u7406\u64cd\u4f5c\u3002</p></div>',identifier:"usekeypress-demo4"}},"usekeypress-demo5":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"5jx5"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ve}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Custom DOM","title.zh-CN":"\u81ea\u5b9a\u4e49 DOM",description:'<div class="markdown"><p>By default, you listen for events that are mounted on the window. You can also pass in a DOM object or return an object via function.</p>\n<p>Supports multiple DOM callbacks, such as the common listening for input box events.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u9ed8\u8ba4\u76d1\u542c\u6302\u8f7d\u5728 window \u4e0a\u7684\u4e8b\u4ef6\uff0c\u4f60\u4e5f\u53ef\u4ee5\u4f20\u5165 DOM \u5bf9\u8c61\u6216\u901a\u8fc7 function \u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\u7684\u65b9\u5f0f\u5f15\u5165\u3002</p>\n<p>\u5982\u5e38\u89c1\u7684\u76d1\u542c\u8f93\u5165\u6846\u4e8b\u4ef6\uff0c\u652f\u6301\u591a\u79cd DOM \u56de\u8c03\u3002</p></div>',identifier:"usekeypress-demo5"}},"uselocalstoragestate-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"VaEu"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:he}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Persist state into localStorage","title.zh-CN":"\u5c06 state \u6301\u4e45\u5316\u5728 localStorage \u4e2d",description:'<div class="markdown"><p>Refresh this page and you will find the value of input box get restored from localStorage.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5237\u65b0\u9875\u9762\u540e\uff0c\u53ef\u4ee5\u770b\u5230\u8f93\u5165\u6846\u4e2d\u7684\u5185\u5bb9\u88ab\u4ece localStorage \u4e2d\u6062\u590d\u4e86\u3002</p></div>',identifier:"uselocalstoragestate-demo1"}},"uselocalstoragestate-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"pd+N"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:be}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Store complex types such as arrays or objects","title.zh-CN":"\u5b58\u50a8\u6570\u7ec4\u6216\u5bf9\u8c61\u7b49\u590d\u6742\u7c7b\u578b",description:'<div class="markdown"><p>useLocalStorageState will do the serialization and deserialization work automatically.</p></div>',"description.zh-CN":'<div class="markdown"><p>useLocalStorageState \u4f1a\u81ea\u52a8\u5904\u7406\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u7684\u64cd\u4f5c\u3002</p></div>',identifier:"uselocalstoragestate-demo2"}},"uselocalstoragestate-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"3lnb"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ge}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Persist objects with function updater","title.zh-CN":"\u4f7f\u7528 function updater \u5b58\u50a8",description:'<div class="markdown"><p>function updater is also acceptable with useLocalStorageState.</p></div>',"description.zh-CN":'<div class="markdown"><p>useLocalStorageState \u91cc\u4e5f\u53ef\u4ee5\u7528 function updater\uff0c\u5c31\u50cf useState \u90a3\u6837\u3002</p></div>',identifier:"uselocalstoragestate-demo3"}},"uselockfn-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Yz4d"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ye}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Prevent duplicated submits","title.zh-CN":"\u9632\u6b62\u91cd\u590d\u63d0\u4ea4",description:'<div class="markdown"><p>Before the <code>submit</code> function finishes, the other click actions will be ignored.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5728 <code>submit</code> \u51fd\u6570\u6267\u884c\u5b8c\u6210\u524d\uff0c\u5176\u4f59\u7684\u70b9\u51fb\u52a8\u4f5c\u90fd\u4f1a\u88ab\u5ffd\u7565\u3002</p></div>',identifier:"uselockfn-demo1"}},"usemap-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"BQeK"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:we}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Pass in a Map acceptable parameter.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f20\u5165\u4e00\u4e2a Map \u53ef\u63a5\u53d7\u7684\u53c2\u6570\u3002</p></div>',identifier:"usemap-demo1"}},"usemount-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"G/gl"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ke}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>The function is called right after the component mount.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5728\u7ec4\u4ef6\u9996\u6b21\u6e32\u67d3\u65f6\uff0c\u6267\u884c\u65b9\u6cd5\u3002</p></div>',identifier:"usemount-demo1"}},"usemouse-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"pPhr"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:xe}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Tracking cursor position.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u83b7\u53d6\u9f20\u6807\u4f4d\u7f6e\u3002</p></div>',identifier:"usemouse-demo1"}},"usenetwork-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"92NG"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ce}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>return network status</p></div>',"description.zh-CN":'<div class="markdown"><p>\u8fd4\u56de\u7f51\u7edc\u72b6\u6001\u4fe1\u606f</p></div>',identifier:"usenetwork-demo1"}},"usepersistfn-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"5Jzm"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Se}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>With usePersistFn, function references never change. In the example, <code>showCountPersistFn</code> will not change, <code>showCountCommon</code> will change when count changes.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7 usePersistFn\uff0c\u51fd\u6570\u5f15\u7528\u6c38\u8fdc\u4e0d\u4f1a\u53d8\u5316\uff0c\u793a\u4f8b\u4e2d <code>showCountPersistFn</code> \u662f\u4e0d\u4f1a\u53d8\u5316\u7684\uff0c<code>showCountCommon</code> \u5728 count \u53d8\u5316\u65f6\u53d8\u5316\u3002</p></div>',identifier:"usepersistfn-demo1"}},"useprevious-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"ynmm"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Pe}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Store the previous value.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u8bb0\u5f55\u4e0a\u6b21\u7684 count \u503c</p></div>',identifier:"useprevious-demo1"}},"useprevious-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"HgnT"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Re}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Using compare function","title.zh-CN":"\u4f7f\u7528 compare function",description:'<div class="markdown"><p>The stored previous value update only when the compare function returns true.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u53ea\u6709 compare function \u8fd4\u56de true \u65f6\uff0c\u624d\u4f1a\u8bb0\u5f55\u503c\u7684\u53d8\u5316</p></div>',identifier:"useprevious-demo2"}},"usereactive-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"zWhO"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Oe}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},identifier:"usereactive-demo1"}},"usereactive-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"zpWB"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:je}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},identifier:"usereactive-demo2"}},"usereactive-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"jllS"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ze}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},identifier:"usereactive-demo3"}},"usereactive-demo4":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"tf72"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Te}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},description:'<div class="markdown"><p><code>useReactive</code>\u4ea7\u751f\u53ef\u64cd\u4f5c\u7684\u4ee3\u7406\u5bf9\u8c61\u4e00\u76f4\u90fd\u662f\u540c\u4e00\u4e2a\u5f15\u7528\uff0c<code>useEffect</code> , <code>useMemo</code> ,<code>useCallback</code> ,<code>\u5b50\u7ec4\u4ef6\u5c5e\u6027\u4f20\u9012</code> \u7b49\u5982\u679c\u4f9d\u8d56\u7684\u662f\u8fd9\u4e2a\u4ee3\u7406\u5bf9\u8c61\u662f<strong>\u4e0d\u4f1a</strong>\u5f15\u8d77\u91cd\u65b0\u6267\u884c\u3002</p></div>',identifier:"usereactive-demo4"}},"useresponsive-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"rbNq"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ie}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Get responsive info in components","title.zh-CN":"\u5728\u7ec4\u4ef6\u4e2d\u83b7\u53d6\u54cd\u5e94\u5f0f\u4fe1\u606f",description:'<div class="markdown"><p>By calling useResponsive in components, you can retrieve the responsive infomation of the browser page and subscribe to it at the same time.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5728\u7ec4\u4ef6\u4e2d\u8c03\u7528 useResponsive \u53ef\u4ee5\u83b7\u53d6\u5e76\u8ba2\u9605\u6d4f\u89c8\u5668\u7a97\u53e3\u7684\u54cd\u5e94\u5f0f\u4fe1\u606f\u3002</p></div>',identifier:"useresponsive-demo1"}},"usesafestate-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"KQwp"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Fe},"index.ts":{import:"../index",content:Ne},"useUnmountedRef/index.ts":{import:"../useUnmountedRef",content:De}},dependencies:{react:{version:"16.14.0"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",identifier:"usesafestate-demo1"}},"usescroll-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"4J0Z"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:qe}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Basic Usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Try to scroll the box below.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5c1d\u8bd5\u6eda\u52a8\u4e00\u4e0b\u6587\u5b57\u5185\u5bb9\u3002</p></div>',identifier:"usescroll-demo1"}},"usescroll-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"/Xzp"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ee}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Detect Whole Page Scroll","title.zh-CN":"\u76d1\u6d4b\u6574\u9875\u7684\u6eda\u52a8",description:'<div class="markdown"><p>Try to scroll this webpage.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5c1d\u8bd5\u6eda\u52a8\u4e00\u4e0b\u9875\u9762\u3002</p></div>',identifier:"usescroll-demo2"}},"usescroll-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"JkiO"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ae}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Controll listen on scroll status","title.zh-CN":"\u63a7\u5236\u6eda\u52a8\u72b6\u6001\u7684\u76d1\u542c",description:'<div class="markdown"><p>listen on scroll event between 100px ~ 200px in vertical direction</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5728\u5782\u76f4\u65b9\u5411 100px \u5230 200px \u7684\u6eda\u52a8\u8303\u56f4\u5185\u76d1\u542c</p></div>',identifier:"usescroll-demo3"}},"useselections-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"yikz"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Le}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"},"react-dom":{version:">=16.9.0"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Checkbox group.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5e38\u89c1\u7684 checkbox \u8054\u52a8</p></div>',identifier:"useselections-demo1"}},"usesessionstoragestate-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"lZDW"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Be}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},title:"Persist state into sessionStorage","title.zh-CN":"\u5c06 state \u6301\u4e45\u5316\u5728 sessionStorage \u4e2d",description:'<div class="markdown"><p>Refresh this page and you will find the value of input box get restored from sessionStorage.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5237\u65b0\u9875\u9762\u540e\uff0c\u53ef\u4ee5\u770b\u5230\u8f93\u5165\u6846\u4e2d\u7684\u5185\u5bb9\u88ab\u4ece sessionStorage \u4e2d\u6062\u590d\u4e86\u3002</p></div>',identifier:"usesessionstoragestate-demo1"}},"usesessionstoragestate-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"VUjs"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Me}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},title:"Persist objects","title.zh-CN":"\u5b58\u50a8\u5bf9\u8c61",description:'<div class="markdown"><p>useSessionStorageState will do the serialization and deserialization work automatically.</p></div>',"description.zh-CN":'<div class="markdown"><p>useSessionStorageState \u4f1a\u81ea\u52a8\u5904\u7406\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u7684\u64cd\u4f5c\u3002</p></div>',identifier:"usesessionstoragestate-demo2"}},"usesessionstoragestate-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"bqTf"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:_e}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Persist objects with function updater","title.zh-CN":"\u4f7f\u7528 function updater \u5b58\u50a8",description:'<div class="markdown"><p>function updater is also acceptable with useSessionStorageState.</p></div>',"description.zh-CN":'<div class="markdown"><p>useSessionStorageState \u91cc\u4e5f\u53ef\u4ee5\u7528 function updater\uff0c\u5c31\u50cf useState \u90a3\u6837\u3002</p></div>',identifier:"usesessionstoragestate-demo3"}},"useset-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Tt9S"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ue}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Pass in a Set acceptable parameter.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f20\u5165\u4e00\u4e2a Set \u53ef\u63a5\u53d7\u7684\u53c2\u6570\u3002</p></div>',identifier:"useset-demo1"}},"usesetstate-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"h17I"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ve}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",identifier:"usesetstate-demo1"}},"usesize-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"8PEa"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:$e}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>using ref to listen to size change</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f7f\u7528 ref \u76d1\u542c\u8282\u70b9\u5c3a\u5bf8\u53d8\u5316</p></div>',identifier:"usesize-demo1"}},"usesize-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"XFJ9"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ke}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"pass in the DOM element","title.zh-CN":"\u4f20\u5165 DOM \u5143\u7d20",description:'<div class="markdown"><p>Pass in a function that returns the DOM element.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f20\u5165 function \u5e76\u8fd4\u56de\u4e00\u4e2a dom \u5143\u7d20\u3002</p></div>',identifier:"usesize-demo2"}},"usetextselection-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"kfU+"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:He}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Tracking content of user text selection</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5b9e\u65f6\u83b7\u53d6\u9875\u9762\u4e0a\u9009\u62e9\u7684\u6587\u672c</p></div>',identifier:"usetextselection-demo1"}},"usetextselection-demo3":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"VNrD"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:We}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Listen specified area","title.zh-CN":"\u76d1\u542c\u7279\u5b9a\u533a\u57df\u6587\u672c\u9009\u62e9",description:'<div class="markdown"><p>useTextSelection can receive dom or ref, for listen specified area.</p></div>',"description.zh-CN":'<div class="markdown"><p>useTextSelection \u53ef\u4ee5\u63a5\u6536 dom \u6216 ref\uff0c\u6307\u5b9a\u76d1\u542c\u533a\u57df\u3002</p></div>',identifier:"usetextselection-demo3"}},"usetextselection-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"ACt2"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Je}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},ahooks:{version:"2.10.2"},react:{version:">=16.9.0"},"react-dom":{version:">=16.9.0"}},title:"Translate user text selection","title.zh-CN":"\u5212\u8bcd\u7ffb\u8bd1",description:'<div class="markdown"><p>Use Antd.Popover to translate user text selection</p></div>',"description.zh-CN":'<div class="markdown"><p>\u914d\u5408 Popover \u505a\u5212\u8bcd\u7ffb\u8bd1</p></div>',identifier:"usetextselection-demo2"}},"usethrottle-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"aFWa"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ye}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>ThrottledValue will change every 500ms.</p></div>',"description.zh-CN":'<div class="markdown"><p>ThrottledValue \u6bcf\u9694 500ms \u53d8\u5316\u4e00\u6b21\u3002</p></div>',identifier:"usethrottle-demo1"}},"usethrottleeffect-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"H0o/"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ge}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},identifier:"usethrottleeffect-demo1"}},"usethrottlefn-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"rXjo"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Ze}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Frequent calls run, but the function is only executed every 500ms.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u9891\u7e41\u8c03\u7528 run\uff0c\u4f46\u53ea\u4f1a\u6bcf\u9694 500ms \u6267\u884c\u4e00\u6b21\u76f8\u5173\u51fd\u6570\u3002</p></div>',identifier:"usethrottlefn-demo1"}},"usetimeout-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"6sIe"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Qe}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Execute once after 3000ms</p></div>',"description.zh-CN":'<div class="markdown"><p>3000ms\u540e\u6267\u884c\u4e00\u6b21</p></div>',identifier:"usetimeout-demo1"}},"usetitle-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"dA01"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Xe}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>sets title of the page.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u8bbe\u7f6e\u9875\u9762\u6807\u9898</p></div>',identifier:"usetitle-demo1"}},"usetoggle-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"82LI"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:en}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>use boolean value as default\uff0cuse it as same as useBoolean.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u9ed8\u8ba4\u4e3a boolean \u5207\u6362\uff0c\u57fa\u7840\u7528\u6cd5\u4e0e useBoolean \u4e00\u81f4\u3002</p></div>',identifier:"usetoggle-demo1"}},"usetoggle-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Dr+N"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:nn}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Switch between any two values","title.zh-CN":"\u5728\u4efb\u610f\u4e24\u4e2a\u503c\u4e4b\u95f4\u5207\u6362",description:'<div class="markdown"><p>Accept two parameters, switch between them.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u63a5\u53d7\u4e24\u4e2a\u53c2\u6570\uff0c\u5728\u53c2\u6570\u95f4\u8fdb\u884c\u5207\u6362\u3002</p></div>',identifier:"usetoggle-demo2"}},"usetrackedeffect-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Tus0"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:tn}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Display the changed deps when effect function is executed.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u67e5\u770b\u6bcf\u6b21 effect \u6267\u884c\u65f6\u53d1\u751f\u53d8\u5316\u7684\u4f9d\u8d56\u9879</p></div>',identifier:"usetrackedeffect-demo1"}},"useunmount-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"y7Gi"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:rn}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},ahooks:{version:"2.10.2"},react:{version:">=16.9.0"},"react-dom":{version:">=16.9.0"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>The function is called right before the component unmount.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5728\u7ec4\u4ef6\u5378\u8f7d\u65f6\uff0c\u6267\u884c\u65b9\u6cd5\u3002</p></div>',identifier:"useunmount-demo1"}},"useunmountedref-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"gT5F"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:on}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:"<div class=\"markdown\"><p>The function is called when the component is first rendered, and the returned object has a property named 'current' which indicates whether the current component has been unmounted</p></div>","description.zh-CN":'<div class="markdown"><p>\u5728\u7ec4\u4ef6\u9996\u6b21\u6e32\u67d3\u65f6\u6267\u884c\u65b9\u6cd5\uff0c\u8fd4\u56de\u4e00\u4e2a\u542b\u6709current\u5c5e\u6027\u7684ref\u5bf9\u8c61\uff0ccurrent\u8868\u793a\u5f53\u524d\u7ec4\u4ef6\u662f\u5426\u5df2\u88ab\u5378\u8f7d</p></div>',identifier:"useunmountedref-demo1"}},"useupdate-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"INwW"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:sn}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},identifier:"useupdate-demo1"}},"useupdateeffect-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"vcr8"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:an}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Basic usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>This hook is exactly the same as useEffect, except it omits the first render and only runs when dependencies update.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f7f\u7528\u4e0a\u4e0e useEffect \u5b8c\u5168\u76f8\u540c\uff0c\u53ea\u662f\u5b83\u5ffd\u7565\u4e86\u9996\u6b21\u6e32\u67d3\uff0c\u4e14\u53ea\u5728\u4f9d\u8d56\u9879\u66f4\u65b0\u65f6\u8fd0\u884c\u3002</p></div>',identifier:"useupdateeffect-demo1"}},"useupdatelayouteffect-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"Tl2l"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:un}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Basic usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>This hook is exactly the same as useLayoutEffect, except it omits the first render and only runs when dependencies update.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f7f\u7528\u4e0a\u4e0e useLayoutEffect \u5b8c\u5168\u76f8\u540c\uff0c\u53ea\u662f\u5b83\u5ffd\u7565\u4e86\u9996\u6b21\u6e32\u67d3\uff0c\u4e14\u53ea\u5728\u4f9d\u8d56\u9879\u66f4\u65b0\u65f6\u8fd0\u884c\u3002</p></div>',identifier:"useupdatelayouteffect-demo1"}},"usevirtuallist-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"7F18"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:cn}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>render 100,000 items in a list.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u6e32\u67d3\u5927\u91cf\u6570\u636e</p></div>',identifier:"usevirtuallist-demo1"}},"usevirtuallist-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"YukU"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:ln}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Dynamic item height","title.zh-CN":"\u52a8\u6001\u5143\u7d20\u9ad8\u5ea6",description:'<div class="markdown"><p>specify item height dynamically.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u52a8\u6001\u6307\u5b9a\u6bcf\u4e2a\u5143\u7d20\u7684\u9ad8\u5ea6</p></div>',identifier:"usevirtuallist-demo2"}},"usewebsocket-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"tags"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:dn}},dependencies:{react:{version:"^16.8.6 || ^17.0"},ahooks:{version:"2.10.2"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>WebSocket hooks used.</p></div>',"description.zh-CN":'<div class="markdown"><p>webSocket hooks \u4f7f\u7528</p></div>',identifier:"usewebsocket-demo1"}},"usewhydidyouupdate-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(147),t.e(5),t.e(9)]).then(t.bind(null,"A0Zk"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:pn}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",description:'<div class="markdown"><p>Update state or props, you can see the output in the console</p></div>',"description.zh-CN":'<div class="markdown"><p>\u66f4\u65b0 state \u6216 props\uff0c\u53ef\u4ee5\u5728\u63a7\u5236\u53f0\u770b\u5230\u8f93\u51fa</p></div>',identifier:"usewhydidyouupdate-demo1"}},"use-request-default":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"HZTY"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:mn}},dependencies:{ahooks:{version:"2.10.2"},mockjs:{version:"1.1.0"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Default Request","title.zh-CN":"\u9ed8\u8ba4\u8bf7\u6c42",description:'<div class="markdown"><p>In this example, useRequest receives an asynchronous function <code>getUsername</code>, which is automatically triggered when the component mounted. At the same time, useRequest will automatically manage the status of <code>loading</code>, <code>data</code>, and <code>error</code> of asynchronous requests.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c useRequest \u63a5\u6536\u4e86\u4e00\u4e2a\u5f02\u6b65\u51fd\u6570 <code>getUsername</code> \uff0c\u5728\u7ec4\u4ef6\u521d\u6b21\u52a0\u8f7d\u65f6\uff0c \u81ea\u52a8\u89e6\u53d1\u8be5\u51fd\u6570\u6267\u884c\u3002\u540c\u65f6 useRequest \u4f1a\u81ea\u52a8\u7ba1\u7406\u5f02\u6b65\u8bf7\u6c42\u7684 <code>loading</code> , <code>data</code> , <code>error</code> \u7b49\u72b6\u6001\u3002</p></div>',identifier:"use-request-default"}},"use-request-manual":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"gwZz"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:fn}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},ahooks:{version:"2.10.2"},react:{version:">=16.9.0"},"react-dom":{version:">=16.9.0"}},componentName:"use-request",title:"Manual trigger","title.zh-CN":"\u624b\u52a8\u89e6\u53d1",description:'<div class="markdown"><p>If <code>options.manual</code> is set, the async function will only be executed when the <code>run</code> function is called.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7\u8bbe\u7f6e <code>options.manual = true</code> , \u5219\u9700\u8981\u624b\u52a8\u8c03\u7528 <code>run</code> \u65f6\u624d\u4f1a\u89e6\u53d1\u6267\u884c\u5f02\u6b65\u51fd\u6570\u3002</p></div>',identifier:"use-request-manual"}},"use-request-polling":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"my6v"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:vn}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"},mockjs:{version:"1.1.0"}},componentName:"use-request",title:"Polling","title.zh-CN":"\u8f6e\u8be2",description:'<div class="markdown"><p>If <code>options.pollingInterval</code> is set, Polling can be turned on.</p>\n<ul>\n<li>You can set <code>options.pollingWhenHidden=false</code> to temporarily suspend the scheduled task when the screen is not visible.</li>\n<li>Use <code>run</code> / <code>cancel</code> to start / stop polling.</li>\n<li>When <code>options.manual=true</code>, you need to call the <code>run</code> function to start the polling.</li>\n</ul></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7\u8bbe\u7f6e <code>options.pollingInterval</code> \uff0c\u8fdb\u5165\u8f6e\u8be2\u6a21\u5f0f\uff0c\u5b9a\u65f6\u89e6\u53d1\u51fd\u6570\u6267\u884c\u3002</p>\n<ul>\n<li>\u901a\u8fc7\u8bbe\u7f6e <code>options.pollingWhenHidden=false</code> \uff0c\u5728\u5c4f\u5e55\u4e0d\u53ef\u89c1\u65f6\uff0c\u6682\u65f6\u6682\u505c\u5b9a\u65f6\u4efb\u52a1\u3002</li>\n<li>\u901a\u8fc7 <code>run</code> / <code>cancel</code> \u6765 \u5f00\u542f/\u505c\u6b62 \u8f6e\u8be2\u3002</li>\n<li>\u5728 <code>options.manual=true</code> \u65f6\uff0c\u9700\u8981\u7b2c\u4e00\u6b21\u6267\u884c <code>run</code> \u540e\uff0c\u624d\u5f00\u59cb\u8f6e\u8be2\u3002</li>\n</ul></div>',identifier:"use-request-polling"}},"use-request-concurrent":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"tm4u"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:hn}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},ahooks:{version:"2.10.2"},react:{version:">=16.9.0"},"react-dom":{version:">=16.9.0"}},componentName:"use-request",title:"refreshOnWindowFocus","title.zh-CN":"\u5e76\u884c\u8bf7\u6c42",description:'<div class="markdown"><p>Through <code>options.fetchKey</code>, you can categorize requests. Each type of request has an independent status. You can find all requests in<code> fetches</code>.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7 <code>options.fetchKey</code> \uff0c\u53ef\u4ee5\u5c06\u8bf7\u6c42\u8fdb\u884c\u5206\u7c7b\uff0c\u6bcf\u4e00\u7c7b\u7684\u8bf7\u6c42\u90fd\u6709\u72ec\u7acb\u7684\u72b6\u6001\uff0c\u4f60\u53ef\u4ee5\u5728 <code>fetches</code> \u4e2d\u627e\u5230\u6240\u6709\u7684\u8bf7\u6c42\u3002</p></div>',identifier:"use-request-concurrent"}},"use-request-ready":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"MGx+"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:bn}},dependencies:{ahooks:{version:"2.10.2"},mockjs:{version:"1.1.0"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Dependent Request","title.zh-CN":"\u4f9d\u8d56\u8bf7\u6c42",description:'<div class="markdown"><p>Only when <code>options.ready</code> becomes true, will the request be initiated. Based on this feature, dependent requests can be implemented.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u53ea\u6709\u5f53 <code>options.ready</code> \u53d8\u4e3a true \u65f6, \u624d\u4f1a\u53d1\u8d77\u8bf7\u6c42\uff0c\u57fa\u4e8e\u8be5\u7279\u6027\u53ef\u4ee5\u5b9e\u73b0\u4e32\u884c\u8bf7\u6c42\uff0c\u4f9d\u8d56\u8bf7\u6c42\u7b49\u3002</p></div>',identifier:"use-request-ready"}},"use-request-debounce":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"xCmd"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:gn}},dependencies:{ahooks:{version:"2.10.2"},mockjs:{version:"1.1.0"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Debounce","title.zh-CN":"\u9632\u6296",description:'<div class="markdown"><p>If <code>options.debounceInterval</code> is set, requests except for the last one within the debounce interval will be dropped.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7\u8bbe\u7f6e <code>options.debounceInterval</code> \uff0c\u5219\u8fdb\u5165\u9632\u6296\u6a21\u5f0f\u3002\u6b64\u65f6\u5982\u679c\u9891\u7e41\u89e6\u53d1 <code>run</code> \uff0c\u5219\u4f1a\u4ee5\u9632\u6296\u7b56\u7565\u8fdb\u884c\u8bf7\u6c42\u3002</p></div>',identifier:"use-request-debounce"}},"use-request-throttle":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"vYAf"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:yn}},dependencies:{ahooks:{version:"2.10.2"},mockjs:{version:"1.1.0"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Throttle","title.zh-CN":"\u8282\u6d41",description:'<div class="markdown"><p>If <code>options.throttleInterval</code> is set, the request will be triggered once maximum within the throttle interval.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7\u8bbe\u7f6e <code>options.throttleInterval</code> \uff0c\u5219\u8fdb\u5165\u8282\u6d41\u6a21\u5f0f\u3002\u6b64\u65f6\u5982\u679c\u9891\u7e41\u89e6\u53d1 <code>run</code> \uff0c\u5219\u4f1a\u4ee5\u8282\u6d41\u7b56\u7565\u8fdb\u884c\u8bf7\u6c42\u3002</p></div>',identifier:"use-request-throttle"}},"use-request-cachekey":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"tHul"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:wn}},dependencies:{ahooks:{version:"2.10.2"},mockjs:{version:"1.1.0"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Cache & SWR","title.zh-CN":"\u7f13\u5b58 & SWR",description:'<div class="markdown"><p>If <code>options.cacheKey</code> is set, useRequest will cache the data of the previous request, and use it as the initial  value while the next request is not returned, like SWR. You can set the cache data collected time through <code>cacheTime</code>, and you can set the data freshness time through <code>staleTime</code>.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5982\u679c\u8bbe\u7f6e\u4e86 <code>options.cacheKey</code> \uff0c useRequest \u4f1a\u5c06\u5f53\u524d\u8bf7\u6c42\u7ed3\u675f\u6570\u636e\u7f13\u5b58\u8d77\u6765\u3002\u4e0b\u6b21\u7ec4\u4ef6\u521d\u59cb\u5316\u65f6\uff0c\u5982\u679c\u6709\u7f13\u5b58\u6570\u636e\uff0c\u6211\u4eec\u4f1a\u4f18\u5148\u8fd4\u56de\u7f13\u5b58\u6570\u636e\uff0c\u7136\u540e\u5728\u80cc\u540e\u53d1\u9001\u65b0\u8bf7\u6c42\uff0c\u4e5f\u5c31\u662f SWR \u7684\u80fd\u529b\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7 <code>cacheTime</code> \u8bbe\u7f6e\u7f13\u5b58\u6570\u636e\u56de\u6536\u65f6\u95f4\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 <code>staleTime</code> \u8bbe\u7f6e\u6570\u636e\u4fdd\u6301\u65b0\u9c9c\u65f6\u95f4\u3002</p></div>',identifier:"use-request-cachekey"}},"use-request-preload":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"3qZu"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:kn}},dependencies:{ahooks:{version:"2.10.2"},mockjs:{version:"1.1.0"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Preload","title.zh-CN":"\u9884\u52a0\u8f7d",description:'<div class="markdown"><p>Requests for the same <code>cacheKey</code> are shared globally, which means that you can load data in advance. With this feature, preloading can be easily implemented..</p></div>',"description.zh-CN":'<div class="markdown"><p>\u540c\u4e00\u4e2a <code>cacheKey</code> \u7684\u8bf7\u6c42\uff0c\u662f\u5168\u5c40\u5171\u4eab\u7684\uff0c\u4e5f\u5c31\u662f\u4f60\u53ef\u4ee5\u63d0\u524d\u52a0\u8f7d\u6570\u636e\u3002\u5229\u7528\u8be5\u7279\u6027\uff0c\u53ef\u4ee5\u5f88\u65b9\u4fbf\u7684\u5b9e\u73b0\u9884\u52a0\u8f7d\u3002</p></div>',identifier:"use-request-preload"}},"use-request-refreshonwindowfocus":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"Miin"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:xn}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},ahooks:{version:"2.10.2"},react:{version:">=16.9.0"},mockjs:{version:"1.1.0"},"react-dom":{version:">=16.9.0"}},componentName:"use-request",title:"refreshOnWindowFocus","title.zh-CN":"\u5c4f\u5e55\u805a\u7126\u91cd\u65b0\u8bf7\u6c42",description:'<div class="markdown"><p>If <code>options.refreshOnWindowFocus</code> is set, useRequest will reRequest in the browser refocus or revisible. On next component load. You can set the request interval by setting <code>options.focusTimespan</code>. The default is 5000ms.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5982\u679c\u4f60\u8bbe\u7f6e\u4e86 <code>options.refreshOnWindowFocus = true</code> \uff0c\u5219\u5728\u6d4f\u89c8\u5668\u7a97\u53e3 <code>refocus</code> \u548c <code>revisible</code> \u65f6\uff0c\u4f1a\u91cd\u65b0\u53d1\u8d77\u8bf7\u6c42\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e <code>options.focusTimespan</code> \u6765\u8bbe\u7f6e\u8bf7\u6c42\u95f4\u9694\uff0c\u9ed8\u8ba4\u4e3a <code>5000ms</code> \u3002</p></div>',identifier:"use-request-refreshonwindowfocus"}},"use-request-mutate":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"wQD0"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Cn}},dependencies:{ahooks:{version:"2.10.2"},mockjs:{version:"1.1.0"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Mutate","title.zh-CN":"\u7a81\u53d8",description:'<div class="markdown"><p>You can use <code>mutate</code> to modify <code>data</code>. <code>mutate</code> parameters can be<code> newData</code> or <code>(oldData) => newData</code></p></div>',"description.zh-CN":'<div class="markdown"><p>\u4f60\u53ef\u4ee5\u901a\u8fc7 <code>mutate</code> \uff0c\u76f4\u63a5\u4fee\u6539 <code>data</code> \u3002 <code>mutate</code> \u51fd\u6570\u53c2\u6570\u53ef\u4ee5\u4e3a <code>newData</code> \u6216 <code>(oldData)=> newData</code> \u3002</p></div>',identifier:"use-request-mutate"}},"use-request-loadingdelay":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"deP+"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Sn}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Loading Delay","title.zh-CN":"Loading Delay",description:'<div class="markdown"><p>Setting <code>options.loadingDelay</code> can specifies a delay in milliseconds for loading (prevent flush).</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7\u8bbe\u7f6e <code>options.loadingDelay</code> \uff0c\u53ef\u4ee5\u5ef6\u8fdf <code>loading</code> \u53d8\u6210 <code>true</code> \u7684\u65f6\u95f4\uff0c\u6709\u6548\u9632\u6b62\u95ea\u70c1\u3002</p></div>',identifier:"use-request-loadingdelay"}},"use-request-refreshdeps":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"FUtD"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Pn}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"refreshDeps","title.zh-CN":"refreshDeps",description:'<div class="markdown"><p>When <code>options.refreshDeps</code> changes, useRequest will execute the service with previous params.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5f53 <code>options.refreshDeps</code> \u53d8\u5316\u65f6\uff0cuseRequest \u4f1a\u4f7f\u7528\u4e4b\u524d\u7684\u53c2\u6570\u91cd\u65b0\u6267\u884c service\u3002</p></div>',identifier:"use-request-refreshdeps"}},"use-request-fetch":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"qJMn"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Rn}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Use default fetch","title.zh-CN":"\u4f7f\u7528\u9ed8\u8ba4\u7684 fetch",description:'<div class="markdown"><p>If the first parameter of useRequest is <code>string</code>\u3001<code>object</code> or <code>()=> string|object</code>, the network request will be sent by fetch.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5982\u679c useRequest \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f <code>string</code>\u3001<code>object</code> \u6216 <code>()=> string|object</code>\uff0c\u5219\u9ed8\u8ba4\u4f7f\u7528 fetch \u53d1\u9001\u7f51\u7edc\u8bf7\u6c42</p></div>',identifier:"use-request-fetch"}},"use-request-axios":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"NgPO"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:On}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"},axios:{version:"0.21.1"}},componentName:"use-request",title:"Use axios","title.zh-CN":"\u4f7f\u7528 axios",description:'<div class="markdown"><p>By setting <code>requstMethod</code>, you can use your own request library.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7\u8bbe\u7f6e <code>requstMethod</code>, \u53ef\u4ee5\u4f7f\u7528\u81ea\u5df1\u7684\u8bf7\u6c42\u5e93\u3002</p></div>',identifier:"use-request-axios"}},"use-request-pagination-1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"G/D3"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:jn}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},ahooks:{version:"2.10.2"},react:{version:">=16.9.0"},mockjs:{version:"1.1.0"},"react-dom":{version:">=16.9.0"}},componentName:"use-request",title:"Default pagination","title.zh-CN":"\u666e\u901a\u5206\u9875",description:'<div class="markdown"><p>For normal paging scenarios, useRequest will manage <code>current</code> and <code>pageSize</code> automaticlly.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u666e\u901a\u7684\u5206\u9875\u573a\u666f\uff0c\u6211\u4eec\u4f1a\u81ea\u52a8\u7ba1\u7406 <code>current</code> \u548c <code>pageSize</code>\u3002</p></div>',identifier:"use-request-pagination-1"}},"use-request-pagination-antd":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"kX6S"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:zn}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},ahooks:{version:"2.10.2"},react:{version:">=16.9.0"},mockjs:{version:"1.1.0"},"react-dom":{version:">=16.9.0"}},componentName:"use-request",title:"antd Table","title.zh-CN":"antd Table",description:'<div class="markdown"><p>Since antd [Table] (<a href="https://ant.design/components/table-cn/" target="_blank">https://ant.design/components/table-cn/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="__dumi-default-external-link-icon"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>) is widely used, we especially support the paging format required by antd Table, and <code>sorter</code>,<code> filters</code>, etc. You can access these properties via <code>result.tableProps</code>, <code>result.params[0]?.filters</code>, <code>result.params[0]?.sorter</code>.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u7531\u4e8e antd <a href="https://ant.design/components/table-cn/" target="_blank">Table<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="__dumi-default-external-link-icon"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> \u4f7f\u7528\u6bd4\u8f83\u5e7f\u6cdb\uff0c\u6211\u4eec\u7279\u522b\u652f\u6301\u4e86 antd Table \u9700\u8981\u7684\u5206\u9875\u683c\u5f0f\uff0c\u53ca <code>sorter</code> \u3001 <code>filters</code> \u7b49\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7 <code>result.tableProps</code> \uff0c <code>result.params[0]?.filters</code> \uff0c <code>result.params[0]?.sorter</code> \u8bbf\u95ee\u5230\u8fd9\u4e9b\u5c5e\u6027\u3002</p></div>',identifier:"use-request-pagination-antd"}},"use-request-pagination-cache":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"SVLP"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Tn}},dependencies:{antd:{version:"4.15.3",css:"antd/dist/antd.css"},ahooks:{version:"2.10.2"},mockjs:{version:"1.1.0"},react:{version:">=16.9.0"},"react-dom":{version:">=16.9.0"}},componentName:"use-request",title:"With Cache","title.zh-CN":"\u5e26\u7f13\u5b58\u7684 Pagination",description:'<div class="markdown"><p>In the scenario where <code>cacheKey</code> is set, the <code>params</code> of <code>run</code> can be cached. Using this feature, we can implement caching of pagination-related conditions.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5728 <code>cacheKey</code> \u573a\u666f\u4e0b\uff0c <code>run</code> \u7684\u53c2\u6570 <code>params</code> \u662f\u53ef\u4ee5\u7f13\u5b58\u7684\uff0c\u5229\u7528\u8fd9\u4e2a\u7279\u70b9\uff0c\u6211\u4eec\u53ef\u4ee5\u5b9e\u73b0 pagination \u76f8\u5173\u6761\u4ef6\u7684\u7f13\u5b58\u3002</p></div>',identifier:"use-request-pagination-cache"}},"use-request-loadmore-1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"jNcR"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:In}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"LoadMore default useage","title.zh-CN":"\u52a0\u8f7d\u66f4\u591a\u57fa\u672c\u7528\u6cd5",description:'<div class="markdown"><p>If <code>options.cacheKey</code> is set, the data will be cached.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u901a\u8fc7\u8bbe\u7f6e cacheKey\uff0c\u53ef\u4ee5\u7f13\u5b58\u6240\u6709 list \u6570\u636e\u3002</p></div>',identifier:"use-request-loadmore-1"}},"use-request-loadmore-2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,Promise.all([t.e(2),t.e(6),t.e(148),t.e(5),t.e(10)]).then(t.bind(null,"37VS"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Fn}},dependencies:{ahooks:{version:"2.10.2"},react:{version:"^16.8.6 || ^17.0"}},componentName:"use-request",title:"Pull up to load more","title.zh-CN":"\u4e0a\u62c9\u52a0\u8f7d\u66f4\u591a",description:'<div class="markdown"><p>If <code>options.ref</code> is set, loadMore is automatically triggered when scrolling to the bottom. Of course you must set <code>isNoMore</code> at this time so that <code>useRequest</code> will know when to stop.</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5982\u679c options \u4e2d\u5b58\u5728 <code>ref</code>\uff0c\u5219\u5728\u6eda\u52a8\u5230\u5e95\u90e8\u65f6\uff0c\u81ea\u52a8\u89e6\u53d1 loadMore\u3002\u5f53\u7136\u6b64\u65f6\u4f60\u5fc5\u987b\u8bbe\u7f6e <code>isNoMore</code>, \u4ee5\u4fbf\u8ba9 <code>useRequest</code> \u77e5\u9053\u4f55\u65f6\u505c\u6b62\u3002</p></div>',identifier:"use-request-loadmore-2"}},"use-url-state-demo1":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,t.e(7).then(t.bind(null,"bS7p"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Nn}},dependencies:{react:{version:"^16.8.6"},"@ahooksjs/use-url-state":{version:"2.5.6"},"react-router":{version:"^5.0.0"}},componentName:"use-url-state",title:"Default usage","title.zh-CN":"\u57fa\u7840\u7528\u6cd5",hideActions:["CSB"],description:'<div class="markdown"><p>store the state into url query parameter</p></div>',"description.zh-CN":'<div class="markdown"><p>\u5c06\u72b6\u6001\u540c\u6b65\u5230 url query \u4e2d</p></div>',identifier:"use-url-state-demo1"}},"use-url-state-demo2":{component:Object(a["dynamic"])({loader:function(){var e=Object(r["a"])(s.a.mark((function e(){return s.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,t.e(7).then(t.bind(null,"Gemd"));case 2:return e.abrupt("return",e.sent.default);case 3:case"end":return e.stop()}}),e)})));function n(){return e.apply(this,arguments)}return n}()}),previewerProps:{sources:{_:{tsx:Dn}},dependencies:{react:{version:"^16.8.6"},"@ahooksjs/use-url-state":{version:"2.5.6"},"react-router":{version:"^5.0.0"}},componentName:"use-url-state",title:"Multi-state management","title.zh-CN":"\u591a\u72b6\u6001\u7ba1\u7406",hideActions:["CSB"],description:'<div class="markdown"><p>useUrlState can manage multiple states at the same time</p></div>',"description.zh-CN":'<div class="markdown"><p>useUrlState \u53ef\u4ee5\u540c\u65f6\u7ba1\u7406\u591a\u4e2a\u72b6\u6001</p></div>',identifier:"use-url-state-demo2"}}}},MZF8:function(e,n,t){"use strict";var r=t("ogwx");t.d(n,"a",(function(){return r["b"]}));var o=t("VCU9");t.d(n,"b",(function(){return o["a"]}))},Zs1V:function(e){e.exports=JSON.parse("{}")}}]);