reactstrap/reactstrap: Simple React Bootstrap 5 components

Simple React Bootstrap 5 components. Contribute to reactstrap/reactstrap development by creating an account on GitHub. Skiptocontent {{message}} reactstrap / reactstrap Public Notifications Fork 1.3k Star 10.3k SimpleReactBootstrap5components reactstrap.github.io MITLicense 10.3k stars 1.3k forks Star Notifications Code Issues 248 Pullrequests 39 Discussions Actions Projects 1 Wiki Security Insights More Code Issues Pullrequests Discussions Actions Projects Wiki Security Insights Thiscommitdoesnotbelongtoanybranchonthisrepository,andmaybelongtoaforkoutsideoftherepository. master Branches Tags Couldnotloadbranches Nothingtoshow {{refName}} default Couldnotloadtags Nothingtoshow {{refName}} default 15 branches 141 tags Code Latestcommit davidacevedo Mergepullrequest#2430fromttuanho/master … 2e1be49 Mar15,2022 Mergepullrequest#2430fromttuanho/master 2e1be49 Gitstats 1,164 commits Files Permalink Failedtoloadlatestcommitinformation. Type Name Latestcommitmessage Committime .github chore:addrelease-*andremovebootstrap5branchfromtesttriggers(#… Nov12,2021 .storybook docs:addGitHublinkstostorybook Feb6,2022 __mocks__ refactor(Modal,Dropdown{*},PopperContent,Tabs):gotoReactAsync… Apr3,2019 config-overrides chore(test):updatereact-app-rewiredconfig-overridestoworkwithE… Oct27,2021 scripts chore:allowlegacyversionsofdocs Oct27,2021 src Mergebranch'master'intomaster Mar16,2022 static chore(docs):Addthemestostorybook Oct27,2021 stories chore:Updatetests Mar4,2022 types chore:fixtype Mar4,2022 .babelrc chore(build):updatebuildtousemicrobundle Oct27,2021 .eslintignore initialcommit Feb19,2016 .eslintrc.json fix(*):fixreleaseartifacts(#1345) Dec31,2018 .gitignore chore(docs):Convertdocstostorybook(#2291) Oct27,2021 .nvmrc chore(nvmrc):update.nvmrcversionto12 Sep7,2021 CHANGELOG.md chore:release9.0.1 Nov12,2021 CODE_OF_CONDUCT.md CreateCODE_OF_CONDUCT.md Sep18,2020 CONTRIBUTING.md chore:UpdatedpullrequesttemplatetomentionTypescript(#2018) Nov10,2020 ISSUE_TEMPLATE.md chore:AddCodeSandboxreferences(#2032) Dec8,2020 LICENSE chore(license):Updateyeartoincludepresent Oct21,2017 PULL_REQUEST_TEMPLATE.md chore:UpdatedpullrequesttemplatetomentionTypescript(#2018) Nov10,2020 README.md chore:updatelegacydocslinkstonetlify(#2368) Oct27,2021 SECURITY.md CreateSECURITY.md Jan30,2020 package.json chore:release9.0.1 Nov12,2021 yarn.lock chore(build):updatebuildtousemicrobundle Oct27,2021 Viewcode reactstrap GettingStarted tl;dr AddingBootstrap Dependencies RequiredPeerDependencies AbouttheProject Documentation CodeSandboxExamples Contributing Development Releasing Inthewild README.md reactstrap StatelessReactComponentsforBootstrap5. Ifyou'reusingBootstrap4,you'llneedtouseReactstrapv8 GettingStarted Followthecreate-react-appinstructionstogetstartedandthenfollowthereactstrapversionofaddingbootstrap. tl;dr npxcreate-react-appmy-app cdmy-app/ npmstart or,ifnpx(Node>=6andnpm>=5.2)notavailable npminstall-gcreate-react-app create-react-appmy-app cdmy-app/ npmstart Thenopenhttp://localhost:3000/toseeyourapp.Theinitialstructureofyourappissetup.Next,let'saddreactstrapandbootstrap. AddingBootstrap InstallreactstrapandBootstrapfromNPM.ReactstrapdoesnotincludeBootstrapCSSsothisneedstobeinstalledaswell: npmibootstrap npmireactstrapreactreact-dom ImportBootstrapCSSinthesrc/index.jsfile: import'bootstrap/dist/css/bootstrap.css'; Importrequiredreactstrapcomponentswithinsrc/App.jsfileoryourcustomcomponentfiles: import{Button}from'reactstrap'; Nowyouarereadytousetheimportedreactstrapcomponentswithinyourcomponenthierarchydefinedintherender method.HereisanexampleApp.jsredone usingreactstrap. Dependencies RequiredPeerDependencies TheselibrariesarenotbundledwithReactstrapandrequiredatruntime: react react-dom AbouttheProject ThislibrarycontainsReactBootstrapcomponentsthatfavorcompositionandcontrol.ThelibrarydoesnotdependonjQueryorBootstrapjavascript.However,Poppers.jsviareact-popperisrelieduponforadvancedpositioningofcontentlikeTooltips,Popovers,andauto-flippingDropdowns. Thereareafewcoreconceptstounderstandinordertomakethemostoutofthislibrary. Yourcontentisexpectedtobecomposedviaprops.childrenratherthanusingnamedpropstopassinComponents. //Contentpassedinviaprops constExample=(props)=>{ return(

