@安装使用

安装BRC UI

# 没有安装nrm源管理工具时...
npm i -g nrm

# NPM全局切换到官方源
nrm use npm

# 安装BRC UI/React
npm i @brucelikk/brc-ui-react

使用BRC弹窗

import React, { useState } from "react";

// 引入BRC弹窗
import { BrcPopup } from "@brucelikk/brc-ui-react";

export default function PopupDemo() {
  // 用一个state控制要不要显示弹窗
  const [showPopup, setShowPopup] = useState(false);

  return (
    <div>
      <h3>PopupDemo</h3>
      <button onClick={() => setShowPopup(true)}>显示弹窗</button>

      {/* 需要时显示弹窗显示弹窗 */}
      {showPopup && (
        // closer={setShowPopup} 告诉组件哪个state在控制弹窗的显隐 它好在必要时帮你关闭弹窗
        // title="我的弹窗" 弹窗标题
        // onConfirm={() => console.log("已确定")} 点击确定时的回调
        // <p>This is a modal content</p> 自定义弹窗内容
        <BrcPopup
          closer={setShowPopup}
          title="我的弹窗"
          onConfirm={() => console.log("已确定")}
        >
          <p>This is a modal content</p>
        </BrcPopup>
      )}
    </div>
  );
}

使用BRC递归菜单

import {} from "react";
import "./App.css";
import {BrcRecursiveMenu} from "@brucelikk/brc-ui-react";
import menuItems from "./assets/menuItems";
function App() {
  return (
    <>
      <div className="wrapper">
        <div className="nav">
          <BrcRecursiveMenu items={menuItems} />
        </div>
      </div>
    </>
  );
}

export default App;