# brc-ui-react

**Repository Path**: LiShuaizi/brc-ui-react

## Basic Information

- **Project Name**: brc-ui-react
- **Description**: BRC UI：超好用的React+TS自定义UI库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-10
- **Last Updated**: 2024-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## @安装使用



#### 安装BRC UI

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

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

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



####  使用BRC弹窗



```react
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递归菜单

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

export default App;
```