📦 react-iztro

基于 iztro 的 react 组件，用于生成一张紫微斗数星盘。

react component of iztro used to generate an astrolabe of Zi Wei Dou Shu.

功能

展示完整紫微斗数星盘

包含所有 主星，辅星，杂耀，四化，神煞，流耀 以及星耀的 亮度。高亮显示重要的星耀，比如 桃花星，解神，禄存 和 天马。
合理的星耀分布

用不同的颜色和字号来将 星耀，宫名，宫干 等分区域显示，解盘一目了然，直击重点。
清晰的运限指示

在宫位中明显的标示出 大限、小限、流年、流月、流日、流时 所在宫位，点击运限指示按钮以后会显示重排后的运限宫名以及运限四化，更加方便的使用叠宫技巧解盘。
流耀显示

展示出各个流派都需要的 流耀，可自行选择自己熟悉的流耀进行解盘。
三方四正指示线

在中宫会显示 三方四正 指示线，点击运限时指示线的指向会动态跟随选中的最小那个运限流动，比如同时选择 流年 和 流月，指示线会跟随 流月。
强大的动态运限

在 中宫 里，除了显示基本信息和三方四正线以外，还加入了可以调整运限的按钮组，可以非常方便的移动各个维度的运限。
简单易用的组件

零配置快速集成到你的页面中，对于集成几乎没有学习成本。你可以根据自己的页面风格自行调整样式，或控制各个元素的显示与隐藏（通过覆盖默认样式）。

集成到页面中的界面如下图所示。你也可以直接访问官方的紫微派 - 紫微斗数在线排盘查看效果。

如果你觉得该组件对你有用，希望给个⭐️⭐️鼓励一下。

安装

npm install react-iztro -S

当然你也可以使用 yarn

yarn add react-iztro

使用

import {Iztrolabe} from "react-iztro"

function App() {
  return (
    <div className="App" style={{ width: 1024, margin: '50px auto', boxShadow: '0 0 25px rgba(0,0,0,0.25)'}}>
      <Iztrolabe 
        birthday="2003-10-12" 
        birthTime={1} 
        birthdayType="solar" 
        gender="male" 
        horoscopeDate={new Date()} // 新增参数，设置运限日期 [可选，默认为当前时间] 
        horoscopeHour={1}  // 新增参数，设置流时时辰的索引 [可选，默认会获取 horoscopeDate 时间] 
      />
    </div>
  );
}

export default App;

紫微斗数 | 对算命有兴趣的程序员请进

📦 react-iztro

功能

安装

使用