kn-hooks 0.0.24 → 0.0.25

package/README.md

@@ -1 +1,591 @@
-# tHIS IS README
+# kn-hooks  
+
+## 目录
+
+* [使用方法](#start)
+* [按需打包](#package)
+
+* API
+  * [useDictionary - 字典管理及下拉选项框渲染](#module_usedictionary)
+  * [useSwitch - 开关控制](#module_useswitch)
+  * [useClipboard - 剪贴板](#module_useclipboard)
+  * [useCounter - 计数器](#module_usecounter)
+  * [usePagination - 分页管理](#module_usepagination)
+  * [usePaginationWithForm - 支持Antd-From的分页管理](#module_usepaginationwithform)
+
+
+
+<a id='start'></a>
+
+## 使用方法
+
+```javascript
+npm i kn-hooks
+```
+
+```javascript
+// 务必使用 {指定模块名} 来引用触发tree-shake 
+import {useClipboard} from 'kn-hooks';
+
+const Index=()=>{
+  const clip = useClipboard();
+}
+
+```
+
+
+<a id='package'></a>
+
+## 按需打包
+
+> webpack4及以上版本无需下面配置
+
+webpack增加`bable-plugin-import`插件，给babel plugins增加配置
+```javascript
+//  rules: [
+//     {
+//       test: /\.js[x]?$/,
+//       exclude: /node_modules/,
+//       use: {
+//         loader:'babel-loader',
+//         options:{
+//           plugins: [
+              [
+                import, { 
+                  libraryName: "kn-hooks" ,
+                  camel2DashComponentName:false,
+                  libraryDirectory:"src",
+                }
+              ]
+//           ]
+//         }
+//       }
+//     }
+//  ]
+
+```
+
+
+
+## API 
+
+
+<a id="module_useclipboard"></a>
+## <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">G</span>        useClipboard
+
+* [    useClipboard](#module_useclipboard)
+    * [    useClipboard([props])](#module_useclipboard__useclipboard) ⇒ <code>UseClipboardResult</code>
+    * [    FunCopy](#module_useclipboard__funcopy) : <code>callback</code>
+    * [    UseClipboardResult](#module_useclipboard__useclipboardresult) : <code>Object</code>
+
+<a id="module_useclipboard__useclipboard"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">M</span>        useClipboard([props]) ⇒ <code>UseClipboardResult</code>
+剪贴板工具
+
+[Demo - CodeSandBox](https://codesandbox.io/s/useclipboard-b4ryc?file=/index.js)
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [props] | <code>Object</code> | - |
+| [props.onSuccess] | <code>callback</code> | 成功复制到剪贴板后的回调 ()=>void |
+
+**Example**  
+```js
+const clipboard= useClipboard();
+const onCopy=()=>{
+  clipboard.copy('text',()=>{console.log('success')})
+}
+```
+<a id="module_useclipboard__funcopy"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        FunCopy : <code>callback</code>
+复制函数
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| text | <code>string</code> | 需要被复制的字符串 |
+| onCurSuccess | <code>callback</code> | 复制成功的回调 ()=>void |
+
+<a id="module_useclipboard__useclipboardresult"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        UseClipboardResult : <code>Object</code>
+UseClipboardResult返回的hook
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| copy | <code>FunCopy</code> | 触发复制字符串的函数 |
+
+
+<a id="module_usecounter"></a>
+## <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">G</span>        useCounter
+
+* [    useCounter](#module_usecounter)
+    * [    useCounter()](#module_usecounter__usecounter) ⇒ <code>UseCounterResult</code>
+    * [    UseCounterResult](#module_usecounter__usecounterresult)
+
+<a id="module_usecounter__usecounter"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">M</span>        useCounter() ⇒ <code>UseCounterResult</code>
+加法计数器
+
+**Example**  
+```js
+const counter= useCounter();
+const onAdd=()=>{counter.addCount()}
+return <span>当前计数器:{counter.count}</span>
+```
+<a id="module_usecounter__usecounterresult"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        UseCounterResult
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| req | <code>Object</code> |  |
+| req.count | <code>number</code> | 当前计数器的值 |
+| req.addCount | <code>function</code> | 计数器的值+1。 ()=>void |
+
+
+<a id="module_usedictionary"></a>
+## <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">G</span>        useDictionary
+
+* [    useDictionary](#module_usedictionary)
+    * _static_
+        * [    SetConfig(params)](#module_usedictionary_setconfig) ⇒ <code>void</code>
+        * [    createDictionary(options)](#module_usedictionary_createdictionary) ⇒ <code>callback</code>
+    * _inner_
+        * [    useDictionary(props)](#module_usedictionary__usedictionary) ⇒ <code>UseDictionaryResult</code>
+        * [    Api](#module_usedictionary__api) ⇒ <code>Object</code>
+        * [    DictionaryItem](#module_usedictionary__dictionaryitem)
+        * [    UseDictionaryResult](#module_usedictionary__usedictionaryresult)
+
+<a id="module_usedictionary_setconfig"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">M</span>        SetConfig(params) ⇒ <code>void</code>
+全局设置SelectOption和RadioOption
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| params | <code>Object</code> |  |
+| params.SelectOption | <code>ReactDom</code> | Antd的SelectOption组件 |
+| params.RadioOption | <code>ReactDom</code> | Antd的SelectOption组件 |
+
+**Example**  
+```js
+import {useDictionary} from 'kn-hooks';
+  import {Select,Radio} from 'antd';
+  useDictionary.SetConfig(Select.Option,Radio.Option);
+```
+<a id="module_usedictionary_createdictionary"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">M</span>        createDictionary(options) ⇒ <code>callback</code>
+创建字典hooks工具
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| options | <code>Object</code> |  |  |
+| options.api | <code>Api</code> |  | 用于获取字典列表的接口 |
+| [options.idKey] | <code>string</code> | <code>&quot;&#x27;id&#x27;&quot;</code> | 字段id的key键值 |
+| [options.nameKey] | <code>string</code> | <code>&quot;&#x27;name&#x27;&quot;</code> | 字段name的key键值 |
+| [options.labelKey] | <code>string</code> | <code>&quot;&#x27;label&#x27;&quot;</code> | 字段label的key键值 |
+| [options.SelectOption] | <code>ReactDom</code> |  | 指定\<Select.Option\>对象是谁 |
+| [options.RadioOption] | <code>ReactDom</code> |  | 指定\<Radio.Button\>对象是谁 |
+| [options.beforeApi] | <code>callback</code> |  | (request:object)=>object 接口调用前的参数拦截器 |
+| [options.afterApi] | <code>callback</code> |  | (reponse:object)=>object[] 接口调用后的拦截器 |
+| [options.defaultTypes] | <code>Array.&lt;DictionaryItem&gt;</code> |  | 如果字典不是通过api获取，可以在这里设置字典的内容 |
+
+**Example**  
+```js
+// emUserType.jsx
+    import {useDictionary} from 'kn-hooks';
+  export const userType = useDictionary.createDictionary({
+    api:()=>Promise.resolve([{id:'1001',label:'项目1001',name:'pm1001'},]),
+    afterApi:(response)=>{
+      return response?.data;
+    }
+  });
+  // index.jsx
+  import {userType} from './emUserType.jsx'
+  const Page=()=>{
+    const emUserType = userType();
+    return (
+      <section>
+        <Select defaultValue={emUserType.getId('项目1001')}>
+        {emUserType.selectOptions}
+        </Select>
+      </section>
+    )
+  }
+```
+<a id="module_usedictionary__usedictionary"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">M</span>        useDictionary(props) ⇒ <code>UseDictionaryResult</code>
+字典管理
+
+[Demo - CodeSandBox](https://codesandbox.io/s/usedictionary-j7cw8?file=/index.js)
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| props | <code>Object</code> |  |  |
+| props.api | <code>Api</code> |  | 用于获取字典列表的接口 |
+| [props.idKey] | <code>string</code> | <code>&quot;&#x27;id&#x27;&quot;</code> | 字段id的key键值 |
+| [props.nameKey] | <code>string</code> | <code>&quot;&#x27;name&#x27;&quot;</code> | 字段name的key键值 |
+| [props.labelKey] | <code>string</code> | <code>&quot;&#x27;label&#x27;&quot;</code> | 字段label的key键值 |
+| [props.SelectOption] | <code>ReactDom</code> |  | 指定\<Select.Option\>对象是谁 |
+| [props.RadioOption] | <code>ReactDom</code> |  | 指定\<Radio.Button\>对象是谁 |
+| [props.beforeApi] | <code>callback</code> |  | (request:object)=>object 接口调用前的参数拦截器 |
+| [props.afterApi] | <code>callback</code> |  | (reponse:object)=>object[] 接口调用后的拦截器 |
+| [props.defaultTypes] | <code>Array.&lt;DictionaryItem&gt;</code> |  | 如果字典不是通过api获取，可以在这里设置字典的内容 |
+
+**Example**  
+```js
+import {Select,Radio} from 'antd';
+import useDictionary,{SetConfig} from '@/useDictionary';
+SetConfig({SelectOption:Select.Option,RadioOption:Radio.Button});
+
+const Index=()=>{
+
+  const emCity = useDictionary({
+    api:()=>{
+        return new Promise(resolve=>{
+          resolve({
+            code:0,
+            data:{
+              body:[
+                {id:1,name:'shanghai',label:'上海'},
+                {id:2,name:'beijing',label:'北京'},
+                {id:3,name:'guangzhou',label:'广州'}
+              ]
+            }
+          })
+        })
+      }
+  });
+
+  return (
+    <section >
+      <Select defaultValue={1}>
+        {
+          emCity.selectOptions
+        }
+      </Select>
+      <p>分割线</p>
+      <Radio.Group defaultValue={1}>
+        {
+          emCity.radioOptions
+        }
+      </Radio.Group>
+    </section>
+  )
+}
+```
+<a id="module_usedictionary__api"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        Api ⇒ <code>Object</code>
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| params | <code>Object</code> | 调用接口用到的参数 |
+
+<a id="module_usedictionary__dictionaryitem"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        DictionaryItem
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| id | <code>string</code> | 数据唯一ID |
+| name | <code>string</code> | 数据唯一id对应的别名 |
+| label | <code>string</code> | 展示给用户看的文字 |
+
+<a id="module_usedictionary__usedictionaryresult"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        UseDictionaryResult
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| types | <code>Array.&lt;DictionaryItem&gt;</code> | 字典数据列表 |
+| selectOptions | <code>Array.&lt;ReactDOM&gt;</code> | 供Antd渲染\<Select\>的列表 |
+| radioOptions | <code>Array.&lt;ReactDOM&gt;</code> | 供Antd渲染\<Radio\>的列表 |
+| getId | <code>function</code> | (labelOrName:string)=>string,搜索字典项中,label或name匹配labelOrName的项目，返回其id的值 |
+| getName | <code>function</code> | (id:string)=>string,搜索字典项中,id匹配id的项目，返回其name的值 |
+| getLabel | <code>function</code> | (id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值 |
+| reload | <code>function</code> | ()=>void,重新调用字典接口刷新字典列表 |
+
+
+<a id="module_usepagination"></a>
+## <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">G</span>        usePagination
+
+* [    usePagination](#module_usepagination)
+    * [    usePagination(props)](#module_usepagination__usepagination) ⇒ <code>UsePaginationResult</code>
+    * [    FunServices()](#module_usepagination__funservices) ⇒ <code>FunServicesCallback</code>
+    * [    FunServicesCallback](#module_usepagination__funservicescallback) : <code>Object</code>
+    * [    Pagination](#module_usepagination__pagination) : <code>Object</code>
+    * [    PageDataResult](#module_usepagination__pagedataresult) : <code>Object</code>
+    * [    FunUpdate](#module_usepagination__funupdate) ⇒ <code>Promise.&lt;PageDataResult&gt;</code>
+    * [    UsePaginationResult](#module_usepagination__usepaginationresult) : <code>Object</code>
+    * [    FunListener](#module_usepagination__funlistener) ⇒ <code>Object</code> \| <code>Promise.&lt;Object&gt;</code>
+
+<a id="module_usepagination__usepagination"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">M</span>        usePagination(props) ⇒ <code>UsePaginationResult</code>
+分页管理器
+
+**Version**: 1.0.0  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| props | <code>Object</code> |  |
+| props.service | <code>FunServices</code> | 发送请求的方法 |
+| [props.pagination] | <code>Pagination</code> | 默认分页信息 |
+
+**Example**  
+```js
+// 移动端滚动加载案例
+  const page = usePagination({
+    service:GET_LIST,
+    pagination:{pageSize:10},
+  });
+
+  useEffect(()=>{
+    const fnFeforeService = (params)=>{
+      // 假如你这里需要变更接口字段名称的话
+      params.page=params.current;
+      params.keyword='abc';
+      return params;
+    }
+    
+    const fnAfterService = (response)=>{
+      // 这里你可以翻译及二次处理你的接口字段
+      let req={
+        code:response.errorCode
+        data:response.list,
+        page:response.pageInfo
+      };
+      return req;
+    },
+
+    page.addListener('beforeService',fnFeforeService);
+    page.addListener('afterService',fnAfterService);
+    return ()=>{
+      page.removeListener('beforeService',fnFeforeService);
+      page.removeListener('afterService',fnAfterService)
+    }
+  },[])
+
+  const onReset=()=>{page.reset();}
+
+  const onPageChange=()=>{
+    let value=document.querySelector('#inputPage').value;
+    page.update({pagination:{current:+value}})
+  }
+  const onNext=()=>{page.nextPage();}
+
+  const renderTable=()=>{
+    let renderData= [];
+    page?.data?.forEach(list=>{
+      renderData=[...renderData,...list];
+    })
+    
+    return (
+      <ul>
+      {
+        renderData?.map((item,idx)=>{
+          return <li key={idx}>[{idx}]{item}</li>
+        })
+      }
+      </ul>
+    )
+    
+  }
+  return (
+    <ul>
+    {renderTable()}
+    </ul>
+  )
+```
+<a id="module_usepagination__funservices"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">M</span>        FunServices() ⇒ <code>FunServicesCallback</code>
+分页请求接口格式要求
+
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| current | <code>number</code> | <code>1</code> | 页码 |
+| pageSize | <code>number</code> | <code>10</code> | 分页大小 |
+| ...others | <code>any</code> |  | 其它接口附带参数 |
+
+<a id="module_usepagination__funservicescallback"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        FunServicesCallback : <code>Object</code>
+分页接口请求结果
+
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| code | <code>number</code> | <code>0</code> | 接口调用结果，0为成功 |
+| data | <code>Array.&lt;Object&gt;</code> |  | 分页数据 |
+| page | <code>Object</code> |  | 分页信息 |
+| page.current | <code>number</code> |  | 页码 |
+| page.pageSize | <code>number</code> |  | 分页大小 |
+| page.total | <code>number</code> |  | 数据总量 |
+
+<a id="module_usepagination__pagination"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        Pagination : <code>Object</code>
+分页信息
+
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| pageSize | <code>number</code> | <code>20</code> | 分页大小 |
+| current | <code>number</code> | <code>1</code> | 当前页码 |
+| total | <code>number</code> | <code>1</code> | 总记录数 |
+| [startIdx] | <code>number</code> | <code>0</code> | 当前页面下第一条数据的序号 |
+| [more] | <code>boolean</code> |  | 是否还有下一页 |
+
+<a id="module_usepagination__pagedataresult"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        PageDataResult : <code>Object</code>
+分页数据结果
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| pagination | <code>Pagination</code> | 最新分页信息 |
+| data | <code>Array.&lt;Array.&lt;Object&gt;&gt;</code> | 分页数据集合 |
+
+<a id="module_usepagination__funupdate"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        FunUpdate ⇒ <code>Promise.&lt;PageDataResult&gt;</code>
+分页查询结果
+
+**Returns**: <code>Promise.&lt;PageDataResult&gt;</code> - 最新的分页数据结果  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [pagination] | <code>Pagination</code> | 最新分页信息 |
+| [clear] | <code>boolean</code> | 是否清空数据 |
+
+<a id="module_usepagination__usepaginationresult"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        UsePaginationResult : <code>Object</code>
+usePagination的返回对象
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| data | <code>Array.&lt;Array.&lt;Object&gt;&gt;</code> | 分页数据集合 |
+| paginnation | <code>Pagination</code> | 分页信息 |
+| update | <code>FunUpdate</code> | 查询方法 |
+| next | <code>FunUpdate</code> | 获取下一页数据 |
+| addListener | <code>function</code> | 监听事件 (type='beforeService'|'afterService',fn:FunListener)=>object |
+| removeListener | <code>function</code> | 移除监听事件 (type,fn:FunListener)=>void |
+
+<a id="module_usepagination__funlistener"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        FunListener ⇒ <code>Object</code> \| <code>Promise.&lt;Object&gt;</code>
+事件监听方法
+
+**Returns**: <code>Object</code> \| <code>Promise.&lt;Object&gt;</code> - 处理完毕的数据对象或者Promise  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| params | <code>Object</code> | 被拦截的数据对象 |
+
+
+<a id="module_usepaginationwithform"></a>
+## <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">G</span>        usePaginationWithForm
+
+* [    usePaginationWithForm](#module_usepaginationwithform)
+    * [    usePaginationWithForm(props)](#module_usepaginationwithform__usepaginationwithform) ⇒ <code>UsePaginationWithFormResult</code>
+    * [    UsePaginationWithFormResult](#module_usepaginationwithform__usepaginationwithformresult) : <code>Object</code>
+
+<a id="module_usepaginationwithform__usepaginationwithform"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">M</span>        usePaginationWithForm(props) ⇒ <code>UsePaginationWithFormResult</code>
+支持Antd-Form的usePagination
+作用是在查询接口前自动获取form表单内的字段，并作为接口查询参数进行查询
+使用方法及参数字段参考 [usePagination](usePagination.md)
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| props | <code>Object</code> |  |
+| props.form | <code>Object</code> | Form表单的ref，在接口调用前会校验获取form表单内的数据，提交到接口参数内查询 |
+
+**Example**  
+```js
+const [form] = Form.useForm();
+const page = usePaginationWithForm({
+  service:GET_LIST,
+  pagination:{pageSize:10},
+  form:form
+});
+
+const onSearch=()=>{
+  page.update();
+}
+const onReset=()=>{
+  page.reset();
+}
+return(
+  <Form form={form} style={{width:'600px'}} layout="inline">
+    <Form.Item label='关键字' name='keyword' rules={[
+      {
+        max:5,
+        message:'最多5个字符'
+      }
+    ]}>
+      <Input />
+    </Form.Item>
+    <Button onClick={onSearch} type='primary'>查询</Button>
+    <Button onClick={onReset} type='primary'>重置</Button>
+  </Form>
+)
+```
+<a id="module_usepaginationwithform__usepaginationwithformresult"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        UsePaginationWithFormResult : <code>Object</code>
+usePaginationWithForm的返回对象
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| reset | <code>function</code> | 重置方法 |
+
+
+<a id="module_useswitch"></a>
+## <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">G</span>        useSwitch
+useSwitch
+
+
+* [    useSwitch](#module_useswitch)
+    * [    useSwitch([props])](#module_useswitch__useswitch) ⇒ <code>UseSwitchResult</code>
+    * [    UseSwitchResult](#module_useswitch__useswitchresult) : <code>Object</code>
+
+<a id="module_useswitch__useswitch"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">M</span>        useSwitch([props]) ⇒ <code>UseSwitchResult</code>
+控制开关
+
+[Demo-CodeSandbox](https://codesandbox.io/s/useswitch-qd7dr?file=/index.js)
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [props] | <code>boolean</code> | <code>false</code> | 默认的开关状态 |
+
+<a id="module_useswitch__useswitchresult"></a>
+### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        UseSwitchResult : <code>Object</code>
+useSwitchHookResult
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| state | <code>boolean</code> | 当前开关状态 |
+| count | <code>number</code> | 当前开关计数器 |
+| open | <code>function</code> | 切换至开模式 (force?:boolean)=>void |
+| close | <code>function</code> | 切换至关模式 (force?:boolean)=>void |
+| toggle | <code>function</code> | 切换至反向模式 ()=>void |
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-hooks",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "scripts": {
     "dev": "cross-env env_api=dev env_package=dev webpack-dev-server --progress",
     "build": "cross-env env_api=prod env_package=prod webpack --config webpack.config.js",