# kitking-h5

> [TOC]

Latest version **1.3.3** (published 2019-01-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install kitking-h5
pnpm add kitking-h5
yarn add kitking-h5
bun add kitking-h5
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2019-01-04 |
| First published | 2018-11-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 46.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fusy |
| Maintainers | kayak-008 |

## Links

- npm: https://www.npmjs.com/package/kitking-h5
- Repository: http://whkayak.f3322.net:19100/front-end-framework/kitking-h5
- Issues: http://whkayak.f3322.net:19100/front-end-framework/kitking-h5/issues
- npm.io page: https://npm.io/package/kitking-h5

## Dependencies (9)

- [dva-core](https://npm.io/package/dva-core.md) ^1.4.0
- [invariant](https://npm.io/package/invariant.md) ^2.2.4
- [nprogress](https://npm.io/package/nprogress.md) ^0.2.0
- [dva-loading](https://npm.io/package/dva-loading.md) ^2.0.5
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.7
- [react-loadable](https://npm.io/package/react-loadable.md) ^5.5.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.1
- [react-router-redux](https://npm.io/package/react-router-redux.md) ^4.0.8
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.4.0

## Recent versions

- 1.3.3 (latest) — 2019-01-04
- 1.3.2 — 2018-11-26
- 1.3.1 — 2018-11-26
- 1.3.0 — 2018-11-26
- 1.2.1 — 2018-11-19
- 1.2.0 — 2018-11-19
- 1.1.0 — 2018-11-13

## README

[TOC]

# kitking-h5

kitking-h5 是基于 dva-core 基础封装。功能基本还原 dva。使用方式参考[dva](https://dvajs.com/guide/)


# dynamic

> dynamic 动态加载 react 组件。
> dynamic(View, dynamicOps, extendProps)
> View:ReactElement react 组件
> dynamicOps: Object 参考 react-loadable 属性
> extendProps: Object 动态组件属性扩展

```js

import dynamic from 'kitking-h5/lib/dynamic';
export default function router(app) {
    const dynamicRouter = (View) => dynamic(View, dynamicOps);
    return (
        <Router>
            <Switch>
                <Route key={index} component={dynamicRouter(item.component)} />
            </Switch>
        </Router>
    );
}

```

# authorized
> 权限验证组件

```jsx
import RenderAuthorized from 'kitking-h5/lib/Authorized';
import { Alert } from 'antd';

const Authorized = RenderAuthorized('user');
const noMatch = <Alert message="No permission." type="error" showIcon />;

ReactDOM.render(
  <Authorized authority={['user', 'admin']} noMatch={noMatch}>
    <Alert message="Use Array as a parameter passed!" type="success" showIcon />
  </Authorized>,
  mountNode,
);
```
> 配合路由使用

```jsx
import RenderAuthorized from 'kitking-h5/lib/Authorized';
import { Redirect } from 'react-router-dom';
const Authorized = RenderAuthorized(['visitor']);

//1.创建处理登录验证组件
const LogoinAuthorized = function Authorized({ authority, children }) {
    return (
        <KitAuthorized authority={authority} noMatch={<Redirect to="/login" />}>
            {children}
        </KitAuthorized>
    );

//2.路由配置需要验证登录路由
[
    ...
    {
        path: '/userInfo',
        component: () => import('../containers/userInfo/UserInfo'),
        authorized: LogoinAuthorized,
        authority: ['user']
    },
    ...
]

```


# saga
> 调用方式 'kitking-h5/lib/saga'

# router

> 调用方式 'kitking-h5/lib/router'
> import { HashRouter as Router, Switch, Route, Redirect, routerRedux } from 'kitking-h5/router';

# redux
> 调用方式 'kitking-h5/lib/redux'
> import { connect } from 'kitking-h5/redux'; 


更新日志：

| 时间       | 类型 | 修改人 | 版本号 | 修改内容                                                           |
| ---------- | ---- | ------ | ------ | ------------------------------------------------------------------ |
| 2018-11-16 | M    | fusy   | 1.1.1  | 添加页面切换动画全局控制开关，支持路由懒加载预加载模式，增加进度条 |
| 2018-11-19 | A    | fusy   | 1.2.0  | 添加权限控制组件                                                   |

---
_Source: https://npm.io/package/kitking-h5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._