{"id":13400450,"url":"https://github.com/reactstrap/reactstrap","last_synced_at":"2025-05-13T15:02:55.586Z","repository":{"id":37677462,"uuid":"52071471","full_name":"reactstrap/reactstrap","owner":"reactstrap","description":"Simple React Bootstrap 5 components","archived":false,"fork":false,"pushed_at":"2024-09-26T09:40:49.000Z","size":7625,"stargazers_count":10574,"open_issues_count":319,"forks_count":1297,"subscribers_count":159,"default_branch":"master","last_synced_at":"2025-05-13T04:40:29.328Z","etag":null,"topics":["bootstrap","components","hacktoberfest","javascript","react","reactstrap","ui"],"latest_commit_sha":null,"homepage":"https://reactstrap.github.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactstrap.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"tidelift":"npm/reactstrap","custom":"https://www.paypal.me/evansharp"}},"created_at":"2016-02-19T08:01:36.000Z","updated_at":"2025-05-13T04:10:16.000Z","dependencies_parsed_at":"2022-07-10T15:17:32.605Z","dependency_job_id":"57efdcb5-aaff-4fa4-a64d-1a0e4e9e514b","html_url":"https://github.com/reactstrap/reactstrap","commit_stats":{"total_commits":1226,"total_committers":282,"mean_commits":4.347517730496454,"dds":0.800163132137031,"last_synced_commit":"090bc1eeb19bcc269970151d330c6bc03f731635"},"previous_names":[],"tags_count":159,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactstrap%2Freactstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactstrap%2Freactstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactstrap%2Freactstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactstrap%2Freactstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactstrap","download_url":"https://codeload.github.com/reactstrap/reactstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253877474,"owners_count":21977639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","components","hacktoberfest","javascript","react","reactstrap","ui"],"created_at":"2024-07-30T19:00:52.157Z","updated_at":"2025-05-13T15:02:55.517Z","avatar_url":"https://github.com/reactstrap.png","language":"JavaScript","readme":"[![reactstrap](https://cloud.githubusercontent.com/assets/399776/13906899/1de62f0c-ee9f-11e5-95c0-c515fee8e918.png)](https://reactstrap.github.io)\n\n[![NPM Version](https://img.shields.io/npm/v/reactstrap.svg?branch=master)](https://www.npmjs.com/package/reactstrap) [![Build Status](https://github.com/reactstrap/reactstrap/actions/workflows/test.yml/badge.svg?branch=master)](https://github.com/reactstrap/reactstrap) [![Coverage Status](https://coveralls.io/repos/github/reactstrap/reactstrap/badge.svg?branch=master)](https://coveralls.io/github/reactstrap/reactstrap?branch=master) [![License](https://img.shields.io/npm/l/reactstrap.svg)](https://github.com/reactstrap/reactstrap/blob/master/LICENSE)\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://deploy-preview-2356--reactstrap.netlify.app/)\n\n## Getting Started\n\nFollow the [create-react-app instructions](https://create-react-app.dev/docs/getting-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/\nnpm start\n```\nor,  if npx (Node \u003e= 6 and npm \u003e= 5.2 ) not available \n\n```\nnpm install -g create-react-app\n\ncreate-react-app my-app\ncd my-app/\nnpm start\n``` \n\nThen open [http://localhost:3000/](http://localhost:3000/) 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/index.js``` file:\n\n```js\nimport 'bootstrap/dist/css/bootstrap.css';\n```\n\nImport required reactstrap components within ```src/App.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://gist.github.com/Thomas-Smyth/006fd507a7295f17a8473451938f9935) 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://www.npmjs.com/package/react)\n  * [**react-dom**](https://www.npmjs.com/package/react-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://popper.js.org/) via [react-popper](https://github.com/popperjs/react-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    // Content passed in via props\n    const Example = (props) =\u003e {\n      return (\n        \u003cp\u003eThis is a tooltip \u003cTooltipTrigger tooltip={TooltipContent}\u003eexample\u003c/TooltipTrigger\u003e!\u003c/p\u003e\n      );\n    }\n\n    // Content passed in as children (Preferred)\n    const PreferredExample = (props) =\u003e {\n      return (\n        \u003cp\u003e\n          This is a \u003ca href=\"#\" id=\"TooltipExample\"\u003etooltip\u003c/a\u003e example.\n          \u003cTooltip target=\"TooltipExample\"\u003e\n            \u003cTooltipContent/\u003e\n          \u003c/Tooltip\u003e\n        \u003c/p\u003e\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\"/\u003e`\n    - `size` - for controlling size classes. ex: `\u003cButton size=\"sm\"/\u003e`\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://reactstrap.github.io)\n\nhttps://reactstrap.github.io\n\nDocumentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/).\n\n## [CodeSandbox Examples](https://github.com/reactstrap/code-sandbox-examples)\n\nHere are some ready-to-go examples for [CodeSandbox](https://codesandbox.io/) that you can experiment with.\n\nhttps://github.com/reactstrap/code-sandbox-examples\n\n## [Contributing](CONTRIBUTING.md)\n\n## Development\n\nInstall dependencies:\n\n```sh\nyarn install\n```\n\nRun examples at [http://localhost:8080/](http://localhost:8080/) with webpack dev server:\n\n```sh\nyarn start\n```\n\nRun tests \u0026 coverage report:\n\n```sh\nyarn cover\n```\n\nWatch tests:\n\n```sh\nyarn test\n```\n\n## Releasing\n\nRelease branches/versioning/notes will be automatically created and maintained by the [release-please](https://github.com/googleapis/release-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://reactstrap.github.io/.\n\n## In the wild\n\nOrganizations and projects using `reactstrap`\n\n- [airframe-react](https://github.com/0wczar/airframe-react) - [demo](http://dashboards.webkom.co/react/airframe/) - Airframe provides all the components a developer needs to build data-intensive web apps using React.\n- [component-template](https://reactstrap.github.io/component-template/)\n- [video-react](https://video-react.github.io/)\n- [CoreUI-Free-Bootstrap-Admin-Template](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template) - [demo](http://coreui.io/demo/React_Demo/#/)\n- [Admin dashboard example app built with reactstrap](https://github.com/reduction-admin/react-reduction) - [demo](https://reduction-admin.firebaseapp.com/)\n- [DevExtreme React Grid](https://devexpress.github.io/devextreme-reactive/react/grid/) - 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://devexpress.github.io/devextreme-reactive/react/chart/) - 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://github.com/keidrun/reactstrap-scrollspy/) - [demo](https://keidrun.github.io/reactstrap-scrollspy/)\n- [formstrap](https://github.com/pedox/formstrap/) - [demo](https://pedox.github.io/formstrap/) - Let your `reactstrap` input component integrate seamlessly using `Formik` \n- [Jimu UI](https://developers.arcgis.com/experience-builder/api-reference/jimu-ui/) - [demo](https://developers.arcgis.com/experience-builder/storybook/?path=/story/welcome--page) - The UI library for [ArcGIS Experience Builder](https://developers.arcgis.com/experience-builder/)  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://github.com/reactstrap/component-template to kickstart your project!\n","funding_links":["https://tidelift.com/funding/github/npm/reactstrap","https://www.paypal.me/evansharp"],"categories":["Uncategorized","UI Frameworks \u0026 Libraries","JavaScript","UI Frameworks","Integrations","Cases","UI Kits \u0026 libraries","前端开发框架及项目","9. 其他与展望","React [🔝](#readme)","Component Libraries"],"sub_categories":["Uncategorized","style","Responsive","Design Tools","其他_文本生成、文本对话","5. 参考材料"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactstrap%2Freactstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactstrap%2Freactstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactstrap%2Freactstrap/lists"}