0.1.1 • Published 2 years ago
@sidri-fe/imodel-hooks v0.1.1
iModel Hooks
一个在 iModel 项目中使用的 react hook。
为了避免多重嵌套,重复创建 connection,自动获取 child
,在组件卸载时自动销毁实例。
使用方法
- 引入
ImodelFrame
作为初始化 iframe 以及 context 的容器
// index.tsx
import { ImodelFrame } from '@sidri/imodel-hooks';
const App = () => {
return (
<Wrapper>
<ImodelFrame>
<Father>
<Son />
</Father>
</ImodelFrame>
</Wrapper>
);
};
- 在
ImodelFrame
内(请注意一定要在该组件内)任意级别的子组件内使用useImodel
来获取child
,方便快捷的调用 iModel Frame 提供的 API。
// Son.tsx
import React from 'react';
import { useImodel } from '@sidri/imodel-hooks';
const Son = () => {
const { child } = useImodel();
return (
<div
onClick={() => {
child?.test('42');
}}
>
don't panic
</div>
);
};
export default Son;
ImodelFrame
接受的主要参数如下图所示(另外接受的参数包含 iframe 作为 element 的所有属性):
注:为了避免嵌套,此 hooks 已经将 onCompleted
集成在内部,不再需要使用方监听
// index.tsx
import { ImodelFrame } from '@sidri/imodel-hooks';
const App = () => {
return (
<Wrapper>
<ImodelFrame
onError={(error) => {
// `error` 为握手时发生的错误
}}
methods={{
// 具体请参考 iModel Frame 的 API 文档
onLeftClick(info) {
console.log(info);
},
onToolChange(toolName) {
console.log(toolName);
},
}}
// 是否展示调试日志(默认为否)
debug={false}
// 握手的超时时间,默认为 10000(单位:毫秒)
timeout={10000}
// 以下常用 props 就不再赘述了
className={}
style={}
>
<Father>
<Son />
</Father>
</ImodelFrame>
</Wrapper>
);
};
引入方法
- 使用 nrm 或者 cgr 之类的工具将 npm 源切换为 http://10.190.44.202:4444 (内网用户)
yarn add @sidri-fe/imodel-hooks
- 直接使用 tgz 包(内网用户)
{
"dependencies": {
"@sidri-fe/imodel-hooks": "http://10.190.44.202:4444/@sidri-fe/imodel-hooks/-/imodel-hooks-0.1.1.tgz"
}
}
- 从 npm 市场下载(非内网用户),请注意:最新的 patch 会优先发布在内网
yarn add @sidri-fe/imodel-hooks