Thisisatooltipexample!

); } //Contentpassedinaschildren(Preferred) constPreferredExample=(props)=>{ return(

Thisisatooltipexample.

); } Attributesinthislibraryareusedtopassinstate,convenientlyapplymodifierclasses,enableadvancedfunctionality(liketether),orautomaticallyincludenon-contentbasedelements. Examples: isOpen-currentstateforitemslikedropdown,popover,tooltip toggle-callbackfortogglingisOpeninthecontrollingcomponent color-appliescolorclasses,ex: size-forcontrollingsizeclasses.ex: tag-customizecomponentoutputbypassinginanelementnameorComponent booleanbasedprops(attributes)whenpossibleforalternativestyleclassesorvisually-hiddencontent Documentation https://reactstrap.github.io DocumentationsearchispoweredbyAlgolia'sDocSearch. CodeSandboxExamples Herearesomeready-to-goexamplesforCodeSandboxthatyoucanexperimentwith. https://github.com/reactstrap/code-sandbox-examples Contributing Development Installdependencies: npminstall Runexamplesathttp://localhost:8080/withwebpackdevserver: npmstart Runtests&coveragereport: npmtest Watchtests: npmruntest-watch Releasing Releasebranches/versioning/noteswillbeautomaticallycreatedandmaintainedbytherelease-pleasegithubaction.Whenyou'rereadytopublishtherelease,justmergethereleasebranch.Thereleasewillbecreated,thenewpackagewillbepublished,andtheupdateddocswillbedeployedtohttps://reactstrap.github.io/. Inthewild Organizationsandprojectsusingreactstrap airframe-react-demo-Airframeprovidesallthecomponentsadeveloperneedstobuilddata-intensivewebappsusingReact. component-template video-react CoreUI-Free-Bootstrap-Admin-Template-demo Admindashboardexampleappbuiltwithreactstrap-demo DevExtremeReactGrid-It'sastatelessdatagridbuiltontopofreactstrapwithpaging,sorting,filtering,grouping,selection,editingandvirtualscrollingfeatures. DevExtremeReactChart-Achartbuiltontopofreactstrapthatvisualizesdatausingavarietyofseriestypes,includingbar,line,area,scatter,pie,andmore. reactstrap-scrollspy-demo formstrap-demo-LetyourreactstrapinputcomponentintegrateseamlesslyusingFormik SubmitaPRtoaddtothislist! Lookingtobuild,documentandpublishreusablecomponentsbuiltontopofreactstrap?Considerforkinghttps://github.com/reactstrap/component-templatetokickstartyourproject! About SimpleReactBootstrap5components reactstrap.github.io Topics react javascript bootstrap components ui hacktoberfest reactstrap Resources Readme License MITLicense Codeofconduct Codeofconduct Stars 10.3k stars Watchers 174 watching Forks 1.3k forks Releases 39 reactstrapv9.0.1 Latest Nov12,2021 +38releases Sponsorthisproject tidelift.com/funding/github/npm/reactstrap https://www.paypal.me/evansharp Packages0 Nopackagespublished Usedby261k +260,632 Contributors248 +237contributors Languages JavaScript 82.2% TypeScript 17.6% Other 0.2% Youcan’tperformthatactionatthistime. Yousignedinwithanothertaborwindow.Reloadtorefreshyoursession. Yousignedoutinanothertaborwindow.Reloadtorefreshyoursession.