[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70654":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":35,"discoverSource":36},70654,"reactstrap","reactstrap\u002Freactstrap","Simple React Bootstrap 5 components","https:\u002F\u002Freactstrap.github.io",null,"JavaScript",10521,1285,159,267,0,2,4,5,6,75.83,"MIT License",false,"master",true,[26,27,28,29,30,5,31],"bootstrap","components","hacktoberfest","javascript","react","ui","2026-06-12 04:00:56","[![reactstrap](https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F399776\u002F13906899\u002F1de62f0c-ee9f-11e5-95c0-c515fee8e918.png)](https:\u002F\u002Freactstrap.github.io)\n\n[![NPM Version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freactstrap.svg?branch=master)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freactstrap) [![Build Status](https:\u002F\u002Fgithub.com\u002Freactstrap\u002Freactstrap\u002Factions\u002Fworkflows\u002Ftest.yml\u002Fbadge.svg?branch=master)](https:\u002F\u002Fgithub.com\u002Freactstrap\u002Freactstrap) [![Coverage Status](https:\u002F\u002Fcoveralls.io\u002Frepos\u002Fgithub\u002Freactstrap\u002Freactstrap\u002Fbadge.svg?branch=master)](https:\u002F\u002Fcoveralls.io\u002Fgithub\u002Freactstrap\u002Freactstrap?branch=master) [![License](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002Freactstrap.svg)](https:\u002F\u002Fgithub.com\u002Freactstrap\u002Freactstrap\u002Fblob\u002Fmaster\u002FLICENSE)\n\n# reactstrap\n\nStateless React Components for Bootstrap 5.\n\nIf you're using Bootstrap 4, you'll need to use [Reactstrap v8](https:\u002F\u002Fdeploy-preview-2356--reactstrap.netlify.app\u002F)\n\n## Getting Started\n\nFollow the [create-react-app instructions](https:\u002F\u002Fcreate-react-app.dev\u002Fdocs\u002Fgetting-started) to get started and then follow the reactstrap version of [adding bootstrap](#adding-bootstrap).\n\n### tl;dr\n\n ```\nnpx create-react-app my-app\ncd my-app\u002F\nnpm start\n```\nor,  if npx (Node >= 6 and npm >= 5.2 ) not available \n\n```\nnpm install -g create-react-app\n\ncreate-react-app my-app\ncd my-app\u002F\nnpm start\n``` \n\nThen open [http:\u002F\u002Flocalhost:3000\u002F](http:\u002F\u002Flocalhost:3000\u002F) to see your app. The initial structure of your app is setup. Next, let's [add reactstrap and bootstrap](#adding-bootstrap).\n\n### Adding Bootstrap\n\nInstall reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:\n\n```\nnpm i bootstrap\nnpm i reactstrap react react-dom\n```\n\nImport Bootstrap CSS in the ```src\u002Findex.js``` file:\n\n```js\nimport 'bootstrap\u002Fdist\u002Fcss\u002Fbootstrap.css';\n```\n\nImport required reactstrap components within ```src\u002FApp.js``` file or your custom component files:\n\n```js\nimport { Button } from 'reactstrap';\n```\n\nNow you are ready to use the imported reactstrap components within your component hierarchy defined in the render\nmethod. Here is an example [`App.js`](https:\u002F\u002Fgist.github.com\u002FThomas-Smyth\u002F006fd507a7295f17a8473451938f9935) redone\nusing reactstrap.\n\n### Dependencies\n\n##### Required Peer Dependencies\n\nThese libraries are not bundled with Reactstrap and required at runtime:\n\n  * [**react**](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact)\n  * [**react-dom**](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-dom)\n\n## About the Project\n\nThis library contains React Bootstrap components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, [Poppers.js](https:\u002F\u002Fpopper.js.org\u002F) via [react-popper](https:\u002F\u002Fgithub.com\u002Fpopperjs\u002Freact-popper) is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.\n\nThere are a few core concepts to understand in order to make the most out of this library.\n\n1. Your content is expected to be composed via props.children rather than using named props to pass in Components.\n\n    ```js\n    \u002F\u002F Content passed in via props\n    const Example = (props) => {\n      return (\n        \u003Cp>This is a tooltip \u003CTooltipTrigger tooltip={TooltipContent}>example\u003C\u002FTooltipTrigger>!\u003C\u002Fp>\n      );\n    }\n\n    \u002F\u002F Content passed in as children (Preferred)\n    const PreferredExample = (props) => {\n      return (\n        \u003Cp>\n          This is a \u003Ca href=\"#\" id=\"TooltipExample\">tooltip\u003C\u002Fa> example.\n          \u003CTooltip target=\"TooltipExample\">\n            \u003CTooltipContent\u002F>\n          \u003C\u002FTooltip>\n        \u003C\u002Fp>\n      );\n    }\n    ```\n\n2. Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like tether), or automatically include non-content based elements.\n\n    Examples:\n\n    - `isOpen` - current state for items like dropdown, popover, tooltip\n    - `toggle` - callback for toggling `isOpen` in the controlling component\n    - `color` - applies color classes, ex: `\u003CButton color=\"danger\"\u002F>`\n    - `size` - for controlling size classes. ex: `\u003CButton size=\"sm\"\u002F>`\n    - `tag` - customize component output by passing in an element name or Component\n    - boolean based props (attributes) when possible for alternative style classes or `visually-hidden` content\n\n\n## [Documentation](https:\u002F\u002Freactstrap.github.io)\n\nhttps:\u002F\u002Freactstrap.github.io\n\nDocumentation search is powered by [Algolia's DocSearch](https:\u002F\u002Fcommunity.algolia.com\u002Fdocsearch\u002F).\n\n## [CodeSandbox Examples](https:\u002F\u002Fgithub.com\u002Freactstrap\u002Fcode-sandbox-examples)\n\nHere are some ready-to-go examples for [CodeSandbox](https:\u002F\u002Fcodesandbox.io\u002F) that you can experiment with.\n\nhttps:\u002F\u002Fgithub.com\u002Freactstrap\u002Fcode-sandbox-examples\n\n## [Contributing](CONTRIBUTING.md)\n\n## Development\n\nInstall dependencies:\n\n```sh\nyarn install\n```\n\nRun examples at [http:\u002F\u002Flocalhost:8080\u002F](http:\u002F\u002Flocalhost:8080\u002F) with webpack dev server:\n\n```sh\nyarn start\n```\n\nRun tests & coverage report:\n\n```sh\nyarn cover\n```\n\nWatch tests:\n\n```sh\nyarn test\n```\n\n## Releasing\n\nRelease branches\u002Fversioning\u002Fnotes will be automatically created and maintained by the [release-please](https:\u002F\u002Fgithub.com\u002Fgoogleapis\u002Frelease-please) github action. When you're ready to publish the release, just merge the release branch. The release will be created, the new package will be published, and the updated docs will be deployed to https:\u002F\u002Freactstrap.github.io\u002F.\n\n## In the wild\n\nOrganizations and projects using `reactstrap`\n\n- [airframe-react](https:\u002F\u002Fgithub.com\u002F0wczar\u002Fairframe-react) - [demo](http:\u002F\u002Fdashboards.webkom.co\u002Freact\u002Fairframe\u002F) - Airframe provides all the components a developer needs to build data-intensive web apps using React.\n- [component-template](https:\u002F\u002Freactstrap.github.io\u002Fcomponent-template\u002F)\n- [video-react](https:\u002F\u002Fvideo-react.github.io\u002F)\n- [CoreUI-Free-Bootstrap-Admin-Template](https:\u002F\u002Fgithub.com\u002Fmrholek\u002FCoreUI-Free-Bootstrap-Admin-Template) - [demo](http:\u002F\u002Fcoreui.io\u002Fdemo\u002FReact_Demo\u002F#\u002F)\n- [Admin dashboard example app built with reactstrap](https:\u002F\u002Fgithub.com\u002Freduction-admin\u002Freact-reduction) - [demo](https:\u002F\u002Freduction-admin.firebaseapp.com\u002F)\n- [DevExtreme React Grid](https:\u002F\u002Fdevexpress.github.io\u002Fdevextreme-reactive\u002Freact\u002Fgrid\u002F) - It's a stateless data grid built on top of `reactstrap` with paging, sorting, filtering, grouping, selection, editing and virtual scrolling features.\n- [DevExtreme React Chart](https:\u002F\u002Fdevexpress.github.io\u002Fdevextreme-reactive\u002Freact\u002Fchart\u002F) - A chart built on top of `reactstrap` that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more.\n- [reactstrap-scrollspy](https:\u002F\u002Fgithub.com\u002Fkeidrun\u002Freactstrap-scrollspy\u002F) - [demo](https:\u002F\u002Fkeidrun.github.io\u002Freactstrap-scrollspy\u002F)\n- [formstrap](https:\u002F\u002Fgithub.com\u002Fpedox\u002Fformstrap\u002F) - [demo](https:\u002F\u002Fpedox.github.io\u002Fformstrap\u002F) - Let your `reactstrap` input component integrate seamlessly using `Formik` \n- [Jimu UI](https:\u002F\u002Fdevelopers.arcgis.com\u002Fexperience-builder\u002Fapi-reference\u002Fjimu-ui\u002F) - [demo](https:\u002F\u002Fdevelopers.arcgis.com\u002Fexperience-builder\u002Fstorybook\u002F?path=\u002Fstory\u002Fwelcome--page) - The UI library for [ArcGIS Experience Builder](https:\u002F\u002Fdevelopers.arcgis.com\u002Fexperience-builder\u002F)  mapping platform.\n\nSubmit a PR to add to this list!\n\nLooking to build, document and publish reusable components built on top of `reactstrap`? Consider forking https:\u002F\u002Fgithub.com\u002Freactstrap\u002Fcomponent-template to kickstart your project!\n","reactstrap 是一个为 Bootstrap 5 提供简单 React 组件的库。它提供了无状态的 React 组件，这些组件基于 Bootstrap 5 的样式和布局，但不依赖于 jQuery 或 Bootstrap 的 JavaScript 部分，而是通过 react-popper 实现高级定位功能如提示、弹出框等。核心特点包括高度可组合性和对内容控制的精细度。适用于需要快速构建响应式 Web 应用且偏好使用 React 技术栈的场景，特别适合那些希望在保持 Bootstrap 设计一致性的同时利用 React 生态优势的开发者。","2026-06-11 03:33:13","high_star"]