reactstrap

Reactstrap

Bootstrap 5的无状态反应组件。

如果您使用的是Bootstrap 4，则需要使用ReactStrap V8

入门

请按照Create-React-App指令开始启动，然后按照添加Bootstrap的ReactStrap版本进行操作。

tl; dr

 npx create-react-app my-app
cd my-app/
npm start

或者，如果NPX（节点> = 6和NPM> = 5.2）

 npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

然后打开http：// localhost：3000/以查看您的应用。应用程序的初始结构是设置的。接下来，让我们添加React -Strap和Bootstrap。

添加引导程序

从NPM安装ReactStrap和Bootstrap。 ReactStrap不包括Bootstrap CSS，因此也需要安装：

 npm i bootstrap
npm i reactstrap react react-dom

在src/index.js文件中导入bootstrap css：

 import 'bootstrap/dist/css/bootstrap.css' ;

导入src/App.js文件或您的自定义组件文件中所需的ReactStrap组件：

 import { Button } from 'reactstrap' ;

现在，您准备在渲染方法中定义的组件层次结构中使用导入的ReactStrap组件。这是使用ReactStrap的示例App.js重做。

依赖性

所需的同行依赖

这些库不与React -Strap捆绑在一起，并且在运行时需要：

• 反应
• 反应

关于项目

该库包含有利于组成和控制的React Bootstrap组件。该库不取决于jQuery或Bootstrap JavaScript。但是，通过React-popper poppers.js依靠诸如工具提示，弹出式和自动翻转下拉列表等内容的高级定位。

为了充分利用该库，有一些核心概念需要理解。

1. 预计您的内容将通过Props.Children组成，而不是使用命名的道具通过组件。

    // Content passed in via props
   const Example = ( props ) => {
     return (
       < p > This is a tooltip < TooltipTrigger tooltip = { TooltipContent } > example </ TooltipTrigger > ! </ p >
     ) ;
   }
   
   // Content passed in as children (Preferred)
   const PreferredExample = ( props ) => {
     return (
       < p >
         This is a < a href = "#" id = "TooltipExample" > tooltip </ a > example.
         < Tooltip target = "TooltipExample" >
           < TooltipContent />
         </ Tooltip >
       </ p >
     ) ;
   }

2. 该库中的属性用于在状态下传递，方便地应用修饰符类，启用高级功能（例如系绳）或自动包含基于非核心的元素。

   示例：

   • isOpen - 诸如下拉列表，弹出式，工具提示等项目的当前状态
   • toggle - 在控制组件中切换等isOpen的回调
   • color - 应用颜色类，例如： <Button color="danger"/>
   • size - 用于控制尺寸类。例如： <Button size="sm"/>
   • tag - 通过传递元素名称或组件来自定义组件输出
   • 替代样式类或visually-hidden内容时，基于​​布尔值的道具（属性）

文档

https://reaectstrap.github.io

文档搜索由Algolia的Docsearch提供动力。

代码和框示例

这是您可以尝试的代码和框的一些现成示例。

https://github.com/reaectstrap/code-sandbox-examples

贡献

发展

安装依赖项：

yarn install

在http：// localhost：8080/带WebPack Dev服务器：

yarn start

运行测试和覆盖范围报告：

yarn cover

手表测试：

yarn test 

释放

释放分支/版本控制/注释将通过Release-Please github Action自动创建和维护。当您准备发布该版本时，只需合并发布分支。将创建版本，将发布新软件包，并将更新的文档部署到https://reactstrap.github.io/。

在野外

使用reactstrap组织和项目

• 机身反应 - 演示 - 机身为使用React构建数据密集的Web应用所需的所有组件提供了所有组件。
• 组成部分
• 视频反应
• 无核心启动 - 启动 - admin-template-demo
• Admin仪表板示例应用程序构建了ReactStrap -Demo
• DeVexTreme React Grid-这是一个无状态的数据网格，构建在reactstrap的顶部，分类，排序，过滤，分组，选择，编辑和虚拟滚动功能。
• DeVextreme React图表 - 一个基于reactstrap之上的图表，可使用各种串联类型（包括栏，线，区域，散点，派等）可视化数据。
• ReactStrap -Scrollspy -Demo
• FormStrap-演示 - 让您的reactstrap输入组件使用Formik无缝集成
• Jimu UI-演示 - Arcgis体验构建器映射平台的UI库。

提交公关以添加到此列表中！

想要构建，记录和发布在reactstrap之上构建的可重复使用的组件？考虑分叉https://github.com/reaectstrap/component-template，以启动您的项目！